Mirroring two editor instances in Lexical.js

Question

Does anyone have an example to reflect the updates in an editor instance to another instance?

The docs for Lexical.js are very poor.

Answer 1

I got this working using a custom plugin, which I hate that I had to do:

      <Main>
        <LexicalComposer initialConfig={initialConfig}>
          <UpdateEditorPlugin
            jsonString={stateString}
          />
        </LexicalComposer>


        <LexicalComposer initialConfig={initialConfig}>
          <UpdateEditorPlugin
            jsonString={stateString}
          />
        </LexicalComposer>
      </Main>

Plugin:

export default function UpdateEditorPlugin({
  //@ts-ignore
  jsonString
}): JSX.Element | null {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    editor.update(() => {
      const newState = editor.parseEditorState(jsonString);
      queueMicrotask(() => {
        editor.setEditorState(newState);
      });
    });

  }, [jsonString]);

  return null;
}

But the editor loses focus after each keystroke. If you work that one out, let me know. Plenty of people having issues with the editor stealing focus when updated, on the Lexical discord: https://lexical.dev/community

Hopefully this is a really bad way of doing it, which will spur someone on to give a better answer!