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
17
votes
3 answers

With Lexical, how do I set default initial text?

With the Lexical text editor framework, what's the easiest way to initialize the editor in React with a default text string? I could, for instance, create an instance, manually save the JSON state, and then copy that JSON blob to my code, to set as…
fisch2
  • 2,574
  • 2
  • 26
  • 29
7
votes
1 answer

How to imperatively set value of @lexical/react plaintext editor, while retaining `Selection`?

What I need to get done I want to make a simple controlled lexical plaintex editor - one which is controlled by a parent string field. But I'm really struggling with getting my editor to simultaneously: Be adopting parent state whenever it…
Michal Kurz
  • 1,592
  • 13
  • 41
6
votes
4 answers

How can I listen to a keystroke combination with lexical.js?

I'm new to lexical.js and don't fully understand how I can listen to different keystroke combinations. I want to listen to "Ctrl/Cmd+S" and then fire off a callback (to save data). How can I do that? With a textarea I can do something like: const…
caweidmann
  • 396
  • 2
  • 12
6
votes
0 answers

Image manipulate in lexical editor

I am working on blog like web project using lexical editor in nextjs. I am trying to implement image plugin in lexical editor. For now it coverts to base64 format which will be expensive for storing in database. Instead of storing base64 I want to…
5
votes
0 answers

What does the namespace config option do for LexicalJS `createEditor`?

I can't find anything in the docs. This is what I've found https://lexical.dev/docs/api/modules/lexical#createeditorargs.
Adrian Adkison
  • 3,537
  • 5
  • 33
  • 36
5
votes
2 answers

How to integrate Lexical with React-Hook-Form for submitting Editor as input

When I try to make a blog, I can't pass the editor in the form. I found this: DraftJS React-Hook-Form - submitting Editor as input but it seems that LexicalRichTextEditor does not have such a tag to pass. Can anyone help me? How can I pass…
5
votes
1 answer

Lexical Text Editor: What should I save to the database?

I'm building a rich text editor for a question and answer site. As far as I know Lexical lets us get output data to JSON, JSON string, HTML, Markdown and others. Based on the recommended best practices, what data should I save to a MySQL or MongoDB…
R.M. Reza
  • 725
  • 1
  • 8
  • 20
4
votes
2 answers

Convert Lexical to HTML

I am trying to export the content of my RTE developed with Lexical in HTML format. To do so, I have a button with an handleClick function which is supposed to console.log the content of the RTE in HTML. When I try to export the content as a…
Pingolin
  • 3,161
  • 6
  • 25
  • 40
3
votes
2 answers

What is the proper way of using HashtagNode in lexicaljs?

I am trying to get basics to work with lexicaljs, like hashtags, mentions etc. What does one need to do to get hashtag to work? Identical to how it works on Twitter for example, not through a button but triggered as one types #something. Modified…
enko
  • 615
  • 6
  • 20
3
votes
2 answers

Supporting "@mention" functionality with lexical js

I am trying to use lexical js to build a text editor that supports mentions as in fb messenger. I have not been able to find many examples. I am trying to insert a div of possible auto-complete options that will show up under the text being entered.…
Lioness
  • 500
  • 8
  • 13
3
votes
2 answers

Keyboard navigation across text and decorator nodes

I'm building a template editor with lexical that uses custom decorator nodes to represent template fields (placeholders) following this example. When changing the selection using the arrow keys, the selection gets stuck at the decorators. For…
ralfstx
  • 3,893
  • 2
  • 25
  • 41
3
votes
2 answers

Find all matching text and apply styling in Lexical

I want to find text* in Lexical JS and apply a highlight style to all matches. import {useLexicalComposerContext} from "@lexical/react/LexicalComposerContext"; import {$createRangeSelection, $getRoot, $isParagraphNode, ParagraphNode} from…
OrderAndChaos
  • 3,547
  • 2
  • 30
  • 57
3
votes
0 answers

Lexical key command conflict and priority

I'm using lexical (ReactJS) for an input field and need to be able to submit by hitting ENTER (SHIFT-ENTER typically creates a new line). To do so, I register a listener with the priority set to COMMAND_PRIORITY_LOW (1), otherwise the default…
Theo.T
  • 8,905
  • 3
  • 24
  • 38
3
votes
0 answers

Is there a way of extending the functionality of basic Lexical nodes?

I know I can create custom nodes that are an extension of inbuilt node classes. And it works great, But I would also like to extend the functionality of inbuilt classes themselves. For example, I have this helper function: import { LexicalNode }…
Michal Kurz
  • 1,592
  • 13
  • 41
3
votes
1 answer

Can we store metadata on every words and let user modify it and still keep it?

I’m new to lexcal and I’m developing annotation tool for speech-to-text. I have used draftjs. I use entity and decorator to store and manage metadata on each words. every single words are entities and each entity has timestamp as metadata. example:…
Ko Ohhashi
  • 844
  • 1
  • 11
  • 23
1
2 3 4 5 6