无法将 Lexical 解析为 HTML

Question

我有一个词法编辑器，需要将其序列化为 html，以便我可以将其嵌入到电子邮件模板中。

我在使用该函数时不断遇到以下错误$generateHtmlFromNodes：

Error: Unable to find an active editor state.
State helpers or node methods can only be
used synchronously during the callback of editor.update() or editorState.read().

我的编辑器组件采用一个 prop，即 LexicalEditor 类型的 editorRef，这确保我可以从父级访问编辑器，我希望在父级中处理电子邮件的序列化和发送。

编辑器.tsx：

Error: Unable to find an active editor state.
State helpers or node methods can only be
used synchronously during the callback of editor.update() or editorState.read().

我的父组件：

interface EditorProps {
  editorRef: React.MutableRefObject<LexicalEditor>;
}

export const Editor = (props: EditorProps) => {
  const initialConfig = {
    namespace: 'MyEditor',
    editable: true,
    nodes: [ImageNode],
    theme: <myTheme>,
    onError(error) {
      throw error;
    },
  };

  return (
    <div className="relative rounded-sm border border-gray-200 bg-white shadow-sm">
      <LexicalComposer initialConfig={initialConfig}>
        <Toolbar />
        <ImagesPlugin />

        <RichTextPlugin
          contentEditable={
            <ContentEditable
              autoCorrect
              className="min-h-[450px] resize-none overflow-hidden text-ellipsis py-[15px] px-2.5 outline-none"
            />
          }
          placeholder={null}
        />
        <OnChangePlugin
          onChange={(editorState, editor) => (props.editorRef.current = editor)}
        />
        <HistoryPlugin />
      </LexicalComposer>
    </div>
  );
};

Answer 1

在对Github 问题进行一些挖掘之后，我发现了一个与词法文档中的示例相反的解决方案。

需要将$generateHtmlFromNodes函数包装在一个editor.update函数中，如下所示：

editor.update(() => {
   const htmlString = $generateHtmlFromNodes(editor, null);
});