118 questions
1
vote
2
answers
74
views
css styling sequence of span and br with a background
I am trying to style a code block in Lexical Editor for which I cannot change the markup
Basically, a code block is a flat sequence of span and br, like :
<span class='inserted'>+</span>&...
- 22.6k
1
vote
0
answers
233
views
Extending nodes: Lexical node does not exist in active editor
I'm running a React Vite project with a Lexical editor. I'm trying to extend the list node, to make it styleable (square, circle, roman numerals, etc.). Here is my extended node file:
import { ...
0
votes
0
answers
125
views
How do i test Lexical Toolbar Plugin and trigger onError of initialConfig?
I am using ToolbarPlugin from Lexical and using the code from Lexical repo. My Sonarqube has flagged below code for test coverage and am not sure what test needs to be inlcuded:
`const $updateToolbar =...
- 11
0
votes
1
answer
63
views
Inline style on ListItemNodes
I'm building a rich-text-editor component in vue using lexical and taking a lot of inspiration from the lexical-playground that is using the react plugins and trying to convert them where needed.
I ...
- 13
0
votes
0
answers
380
views
Building Lexical editor playground
I have no experience in web stack. I am trying to build a Lexical editor playground component (live at https://playground.lexical.dev/ and its source in https://github.com/facebook/lexical/tree/main/...
- 1,164
1
vote
0
answers
206
views
Programmatically set focus to and insert text into a specific Lexical JS instance in React (JSX) via clicking an element outside the editor
I'm working on a React project that has a pair of Lexical rich text editors on the page. I'm trying to achieve the following: My cursor is somewhere within one of the editors, then I click a button ...
0
votes
0
answers
138
views
Can't restore selection after deleting/modifying lexical node
I wrote a custom plugin that highlights incorrect words in the text by adding a specific class (case 1) or removes the class and merges the node with adjacent ones when the label is no longer needed (...
- 1
1
vote
1
answer
244
views
How to trim the content of the current editor state in Lexical.js based on height?
I am working with Lexical.js to implement a content editor. I want to trim the content of the current editor state if the rendered content's height exceeds a specified height (rootelement).
Here’s the ...
- 11
0
votes
0
answers
201
views
How to modify the internal state of a Lexical editor from outside the editor?
I'm working on a project where I'm implementing Lexical as part of a text editor. However, Lexical is used for multiple cells at once.
My TranslationEditor component looks like this:
const ...
- 1
0
votes
0
answers
96
views
$validatePoint: anchor point.offset > node.getTextContentSize() in lexical editor with iframe
After updating Lexical to the latest stable version (0.23.0), I am encountering an error when typing more than one character in the editor. The problem appears when loading Lexical inside an iframe, ...
1
vote
1
answer
250
views
Lexical Custom Node not working with Enter Key
Need to create a custom node to create heading1, formatted and normal fonts on choosing each button and created a custom node for it.
NewNode.js
import { ElementNode } from 'lexical';
export class ...
- 13
2
votes
2
answers
376
views
TypeScript error when using registerRichText with Lexical Editor: "Excessive stack depth comparing types 'LexicalEditor' and 'LexicalEditor'"
I'm working on implementing a rich text editor using the Lexical library with vanilla JavaScript and TypeScript. My understanding is that the editor should be attached to a contenteditable div, and ...
0
votes
1
answer
114
views
Converting HTML with img tags with base64_encoded data in Lexical
I have HTML that I need converting to Lexical JS. The html contains img tags with base64 encoded values.
But when I run through this code the data for the img tag is none existent.
useEffect(() =>...
- 5,303
1
vote
0
answers
962
views
I made a custom node in Lexical editor and it works in dev mode, but breaks after building my custom editor
I have created a custom node in Lexical called StyledParagraphNode that extends the ParagraphNode. It works perfectly in development mode, but when I build the project and try to use the custom editor,...
2
votes
0
answers
675
views
Getting and changing the text content in Lexical Editor on React
So, I'm using the lexical editor in my react project. My app get the text from a API that transcribe audio and then I need to put on the Lexical editor, but I'm having problem to manipulate the text, ...
1
vote
0
answers
356
views
Does anyone know how to preserve class attributes in Lexical?
I'm working with Facebook's Lexical editor in Typescript and need to preserve class attributes on text nodes fx. on a h4 tag, when importing them to the editor through the $generateHtmlFromNodes ...
- 11
0
votes
1
answer
89
views
Typescript version mismatch between project version and external library
I have a SharePoint Framework project with several React webparts. This project is forced to use TypeScript v4.5.5 due to compatibility with SharePoint Framework. I would like to use an external ...
- 23
1
vote
1
answer
910
views
Lexical editor: Intercept nodes before inserting them (clipboard)
I am using some Lexial plugin that enhances the copy/paste experience (CopyPasteEnhancementPlugin).
When investigating how it works I found this helper function inside clipboard.ts. The function gets ...
- 11k
3
votes
1
answer
3k
views
How can I integrate @lexical/table into the lexicalEditor from payload cms?
I've searched the web for a way to use tables in the slateEditor from payload and came to the solution, that I'm not able to to this.
Then I've checked if the lexical editor has tables integrated. The ...
- 2,325
0
votes
0
answers
1k
views
convert lexical editor state to markdown
I am trying to download lexical editor contents in the form of a file. So i am trying to extract its equivalent markdown .
import { createHeadlessEditor } from '@lexical/headless';
import { $...
0
votes
1
answer
2k
views
Lexical, custom node and transform
I have custom TextNode but AutoLinkPlugin doesn't work with it. After a bit of debugging it looks like Transform doesn't respect nodes replacement.
I managed to get it working by copying key of ...
- 136
0
votes
1
answer
473
views
What's the lexical-way to identify incoming HTML and parse out my custom node?
In lexicaljs, I created a node from a TextNode that is basically a placeholder representation. User selects from a dropdown and I add this new PlaceholderNode into the editor, represented as "{...
- 1,346
1
vote
1
answer
422
views
Cannot enter text into vanilla JavaScript plain-text Lexical
I wrote a small example of the vanilla JavaScript plain-text editor, and I'm not able to place my cursor on the text area and insert text. My question was on what I might need to do to make this ...
- 13
1
vote
0
answers
329
views
How can I tweak the Lexical markdown shortcut plugin to actually retain the markdown syntax (rather than replacing)
I've built a minimal markdown editor using Lexical, Lexical-Solid, and the provided plugins and examples. I'd like to, in some cases, preserve the markdown syntax, but it looks like the existing ...
- 11
0
votes
2
answers
1k
views
Having issues with my implementation of Lexical in my React typescript and tailwinds project
I am implementing a basic rich text editor. I am trying to implement bold, italic, underline and strikethrough. A few issues:
Underline and strikethrough don't show up. Even when I inspect element.
...
3
votes
0
answers
355
views
Lexical Editor: DecoratorNode in vanilla js
How do you handle decorator node output in vanilla js? It looks like the decorate method of thevDecoratorNode Class is for rendering React components. Is the decorate() method required to extend the ...
- 31
0
votes
0
answers
202
views
How to optimally use Lexical as input in chat application?
I am wondering how to implement Lexical as an input for a chat app. The issue lies in rendering the message list.
A naive approach would involve creating a common message editor component that wraps ...
- 1,086
-1
votes
1
answer
328
views
LexicalComposer 'destroy' is not a function
I have an app that imports a private NPM package that contains a text editor component that is powered by LexicalComposer. Currently in my app, I am trying to upgrade to version 18 of React and I am ...
- 1
2
votes
1
answer
1k
views
Why is this bare minimum Angular with Lexical.dev setup not working?
I was following the https://lexical.dev/docs/getting-started/quick-start
It seem straightforward.
import { createEditor } from 'lexical';
@Component({
selector: 'app-root',
standalone: true,
...
- 4,236
1
vote
1
answer
605
views
LexicaljS - Spellchecker
I am trying to create a spellchecker plugin. I already have a backend that can recieve words or sentences and returns a list of incorrect words [{"word":"sd","start":0,&...
- 49
1
vote
1
answer
3k
views
How to selection text range programmatically in Lexical.js
I'm experimenting with lexical, and I have a specific use case I can't implement.
A user enters some text, the app sends it to a backend to check for mistakes. In response, the backend returns ...
- 911
1
vote
0
answers
656
views
Lexical editor: Can't capture the image node and data when dragging an image into the editor
If I drag an image from my local disk into the Lexical editor, the onDrop function can't capture the dragged image node and data. Is is a bug?
If the imaged was dragged into the editor and then you ...
- 21
0
votes
1
answer
533
views
Mirroring two editor instances in Lexical.js
Does anyone have an example to reflect the updates in an editor instance to another instance?
The docs for Lexical.js are very poor.
3
votes
0
answers
589
views
Several react apps at the same page with Lexical editors causing error unable to find an active editor state
The problem occur when several react apps with lexical editors are used at the same page.
The first app that is getting focus works as expected no matter which app it is, but as soon as another app is ...
- 31
1
vote
1
answer
2k
views
How to pass the text content of Lexical editor when pressing Enter key using react.js
I have Lexical editor and i wanted to pass a value when user click enter. I was able to pass the value of my Lexical editor on button click, however on enter key it returns empty string.
my approach ...
- 137
1
vote
1
answer
1k
views
How do I implement a smart compose / suggestions / autocomplete feature in lexical.js
Hi I'm new to Lexical and want to create a suggestions plugin similar to how Gmail handles suggestions and smart compose, see attached image. Are there examples of how to do this in Lexical or can ...
- 476
0
votes
0
answers
1k
views
How could I save large content from Lexical text editor to my database?
Is there a way that I can save large content from my Lexical editor to my database? Let say the number of words is about 20k.
I tried to serialize the editorState into JSON and JSON stringified string,...
- 1
0
votes
1
answer
2k
views
Tiptap Events don't work when attached to an editor that is passed down to components via props
I've created an editor using useEditor. I want to bind events to it, to get active state of a specific mark and getAttributes to get link hrefs to update urls of previously set links. I cannot bind ...
1
vote
1
answer
1k
views
Unable to find an active editor state using webpack serve
Until recently, i used react-scripts to run my react project based on lexical.But now i need to implement it as a module of my main project. To do this, i configured webpack to build it for a ...
- 21
1
vote
0
answers
2k
views
Lexical Editor State not keeping HTML styles
I have taken the lexical editor state and converted to an HTML string. I am then setting that string to my component state, then using it to set the editor state in a sample display editor. However, ...
- 321
2
votes
1
answer
2k
views
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 ...
- 21
1
vote
2
answers
2k
views
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 ...
- 31
1
vote
1
answer
1k
views
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 ...
- 139
2
votes
0
answers
506
views
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 ...
- 894
0
votes
0
answers
1k
views
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 ...
1
vote
1
answer
1k
views
how to transform text with under score to italic during copy-paste in Lexical editor?
I'm using Lexical for rich text
here is my lexical code:
<LexicalComposer initialConfig={{
namespace: 'lexical-editor',
editorState: () => $...
- 401
1
vote
0
answers
826
views
What's the proper way to update the Lexical state
we are migrating from draft-js to Lexical,
I need to change fractions to single-character fractions(1/4 ==> ¼) and I use onChange for this purpose
function onChange(editorState: EditorState, ...
- 401
1
vote
3
answers
2k
views
Open link with target="_blank" as default in Lexical editor
I am using AutoLinkNode and LinkNode from '@lexical/link'.
How can I set target="_blank" to be default on newly created links? Do I need to override the LinkNode class or is there an easier ...
- 11k
0
votes
1
answer
2k
views
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.
- 2,319
2
votes
1
answer
428
views
How can I disable the bold and italic keyboard shortcuts in lexicaljs?
I'm using Lexical, and I'm trying to disable the bold and italic shortcuts .. and possibly all keyboard shortcuts. how can I do that?
I don't want to disable they keyevents listeners from javascript. ...