Stack Overflow
Stack Overflow

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

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 way?
nerdess
  • 10,051
  • 10
  • 45
  • 55
1
vote
0 answers

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. is there a lexical way of doing it?
Rami Shenouda
  • 33
  • 4
1
vote
0 answers

How can we implement a find function in Meta's Lexical editor?

How can we identify text matching a certain string in Lexical editor and highlight it similarly to how the browser's find function works? Ideally we would do so in a way that does not affect the serialized output of the editor (because search…
Slbox
  • 10,957
  • 15
  • 54
  • 106
1
vote
0 answers

ReactJS Lexical TextEditor Loses focus when re render by initial value

so I have 2 components. The TextEditor by lexical Insight component which uses the TextEditor and adds some functionality The TextEditor code: import ExampleTheme from "./themes/ExampleTheme"; import { LexicalComposer } from…
Matan
  • 73
  • 2
  • 14
1
vote
0 answers

How to use own components library with LexicalJS

Trying to understand how to use own components library instead of rendering certain html elements. If we take the mentions plugin (https://lexical.dev/docs/demos/plugins/mentions) how could we render e.g. our own Text functional component instead of…
Asso
  • 47
  • 8
1
vote
1 answer

How to check if the editor is empty?

I have two editor instances. One is editable Second one is read only for preview what user is typed I'm copied editor state beetwen those editors - wtih no problems But i want to hide second editor when first one is empty. I'm trying something like…
lucio
  • 17
  • 3
1
vote
0 answers

Is there a way to add a custom card node to lexical extending the element node

I want to be able to add a card like a bootstrap card that can be written in with elements such as paragraphs etc. I have the following state and config const CONTENT =…
Coder1234
  • 389
  • 1
  • 3
  • 9
1
vote
1 answer

Triggering a lexical.js mentions menu programatically when clicking on a mention

What I need Let's start with The mentions plugin taken from the docs. I would like to enhance if with the following functionality: Whenever I click on an existing MentionNode, the menu gets rendered (like it does when menuRenderFunction gets…
Michal Kurz
  • 1,592
  • 13
  • 41
1
vote
2 answers

Why can't my custom Lexical React plugin use the LexicalComposerContext?

function UpdateStatePlugin(props) { ... const [editor] = useLexicalComposerContext(); ... } function Notes() { ... const initialConfig = { ... }; return ( ... …
biinster
  • 45
  • 9
1
vote
0 answers

Lexicaljs editor clicking image is not triggering node selection

I have created custom ImageNode by extending the DecoratorNode. When I click the ImageNode, a click event is fired on the span of that node as expected, but still selection.getNodes() doesn't have the image node. while clicking on other elements…
Shreyas Jadhav
  • 2,363
  • 4
  • 10
  • 23
1
vote
1 answer

How to turn the Lexical editor in read only mode

I'm using the Lexical editor from Facebook and I'm having difficulties to set the editor into read only mode. In order to try it, I'm setting the readyOnly property but no success:
Dan
  • 1,518
  • 5
  • 20
  • 48
1
vote
1 answer

How can I pass in existing html content to initialize an instance of lexical editor?

When using LexicalComposer, the initialConfig accepts an editorState parameter that can be used to pass in some initial content. If this initialContent is a complex html string, I am not clear how to parse it. For a simple string, I have it like…
tolkienfan2
  • 101
  • 1
  • 13
1
vote
0 answers

How to use inline css with Lexical theme instead of class names

I am building an email client which uses lexical to convert the Rich Text into HTML using $generateHtmlFromNodes. I have specified the Tailwindcss class names in the lexical theme property of the initialConfig. const theme: EditorThemeClasses = { …
Rafael Zasas
  • 891
  • 8
  • 27
1
vote
0 answers

React Lexical nodes not persisting styles present in original HTML

I have created richtext editor in React using Lexical library. I am using Lexical APIs for serialisation and deserialisation to generate following HTML from editor.

Manish Mahajan
  • 1,140
  • 1
  • 14
  • 38
1
vote
2 answers

Set initial state for editor

I am using lexical and want to set initial text for the editor. For now, I am just trying to hardcode the initial text. Turns out I can't just pass a String. It needs to be in JSON format. Thus I am passing in the following instead. '{"text":"sample…
kar
  • 4,791
  • 12
  • 49
  • 74
1 2
3
4 5 6