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
0
votes
1 answer

How to add target={_blank} to all editor links by default?

I want all my editor links to open in a new tab with target={blank} From documentation I did not find a way to do it! Ι have add the LinkEditor implementation, but I don't understand from documentation-api where to add setTarget attribute to…
gikall
  • 559
  • 5
  • 16
0
votes
0 answers

How to use JavaScript WYSIWYG editor Lexical using Vanila JS?

I want to use Lexical Editor for my website. So far I have used TinyMCE and it was easy to use: I downloaded TinyMCE, saved it on the server and inserted the necessary JS into my web pages. But I don't understand the instructions on…
sthr
  • 23
  • 1
  • 6
0
votes
1 answer

LexicalJS text editor : how can I allow users to add text pressing buttons

I'm trying to figure out Lexical but the docs are not great at all (despite the project looking very nice). I'm trying to add content into the editor automatically by getting my users to press some buttons, or some divs with content inside. I have…
Tibo
  • 621
  • 1
  • 8
  • 24
0
votes
0 answers

Lexical Editor: How to replace selected line of text

I am looking to replace a selected text with multiple lines, but I am unable to find the exact solution in the documentation or stackoverflow. Here is my code: editor.update(() => { const paragraphNode = $createParagraphNode(); const newNode…
user862602
  • 33
  • 5
0
votes
1 answer

Lexical editor: Cleanup HTML that gets generated using $generateHTMLfromNodes

I am generating HTML from Lexical using $generateHTMLfromNodes. The HTML code I get is e.g. this one:

Hello crazy frog

How can I get rid…
nerdess
  • 10,051
  • 10
  • 45
  • 55
0
votes
1 answer

Hide on-focus border of Input Box created using Lexical library by facebook

Can't hide on-focus border of p tag generated by Input Box generated by Lexical library I want to hide the border of the input box generated by using Lexical library I have tried adding css properties with developer tools but nothing worked import…
Swetank
  • 111
  • 2
  • 7
0
votes
2 answers

How do I initialize a RichTextEditor from Facebook's Lexical with a text string?

The task is to replace existing material ui textFields with facebook's lexical plugin. I just want a bare-bones example of how to populate the rich text plugin with text. I'm currently using this…
Divyanth Jayaraj
  • 950
  • 4
  • 12
  • 29
0
votes
0 answers

Autolink plugin prevents inserting new words after the autolink

I'm having a problem implementing the auto link plugin (copied from LexicalPlayground repo) in my Lexical Editor. When I enter the link in my editor instance it properly identifies the autolink, but when I hit space I cannot enter a new word. The…
Aaron Z
  • 73
  • 1
  • 5
0
votes
0 answers

Preserving editorState and history in LexicalEditor inside Bootsrap Overlay

How can I preserve the state of the editor and the history without useState, i.e. prevent the creation of a new instance of the editor every time the overaly is triggered? This is vanilla create-react-app. import './App.css'; import { useState,…
biinster
  • 45
  • 9
0
votes
2 answers

Lexcial Editor: Spaces inside HTML cause "cannot insert a non-element into a root node" error

I work with a database that contains articels saved as simple HTML and want to switch to a WYSIWYG that plays well with React so I am looking into Lexical. When "feeding" Lexical with the intitial HTML I need to transform it into Nodes first. But:…
nerdess
  • 10,051
  • 10
  • 45
  • 55
0
votes
0 answers

Is there a way to convert Lexical editor content to raw HTML?

I was almost done working with Lexical when I realized I can't store some lexical content as pure HTML tags without the default lexical classes. For example: Editor content is stored as:
Keshav Agarwal
  • 7
  • 1
  • 3
0
votes
0 answers

Does onSelectOption prop need to be memoized on LexicalTypeaheadMenuPlugin?

In the official mentions plugin example for the Lexical.js library, the onSelectOption callback's reference is stabilized via useCallback: const onSelectOption = useCallback( ( selectedOption: MentionTypeaheadOption, nodeToReplace:…
Michal Kurz
  • 1,592
  • 13
  • 41
0
votes
0 answers

Is it possible to display the caret outside of token, when it is positioned right after its last character?

I have a TokenNode, which is pretty much just a regular TextNode, but with some additional styles: createDOM(config: EditorConfig): HTMLElement { const dom = super.createDOM(config); dom.style.background = "lightgrey"; …
Michal Kurz
  • 1,592
  • 13
  • 41
0
votes
1 answer

How to get the rendering in the correct format using Lexical Editor

I'm trying to write a blog for myself for the first time, and I've been using Lexical(facebook/lexical: https://github.com/facebook/lexical) to build a rich text editor in the panel for the past two months. It works great and I was able to store the…
HappyKoala
  • 191
  • 1
  • 11
0
votes
1 answer

Lexical React Get Markdown Value

I'm newbie. I want to get markdown value from lexical/react editor. I am using RichTextPlugin in my project. But I can't get value as markdown. How can I get markdown value? Here is my code; function Placeholder() { return
Abdulkadir KG
  • 83
  • 1
  • 8
1 2 3 4
5
6