React17+Slate0.61插入自定义节点后自动选中报错求助

环境信息 #

使用版本：

• react 17.0.2
• slate 0.61.1
• slate-react 0.61.1

问题描述 #

我写了一个往Slate编辑器插入自定义节点的函数，希望插入完成后节点能自动被选中，方便用户操作。但在文本区域中间插入节点时，会触发错误导致编辑器崩溃。

报错信息：

chunk-JVVF6RCV.js?v=f78099ee:2261 Uncaught Error: Cannot find a descendant at path [1,3,0] in node: {"children":[{"kind":"section","children":[{"text":""}],"sectionType":"header"},{"kind":"section","children":[{"text":"Hello "},{"id":"587e4dce-376f-4e5f-a4c8-a6988e274074","kind":"dataset","children":[{"text":""}]},{"text":"hhh"}],"sectionType":"body"},{"kind":"image","children":[{"text":""}]}],"operations":[{"type":"split_node","path":[1,2],"position":2,"properties":{}},{"type":"insert_node","path":[1,3],"node":{"kind":"dataset","id":"fc73c343-027a-432e-b5ff-314992cecc6f","children":[{"text":""}]}},{"type":"set_selection","properties":{"anchor":{"path":[1,4],"offset":0},"focus":{"path":[1,4],"offset":0}},"newProperties":{"anchor":{"path":[1,3,0],"offset":0},"focus":{"path":[1,3,0],"offset":0}}}],"selection":{"anchor":{"path":[1,3,0],"offset":0},"focus":{"path":[1,3,0],"offset":0}},"marks":null,"history":{"undos":[[{"type":"set_selection","properties":null,"newProperties":{"anchor":{"path":[1,0],"offset":2},"focus":{"path":[1,0],"offset":2}}}],[[{"type":"split_node","path":[1,0],"position":2,"properties":{}},{"type":"insert_node","path":[1,1],"node":{"kind":"dataset","id":"23efa522-69eb-472c-8957-95a254e91797","children":[{"text":""}]}},{"type":"set_selection","properties":{"anchor":{"path":[1,1,0],"offset":0},"focus":{"path":[1,1,0],"offset":0}},"newProperties":{"anchor":{"path":[1,2],"offset":2},"focus":{"path":[1,2],"offset":2}}}],[[{"type":"split_node","path":[1,2],"position":2,"properties":{}},{"type":"insert_node","path":[1,3],"node":{"kind":"dataset","id":"fc73c343-027a-432e-b5ff-314992cecc6f","children":[{"text":""}]}},{"type":"set_selection","properties":{"anchor":{"path":[1,4],"offset":0},"focus":{"path":[1,4],"offset":0}},"newProperties":{"anchor":{"path":[1,3,0],"offset":0},"focus":{"path":[1,3,0],"offset":0}}}]],"redos":[]}}
    at Object.get (chunk-JVVF6RCV.js?v=f78099ee:2261:15)
    at Object.node (chunk-JVVF6RCV.js?v=f78099ee:1475:21)
    at Object.toDOMPoint (slate-react.js?v=f78099ee:2007:25)
    at Object.toDOMRange (slate-react.js?v=f78099ee:2058:33)
    at slate-react.js?v=f78099ee:1296:48
    at commitHookEffectListMount (chunk-6ANLLTIP.js?v=f78099ee:22160:34)
    at commitLifeCycles (chunk-6ANLLTIP.js?v=f78099ee:22203:17)
    at commitLayoutEffects (chunk-6ANLLTIP.js?v=f78099ee:24013:15)
    at HTMLUnknownElement.callCallback2 (chunk-6ANLLTIP.js?v=f78099ee:10624:22)
    at Object.invokeGuardedCallbackDev (chunk-6ANLLTIP.js?v=f78099ee:10649:24)

原始插入代码 #

Transforms.insertNodes(editor, newElement, {
          at: currentSelection?.focus,
          select: true.   // 不设置这个参数的话，节点能正常插入
      });

尝试过的解决方案及问题 #

1. 使用ReactEditor.findPath查找节点路径，再调用Transforms.select选中，但ReactEditor无法找到路径，节点也无法插入：
   代码：

const path = ReactEditor.findPath(editor, newElement)
 const newLocation = {anchor: {path: path as Path, offset: 0}, focus: {path: path as Path, offset: 0}}
 Transforms.select(editor, newLocation);

报错信息：

Error: Unable to find the path for Slate node: {"kind":"dataset","id":"26428314-fbe3-48fa-8503-6f8537ae367a","children":[{"text":""}]}
    at Object.findPath (slate-react.js?v=f78099ee:1905:11)
    at PnEditor.tsx:165:42
    at HTMLUnknownElement.callCallback2 (chunk-6ANLLTIP.js?v=f78099ee:10624:22)
    at Object.invokeGuardedCallbackDev (chunk-6ANLLTIP.js?v=f78099ee:10649:24)
    at invokeGuardedCallback (chunk-6ANLLTIP.js?v=f78099ee:10683:39)
    at invokeGuardedCallbackAndCatchFirstError (chunk-6ANLLTIP.js?v=f78099ee:10686:33)
    at executeDispatch (chunk-6ANLLTIP.js?v=f78099ee:13468:11)
    at processDispatchQueueItemsInOrder (chunk-6ANLLTIP.js?v=f78099ee:13488:15)
    at processDispatchQueue (chunk-6ANLLTIP.js?v=f78099ee:13497:13)
    at dispatchEventsForPlugins (chunk-6ANLLTIP.js?v=f78099ee:13505:11)

2. 手动遍历所有节点找到路径，但使用该路径选中时仍触发相同的报错。

内容的提问来源于stack exchange，提问作者Chloe Meinshausen