Replace RootNode (or entire text content) of a Lexical editor at runtime?

[sherrellbc]

I am trying to build a webapp whereby users can type in markdown in one tab and click Preview to see how it renders as HTML on another. Using Lexical the Edit->Preview step is somewhat simple:

editor.update(() => {
    const content = $getRoot().getTextContent();

    setTextContent(content) //save text content into React state
    $convertFromMarkdownString(content, TRANSFORMERS)
})

However I am not sure how to do the inverse. After the user has viewed the markdown I want to effectively go back to the editor view to continue inputting the raw markdown.

I can save the raw text off in some React state but I do not see any sort of equivalent to e.g. $getRoot().setTextContent() or so.

---

Is there a way in Lexical to generate a new editorState from a raw input string and replace the RootNode with it? During create you can do something like this with initialConfig - this case generating some default markdown in the editor:

<LexicalComposer initialConfig={
{
    ... // other config
    editorState: () => $convertFromMarkdownString('', TRANSFORMERS),
}}>

To generate that initial state, but can it be done at runtime? I am open to however this might be accomplished. Perhaps replacing the RootNode is not correct approach here.

Or maybe I should be serializing the "Edit" state when going to "Preview" and then somehow replacing the state with this when going back? But it was not clear in the docs on whether this sort of thing was supported.

[sherrellbc]

Indeed setting the editor state is an approach that works here, though I will leave it up to others to tell me whether or not this is the correct way to go about it. I ended up doing something like:

//on edit button click (markdown -> string)
if (editorRef.current)
    editorRef.current.update(() => {
        editorRef.current.setEditorState(editorState);
    })

//on preview button click (string -> markdown)
if (editorRef.current)
    editorRef.current.update(() => {
        setEditorState(editorRef.current?.getEditorState());
        const content = $getRoot().getTextContent();
        setTextContent(content);
        $convertFromMarkdownString(content, editor_transformers);
    })

Using EditorRefPlugin as:

 <EditorRefPlugin editorRef={editorRef} />