为编辑器设置初始 state

Question

我正在使用词法并想为编辑器设置初始文本。

现在，我只是想硬编码初始文本。 原来我不能只传递一个字符串。

它需要采用 JSON 格式。

因此，我改为传递以下内容。

'{"text":"sample text"}'

但它抛出以下错误：

类型错误：无法读取未定义的属性（读取“类型”）

我究竟做错了什么？

function Placeholder() {
  return <div className="editor-placeholder">Enter some rich text...</div>;
}

const editorConfig = {

  // This is how I am trying to set initial value.
  // no errors if I remove this. I need this cos I need to set initial value.
  editorState: '{"text":"sample text"}',

  // other params
};

export default function Editor() {

  return (
    <LexicalComposer initialConfig={editorConfig}>
      <div className="editor-container">
        <ToolbarPlugin />
        <div className="editor-inner">
          <RichTextPlugin
            contentEditable={<ContentEditable className="editor-input" />}
            placeholder={<Placeholder />}
          />
          {/* other login components */}
        </div>
      </div>
    </LexicalComposer>
  );
}

Answer 1

我有同样的问题。 显然 editorState 可以设置为 function：

const editorConfig = {
  editorState: () => {
    const root = $getRoot();
    root.clear();
    const p = $createParagraphNode();
    p.append($createTextNode("preloaded node"));
    root.append(p);
  }
};

我在 Lexical Playground 来源中找到了这个解决方案： https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/App.tsx

这是一个简化的示例： https://codesandbox.io/s/lexical-plain-playground-72pwge?file=/src/Editor.js:683-960

Answer 2

我在使用字符串化的词法节点树时也遇到了这个问题。 对于上下文，我的字符串化内容来自 Lexical Playground 及其“导出”功能......

它将需要的内容包装到{editorState:{...}}中。 似乎这不是初始化LexicalComposer的标准方式，所以在删除这个包装器直接获取{root:{...}}之后它起作用了:)