Insert nodes into editor from and external editor state

[mariusplanable]

Imagine I have a lexical editor and an externally saved editor state which I want to insert at a specific place in the editor (replace an existing node with it, or just at the current selection).

So what I tried to do is to extract the nodes from that external editor state and insert them before a specific node (let's sau node A):

function insertNodes(editor: LexicalEditor, savedEditorState: SerializedEditorState) {
    editor.update(() => {
        const nodesToReplace = editor.parseEditorState(savedEditorState).read(() => {
            const [maybeParagraph] = $getRoot().getChildren();

            if (!$isParagraphNode(maybeParagraph)) {
                return [];
            }

            return maybeParagraph.getChildren();
        });

        // this part is not important
        // let's say I somehow get the right node before which to insert the new nodes
        const nodeA = $getNodeByKey(key_of_node_a);

        let target: LexicalNode | null = null;

        nodesToReplace.forEach(node => {
            const copy = $copyNode(node);

            if (target === null) {
                nodeA.insertBefore(copy, true);
            } else {
                target.insertAfter(copy, true);
            }

            target = copy;
        });
    });
}

The problem is that I get errors like: Lexical node does not exist in active editor state. Avoid using the same node references between nested closures from editorState.read/editor.update and I get the reason why this is happening since I extract the nodesToReplace within a different scope than I insert them.

How can I achieve this? Cheers.

[acywatson]

I get the reason why this is happening since I extract the nodesToReplace within a different scope than I insert them.

AFAICT, from Lexical's standpoint, you're in the same update callback, so scope shouldn't be an issue.

I think the problem here is $copyNode. When you do this, you're basically cloning the nodes, but setting their key to null. Without a key, Lexical can't find the nodes in the EditorState, so it throws. Instead just don't copy these nodes - Lexical should assign them keys during parseEditorState.

[mariusplanable]

My bad, I actually use $copyNodeDeep version (taken from this PR). It is throwing when there are ElementNodes with children (on the .getLatest() method). Works with TextNodes. If using $copyNode it does not insert AutoLinks and nodes like that. Without any copy it always fails (even for TextNodes) on .getLatest().

Created a codesandbox with a minimal reproduction if you're willing to take a look.

I have created a simple plugin wich inserts nodes from 2 external serialized editor state into the editor. One just with a TextNode, another with a TextNode and AutoLinkNode.

[acywatson]

Try this:

https://codesandbox.io/s/lexical-inserting-nodes-forked-ryznvg?file=/src/plugins/InsertExternalNodesPlugin.js

$parseSerializedNode is better for when you don't want to deal with an entire editor state.

[mariusplanable]

Worked like a charm. Didn't know about this util function. Thank you very much! Appreciate it a lot. 😊

[acywatson]

No worries - I forgot about it too! I had to go back and look at where I implemented similar functionality internally to remember how I did it lol