如何将自定义节点插入 Slate 编辑器文本区域，然后自动选择该节点。 (select:true参数不起作用)

Question

使用 反应17.0.2 石板0.61.1 板岩反应 0.61.1

我有一个功能可以将自定义节点插入到板岩编辑器中。插入节点后，我希望自动选择它，以便用户可以使用它。

问题：如果我尝试在文本区域中间插入，则会收到导致编辑器崩溃的错误。

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.   //if I don't try to select it inserts fine
      });

我尝试使用ReactEditor.findPath来查找路径，然后使用transform.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)

然后我创建了一个手动方法来搜索所有节点并找到该节点。 这很有效，并为我提供了一条可以使用的路径。但当实际尝试选择该节点时，我仍然遇到完全相同的错误。

Answer 1

So the answer for now is to wrap the function in a timeOut function. 

这允许插入节点，然后根据需要选择节点。

setTimeout(()=> { const path = ReactEditor.findPath(editor, newElement) const newLocation = {锚点：{路径：路径作为路径，偏移量：0}，焦点：{路径：路径作为路径，偏移量：0}} Transforms.select(编辑器, newLocation); }, 200)