Questions tagged [lexicaljs]

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.

Website

https://lexical.dev/

Playground

https://playground.lexical.dev/

Docs

https://lexical.dev/docs/intro

Syntax

<LexicalComposer initialConfig={editorConfig}>
  <div className="editor-container">
    <PlainTextPlugin
      contentEditable={<ContentEditable className="editor-input" />}
      placeholder={<Placeholder />}
      ErrorBoundary={LexicalErrorBoundary}
    />
    <OnChangePlugin onChange={onChange} />
    <HistoryPlugin />
    <TreeViewPlugin />
    <EmoticonPlugin />
    <MyCustomAutoFocusPlugin />
  </div>
</LexicalComposer>
85 questions
1
vote
2 answers

How to add text programmatically with Lexical editor?

I'm using draftjs so far and I like it but since draftjs is going to be retired I'm playing with lexical text editor. But I could not figure out even very basic thing, insert text programmatically. How can I insert text programmatically? like…
Ko Ohhashi
  • 844
  • 1
  • 11
  • 23
1
vote
0 answers

How to switch the paragraph direction to rtl on Lexical Editor?

I only found a function that returns the diraction that called $isParentElementRTL(selection) I want to add a button that switches the direction of a paragraph between rtl => ltr and from ltr => rtl Note: The app is a React app
Asem Kakhi
  • 31
  • 3
1
vote
2 answers

Lexicaljs receive editor state json and text content using debounce in react project

Requirement I have a requirement to get the editor state in JSON format as well as the text content of the editor. In addition, I want to receive these values in the debounced way. I wanted to get these values (as debounced) because I wanted to send…
Bhanu Sharma
  • 111
  • 2
  • 10
1
vote
0 answers

lexicaljs rich text editor customize FORMAT_TEXT_COMMAND

Currently using lexicaljs rich text editor for react app. I want to implement font family that acts like underline, bold and italic. Basiclly it wrap a selected element with span with inline style font family. is there a way to add option to…
vince852
  • 11
  • 1
1
vote
1 answer

Why are `$create*Node` and `$is*Node` functions prefixed with dollar, when they don't seem to be Lexical context dependent?

In Lexical source code, alongside with every node class, there are also $create*Node and $is*Node functions being exported - for example: export function $createTextNode(text?: string = ''): TextNode { return new TextNode(text); } export function…
Michal Kurz
  • 1,592
  • 13
  • 41
1
vote
1 answer

How to propperly implement automatic @Lexical/react editor focus on initialization/first render?

I know there is an AutoFocusPlugin in @lexical/react, but I can't seem to get it to work properly on initial render. Take the following code (which seems to be matching the current implementation of AutoFocusPlugin.js) - sandbox here : import React,…
Michal Kurz
  • 1,592
  • 13
  • 41
1
vote
1 answer

Export image node to markdown with Lexical

I create a new node: 'ImageNode', similar to this: https://lexical.dev/docs/concepts/nodes#extending-decoratornode This is working, but I need to export markdown content, for this, I'm using $convertToMarkdownString. My problem is images inserted in…
1
vote
1 answer

Component-testing @lexical/react editor: How to assert against HTML rendered by Cypress?

I want to component-test a controlled @lexical/react based input in Cypress. An example scenario: Given I have a controlled input with initial state "Hello world" When I click into the input And I press "! key" + "Home key" + "Arrow right key" +…
Michal Kurz
  • 1,592
  • 13
  • 41
0
votes
0 answers

Unable to Apply Styling to Lexical Editor Component in React

I'm working on a React project and using a Lexical Editor component from Facebook. I'm trying to customize its appearance by creating a separate CSS file. However, my styling changes don't seem to have any effect. Editor.jsx: import {…
0
votes
0 answers

NodeTransform in Lexical.js is transforming only once

I wanted to build an autocorrect plugin. So, I started out building a simple node transform. So, I just setup a custom autocorrect node and hardcoded two values which if the editor encounters, it should replace it with another set of hardcoded…
0
votes
0 answers

Lexical Pasting Text with \n programmatically

I have a text that a get from my database that comes stringfied and contains the \n characters for new lines. For instance: " I'm in the first line here. \n I'm in the second line here " How do I make this text to be loaded into the editor taking in…
Joao Gui
  • 119
  • 6
0
votes
0 answers

How to use a Lexical Decorator Node without React?

I'm trying to add a Node to Lexical that can display both an Image and some (static) text - it's not meant to be editable through the editor. From what I can tell a Decorator Node is the way to go to display arbitrary DOM elements, however…
Jonas
  • 79
  • 8
0
votes
0 answers

How to prevent link block from being erased on erasing last character in lexical/react?

I'm using @lexical/react to make a markdown editor. If you type a link, like [Google](https://google.com) and then press backspace to change the link, the entire link block is removed, when you erase just ). How can I prevent this? Instead of the…
U. Watt
  • 533
  • 1
  • 5
  • 27
0
votes
0 answers

preserve formatting in lexical editor

Whenever im trying to copy-paste text from word doc or google doc to lexical editor, formatting is not preserved. Is there any api provided by lexical to preserve formatting. How to preserve formatting in editor? I tried many ways didn't worked…
0
votes
1 answer

How to set a default font family to a lexical editor?

How to add a default font to a lexical text editor. I have selection-based font family change working. I am trying to figure out how I cans set a default font family.
Anil Kumar
  • 2,223
  • 2
  • 17
  • 22