在 Lexical.js 中镜像两个编辑器实例

Question

有人有一个例子可以将编辑器实例中的更新反映到另一个实例吗？

Lexical.js 的文档非常糟糕。

Answer 1

我使用自定义插件完成了这项工作，我讨厌我必须这样做：

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


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

插件：

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;
}

但是编辑器在每次击键后都会失去焦点。如果你解决了这个问题，请告诉我。

希望这是一种非常糟糕的做法，这会激励有人给出更好的答案！