英文:
How to check if the editor is empty?
问题
我有两个编辑器实例。
一个是可编辑的。
第二个是只读的，用于预览用户输入的内容。
我在这两个编辑器之间复制编辑器状态 - 没有问题。
但是当第一个编辑器为空时，我想隐藏第二个编辑器。我尝试了类似这样的方法，但它总是返回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 />
)
}
英文:
I have two editor instances.
One is editable
Second one is read only for preview what user is typed
I'm copied editor state beetwen those editors - wtih no problems
But i want to hide second editor when first one is empty. I'm trying something like this but it always return 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 />
)
}
答案1
得分: 4
抱歉，你的要求是只返回翻译好的部分，不要有别的内容。以下是你提供的文本的翻译：
"empty" 这个词，遗憾的是，目前有几种不同的方法来实现，具体取决于你所指的 "empty" 是什么意思。你可以使用 EditorState.isEmpty，但这是用于检查 _nodeMap 是否仅包含单个节点（根节点），并且选择为 null - 因此，这实际上是关于编辑器状态是否与刚初始化时相同的空状态。然而，这可能不是你想要的 - 通常，一个在视觉上为空的编辑器会有一个具有单个 ParagraphNode 子节点的 RootNode，而你可能会或不会在意选择是否为 null。因此，你可以考虑使用 ElementNode.isEmpty：
$getRoot().isEmpty()
这将检查 RootNode 是否有 0 个子节点。再次强调，在典型的编辑器中，这可能在许多情况下返回 false，而你期望它返回 true（例如，如果编辑器是以根节点下的空白段落节点初始化的）。所以，你可以这样做：
const isEditorEmpty = editorState.read(() => {
const root = $getRoot();
const isEmpty = root.getFirstChild().isEmpty() && root.getChildrenSize() === 1
return isEmpty;
});
然而，这不会考虑空格字符 - 你可能也关心这一点。如果你希望将仅包含空格字符的编辑器视为空，那么你可以使用 @lexical/text 中的 $isRootTextContentEmpty。你还可以查看此函数的实现，了解如何根据你的用例进行调整。
英文:
There are, unfortunately, currently several different ways to do this, depending on exactly what you mean by "empty". You can us EditorState.isEmpty, but this is checking to see if the _nodeMap contains only a single node (the root) and the selection is null - so it's really about emptiness in the sense that the EditorState is in the same state it would be in had it just been initialized. However, this is might not be what you want - usually a visually empty editor will have a RootNode with a single ParagraphNode child, and you may or may not care if the Selection is null. So, you could look at using ElementNode.isEmpty:
$getRoot().isEmpty()
This checks if the RootNode has 0 children. Once again, in a typical editor, that might return false in a lot of cases where you would expect it to return true (like if the editor is initialized with an empty ParagraphNode under the RootNode). So, you could do:
const isEditorEmpty = editorState.read(() => {
const root = $getRoot();
const isEmpty = root.getFirstChild().isEmpty() && root.getChildrenSize() === 1
return isEmpty;
});
However, this wouldn't account for whitespace - which you might also care about. If you want to consider an editor with only whitespace as empty, then you might want to use $isRootTextContentEmpty from @lexical/text. You can also look at the implementation of this function to see how you might go about tweaking it for your use case.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论