CODEWITHSUNDEEP
reactjslexical
Samuel Duhaime-Morissette
Samuel Duhaime-Morissette

Reputation: 31

Send Lexical data to a server and read it with a new lexical component

this is my first time asking a question with stackoverflow, but I'm stuck on this problem for too many days.

My question, how can I change the initialConfig.editorState to the stringifiedEditorState that I just save in my database?

So far, I'm using Lexical, a Facebook text editor with React/Next.js. I was able to create an editor and save it to my mongodb database as a JSON string.

    {
   "root": {
      "children": [
         {
            "children": [
               { "detail": 0, "format": 1, "mode": "normal", "style": "", "text": "Test", "type": "text", "version": 1 }
            ],
            "direction": "ltr",
            "format": "",
            "indent": 0,
            "type": "paragraph",
            "version": 1
         }
      ],
      "direction": "ltr",
      "format": "",
      "indent": 0,
      "type": "root",
      "version": 1
   }
}

I want to be able to read the Json value that I save to my mongodb database with a new read only lexical editor.

function onChange(editorState: any) {
      editorState.read(() => {
         const stringifiedEditorState = JSON.stringify(editorState.toJSON());
         setValue(stringifiedEditorState);
      });
   }


const initialConfig = {
      namespace: "editeurConfig",
      theme: editeurTheme,
      onError: onError,
      nodes: [ListNode, ListItemNode, AutoLinkNode, LinkNode],
      readOnly: true,
      editorState: null
   };

My question again, how can I change the initialConfig.editorState to the stringifiedEditorState that I just save in my database?

Upvotes: 3

Views: 3684

Answers (2)

Niket Tongare
Niket Tongare

Reputation: 632

Simply use the onChange Plugin as follows

import the packages

import { createEditor } from 'lexical';
import { $generateHtmlFromNodes } from '@lexical/html';
import { $convertToMarkdownString, TRANSFORMERS } from '@lexical/markdown';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';

Now use the plugin inside LexicalComposer

<OnChangePlugin
        onChange={(editorState) => {
          editorState.read(() => {
            const config: any = {
              namespace: 'Temp',
              theme: editorConfig.theme,
              nodes: editorConfig.nodes,
              onError: editorConfig.onError,
              editable: true,
              editorState: editorState,
            };

            const editor = createEditor(config);
            const htmlString = $generateHtmlFromNodes(editor, null);
            const markdown = $convertToMarkdownString(TRANSFORMERS);

            // manage your useState here
          });
        }}
      />

Upvotes: 0

Fletcher LaRue
Fletcher LaRue

Reputation: 41

On editor initialization

You can simply pass the serialized string into the initial state of the editor via the editorState key.

For example:

// your config
const editorConfig = {
  // the rest of your config...
  editorState: editorStateJSONString,
};

// inside your return statement
<LexicalComposer initialConfig={editorConfig}>
   {/* Your plugins */}
</LexicalComposer>

The caveat is that:

Note that Lexical uses initialConfig.editorState only once (when it's being initialized) and passing different value later won't be reflected in editor

From: https://lexical.dev/docs/concepts/editor-state

So it depends on the timing of initializing the editor and when you retrieve the database data.

After editor initialization

It appears you can use setEditorState to update state after initialization:

Another way to set state is setEditorState method, which replaces current state with the one passed as an argument.

For example:

const editorState = editor.parseEditorState(editorStateJSONString);
editor.setEditorState(editorState);

From: https://lexical.dev/docs/concepts/editor-state#updating-state

For more details see: https://lexical.dev/docs/concepts/editor-state

Upvotes: 4

Related Questions