在选定区域插入新节点时，Slate.js抛出错误

Question

相关代码块：

        <Slate editor={editor} value={value} onChange={value => {
            setValue(value);

            const { selection } = editor;
            // if nothing is currently selected under the cursor
            if (selection && Range.isCollapsed(selection)) {
                const [start] = Range.edges(selection);
                // if the two characters beforce the cursor are {{, select them and replace with a template block
                const before = Editor.before(editor, start, {distance: 2})
                const beforeRange = before && Editor.range(editor, before, start)
                const beforeText = beforeRange && Editor.string(editor, beforeRange)
                const beforeMatch = beforeText && beforeText.match(/\{\{/);
                if (beforeMatch) {
                    Transforms.select(editor, beforeRange as Location);
                    insertTemplateBlock(editor, {name: "test"})
                }
            }
        }}>
...
</Slate>

export const insertTemplateBlock = (editor: Editor, {name, opts, defaultValue}: TemplateBlockProps) => {
    const templateBlock = { type: "template-block", name, opts, defaultValue, children: [{text: ''}] }
    Transforms.insertNodes(editor, templateBlock);
    Transforms.move(editor);
}

具体地说，它总是在insertTemplateBlock函数的第2行处中断，并沿着以下各行给出错误：

Cannot find a descendant at path [0,2] in node: {"children":[{"type":"paragraph","children":[{"text":"Thing is working {{"}]}],"operations":[{"type":"insert_text","path":[0,0],"offset":18,"text":"{"},{"type":"set_selection","properties":{"anchor":{"path":[0,0],"offset":19}},"newProperties":{"anchor":{"path":[0,0],"offset":17}}},{"type":"remove_text","path":[0,0],"offset":17,"text":"{{"},{"type":"insert_node","path":[0,1],"node":{"type":"template-block","name":"test","children":[{"text":""}]}},{"type":"set_selection","properties":{"anchor":{"path":[0,0],"offset":17},"focus":{"path":[0,0],"offset":17}},"newProperties":{"anchor":{"path":[0,1,0],"offset":0},"focus":{"path":[0,1,0],"offset":0}}},{"type":"insert_node","path":[0,2],"node":{"text":""}},{"type":"set_selection","properties":{"anchor":{"path":[0,1,0],"offset":0},"focus":{"path":[0,1,0],"offset":0}},"newProperties":{"anchor":{"path":[0,2],"offset":0},"focus":{"path":[0,2],"offset":0}}}],"selection":{"anchor":{"path":[0,2],"offset":0},"focus":{"path":[0,2],"offset":0}},"marks":null,"history":{"undos":[[{"type":"set_selection","properties":null,"newProperties":{"anchor":{"path":[0,0],"offset":0},"focus":{"path":[0,0],"offset":0}}}],[{"type":"insert_text","path":[0,0],"offset":0,"text":"T"},{"type":"insert_text","path":[0,0],"offset":1,"text":"h"},{"type":"insert_text","path":[0,0],"offset":2,"text":"i"},{"type":"insert_text","path":[0,0],"offset":3,"text":"n"},{"type":"insert_text","path":[0,0],"offset":4,"text":"g"},{"type":"insert_text","path":[0,0],"offset":5,"text":" "},{"type":"insert_text","path":[0,0],"offset":6,"text":"i"},{"type":"insert_text","path":[0,0],"offset":7,"text":"s"},{"type":"insert_text","path":[0,0],"offset":8,"text":" "},{"type":"insert_text","path":[0,0],"offset":9,"text":"w"},{"type":"insert_text","path":[0,0],"offset":10,"text":"o"},{"type":"insert_text","path":[0,0],"offset":11,"text":"r"},{"type":"insert_text","path":[0,0],"offset":12,"text":"k"},{"type":"insert_text","path":[0,0],"offset":13,"text":"i"},{"type":"insert_text","path":[0,0],"offset":14,"text":"n"},{"type":"insert_text","path":[0,0],"offset":15,"text":"g"},{"type":"insert_text","path":[0,0],"offset":16,"text":" "},{"type":"set_selection","properties":null,"newProperties":{"anchor":{"path":[0,0],"offset":17},"focus":{"path":[0,0],"offset":17}}}],[{"type":"insert_text","path":[0,0],"offset":17,"text":"{"},{"type":"insert_text","path":[0,0],"offset":18,"text":"{"},{"type":"set_selection","properties":{"anchor":{"path":[0,0],"offset":19}},"newProperties":{"anchor":{"path":[0,0],"offset":17}}},{"type":"remove_text","path":[0,0],"offset":17,"text":"{{"},{"type":"insert_node","path":[0,1],"node":{"type":"template-block","name":"test","children":[{"text":""}]}},{"type":"set_selection","properties":{"anchor":{"path":[0,0],"offset":17},"focus":{"path":[0,0],"offset":17}},"newProperties":{"anchor":{"path":[0,1,0],"offset":0},"focus":{"path":[0,1,0],"offset":0}}},{"type":"insert_node","path":[0,2],"node":{"text":""}},{"type":"set_selection","properties":{"anchor":{"path":[0,1,0],"offset":0},"focus":{"path":[0,1,0],"offset":0}},"newProperties":{"anchor":{"path":[0,2],"offset":0},"focus":{"path":[0,2],"offset":0}}}]],"redos":[]}}

这在他们使用类似逻辑的提及示例中不会发生。任何帮助都将不胜感激！

Codesandbox：https://codesandbox.io/s/elastic-turing-dv9bm?file=/src/App.tsx

更新:我后来发现这个问题可以通过将插入逻辑(当前在if语句中)根据包含选择的useEffect值移动到target挂钩来避免，类似于Slate的提及示例的工作方式。然而，我仍然很想知道为什么Slate在我以问题语句的方式编写它时会以这种方式中断。

Answer 1

该问题与使用useMemo时的渲染有关，而应使用useRef

const editorRef = useRef()
if (!editorRef.current) editorRef.current = withReact(createEditor())
const editor = editorRef.current

https://github.com/ianstormtaylor/slate/issues/4081

Answer 2

我认为您的问题源于这样一个事实，即<Slate>是上下文提供者，而您实际上应该使用嵌套的<Editable>组件来处理事件-在您的例子中是onKeyDown。在您提到的特定示例中，我相信您遇到了嵌套Editable组件不会出现的竞争条件。请参见文档中“演练”下的“安装Slate”。

https://docs.slatejs.org/walkthroughs/01-installing-slate