无法将 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：

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

我的父组件：

export default function EmailClient() {
  const editorRef = useRef<LexicalEditor>();

  const handleSendEmail = () => {
    const editor = editorRef.current;
    const editorState = editor.getEditorState();
    const jsonString = JSON.stringify(editorState);
    console.log('jsonString', jsonString);
    const htmlString = $generateHtmlFromNodes(editor, null);
    console.log(htmlString);
  };
  return (
        <Editor editorRef={editorRef} />
          <Button
            text="send"
            function={handleSendEmail}
          />
  );
}

Answer 1

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

有必要将

$generateHtmlFromNodes

函数包装在

editor.update

函数中，如下所示：

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

Answer 2

<OnChangePlugin onChange={(editorState, editor) => {
  editorState.read(() => {
     const html = $generateHtmlFromNodes(editor);
     console.log(html);
   });
}} />

这将控制台 html