lexical - 如何检查编辑器是否为空？

Question

我有两个编辑器实例。一个是可编辑的第二个只读，用于预览用户输入的内容我在这些编辑器之间复制了编辑器状态 - 没有任何问题但我想当第一个编辑器为空时隐藏第二个编辑器。我正在尝试类似的方法，但它总是返回 false

...
function onChange(editorState) {
  console.log(editorState.isEmpty())
}

function Editor() {
...

  return (
      <>
        <LexicalComposer initialConfig={editorConfig}>
            <ToolbarPlugin />
              <RichTextPlugin
                contentEditable={<ContentEditable className="editor-input" />}
                placeholder={<Placeholder />}
                ErrorBoundary={LexicalErrorBoundary}
              />
              <OnChangePlugin onChange={onChange} />
          <LexicalComposer />
   )
}

Answer 1

不幸的是，目前有几种不同的方法可以做到这一点，具体取决于您所说的“空”的含义。您可以使用 EditorState.isEmpty，但这是检查 _nodeMap 是否仅包含单个节点(根)并且选择是否为空 - 所以它实际上是关于空的，因为 EditorState 处于相同的状态如果它刚刚被初始化。然而，这可能不是您想要的 - 通常，视觉上空的编辑器将有一个带有单个 ParagraphNode 子级的 RootNode，并且您可能会或可能不关心 Selection 是否为空。因此，您可以考虑使用 ElementNode.isEmpty:

$getRoot().isEmpty()

这会检查 RootNode 是否有 0 个子节点。再说一遍，在典型的编辑器中，在很多情况下您希望它返回 true，这可能会返回 false(例如，如果编辑器在 RootNode 下使用空的 ParagraphNode 进行初始化)。所以，你可以这样做:

const isEditorEmpty = editorState.read(() => {
  const root = $getRoot();
  const isEmpty = root.getFirstChild().isEmpty() && root.getChildrenSize() === 1

  return isEmpty;
});

但是，这不会解释空格 - 您可能也关心这一点。如果您想将只有空格的编辑器视为空，那么您可能需要使用 @lexical/text 中的 $isRootTextContentEmpty。您还可以查看此函数的实现，了解如何根据您的用例对其进行调整。