Question: convert multiparagraph plain text to lexical editor state on backend

[kgkg]

Hello,

we're using Lexical editor in frontend.

We have description fields in some of our entities (stored in database) which contains some random description plain text from faker library (can have \n line breaks). We're setting description fields values programmatically on backend fixture generation process.

Now, instead of saving plain text, we want to save lexical format of each of these texts on backend in order to later open them in frontend.
Something like:

const lexicalDescription = convertToLexical(plainTextDesciption);

We were searching for a quite a long time and couldn't find a solution. We don't want to make workarounds on frontend for plain text - we want it to be lexical from the start.

How can we achieve that?

[moy2010]

Take a lookat the documentation for the editor state. https://lexical.dev/docs/concepts/editor-state

Once you understand Lexical's schema, your task can be accomplished rather easily.

[kgkg]

Thanks @moy2010 for giving me hope that it's possible :)
It was not that easy without realizing how lexical editor works under the hood though.

In case someone is struggling with this, here is my solution:

const lexicalEditor = createHeadlessEditor({
    namespace: "Editor",
    nodes: [],
    onError: console.error
});

async function plainTextToLexicalState(text: string): Promise<string> {

    return new Promise((resolve) => {
        lexicalEditor.registerUpdateListener(({editorState}) => {
            resolve(JSON.stringify(editorState));
        });

        lexicalEditor.update(() => {
            const paragraph = $createParagraphNode();
            const textNode = $createTextNode(text);

            paragraph.append(textNode);

            $getRoot()
                .clear()
                .append(paragraph);
        });
    });
}

[sherrellbc]

This was helpful. It was unclear from the docs that you could create a TextNode that was entire chunks of texts, including newlines. Thanks for this.

[alicercedigital]

Thanks! You save my day hahaha

[eparker-wavefin]

Just want to come back and thank you for this! I was originally trying to parse line break nodes with $createLineBreakNode(), but your example lead me to try parsing everything as one text node, which worked perfectly!

[ZelCloud]

We really need something more simple than this. Can we just get a prop or function that just takes in a string and prints default lexical text or converts a string into editor state instead of doing all these hooks and macro plugins to adjust the behavior to display an initial value.