feat: implement findPath without relying on DOM

Author: yf-yang

packages/slate-dom/src/plugin/dom-editor.ts

@@ -387,6 +387,7 @@ export const DOMEditor: DOMEditorInterface = {
   },
 
   findPath: (editor, node) => {
+    const newVersionPath = editor.findPath(node)
     const path: Path = []
     let child = node
 
@@ -395,6 +396,13 @@ export const DOMEditor: DOMEditorInterface = {
 
       if (parent == null) {
         if (Editor.isEditor(child)) {
+          if (!Path.equals(newVersionPath, path)) {
+            throw new Error(
+              `path mismatch, expected ${JSON.stringify(
+                path
+              )}, got ${JSON.stringify(newVersionPath)}`
+            )
+          }
           return path
         } else {
           break

packages/slate/src/core/normalize-node.ts

@@ -4,6 +4,7 @@ import { Element } from '../interfaces/element'
 import { Transforms } from '../interfaces/transforms'
 import { Descendant, Node } from '../interfaces/node'
 import { Editor } from '../interfaces/editor'
+import { getNodeToParent } from '../editor/find-path'
 
 export const normalizeNode: WithEditorFirstArg<Editor['normalizeNode']> = (
   editor,
@@ -26,6 +27,14 @@ export const normalizeNode: WithEditorFirstArg<Editor['normalizeNode']> = (
     return
   }
 
+  // Cache dirty nodes child-parent relationships for editor.findPath()
+  if (!Text.isText(node)) {
+    const nodeToParent = getNodeToParent(editor)
+    node.children.forEach(child => {
+      nodeToParent.set(child, node)
+    })
+  }
+
   // Determine whether the node should have block or inline children.
   const shouldHaveInlines = Editor.isEditor(node)
     ? false

packages/slate/src/create-editor.ts

@@ -23,6 +23,7 @@ import {
   edges,
   elementReadOnly,
   end,
+  findPath,
   first,
   fragment,
   getVoid,
@@ -94,6 +95,9 @@ export const createEditor = (): Editor => {
     operations: [],
     selection: null,
     marks: null,
+    _caches: {
+      nodeToParent: undefined,
+    },
     isElementReadOnly: () => false,
     isInline: () => false,
     isSelectable: () => true,
@@ -130,6 +134,7 @@ export const createEditor = (): Editor => {
     edges: (...args) => edges(editor, ...args),
     elementReadOnly: (...args) => elementReadOnly(editor, ...args),
     end: (...args) => end(editor, ...args),
+    findPath: (...args) => findPath(editor, ...args),
     first: (...args) => first(editor, ...args),
     fragment: (...args) => fragment(editor, ...args),
     getMarks: (...args) => marks(editor, ...args),

packages/slate/src/editor/find-path.ts

@@ -0,0 +1,58 @@
+import { Text } from '../interfaces/text'
+import { BaseEditor, EditorInterface } from '../interfaces/editor'
+import { Ancestor } from '../interfaces/node'
+import { Scrubber } from '../interfaces/scrubber'
+
+export const findPath: EditorInterface['findPath'] = (editor, node) => {
+  if (node === editor) {
+    return []
+  }
+
+  const nodeToParent = getNodeToParent(editor)
+
+  const parent = nodeToParent.get(node)
+  if (!parent) {
+    throw new Error(
+      `Unable to find the path for Slate node (parent not found): ${Scrubber.stringify(
+        node
+      )}`
+    )
+  }
+
+  const parentPath = findPath(editor, parent)
+
+  const index = parent.children.indexOf(node)
+  if (index < 0) {
+    throw new Error(
+      `Unable to find the path for Slate node (node is not child of its parent): ${Scrubber.stringify(
+        node
+      )}`
+    )
+  }
+
+  return [...parentPath, index]
+}
+
+export function getNodeToParent(editor: BaseEditor) {
+  let nodeToParent = editor._caches.nodeToParent
+  if (nodeToParent) {
+    return nodeToParent
+  }
+
+  nodeToParent = new WeakMap()
+  editor._caches.nodeToParent = nodeToParent
+  const parents: Ancestor[] = [editor]
+
+  let parent = parents.pop()
+  while (parent) {
+    for (const child of parent.children) {
+      nodeToParent.set(child, parent)
+      if (!Text.isText(child)) {
+        parents.push(child)
+      }
+    }
+    parent = parents.pop()
+  }
+
+  return nodeToParent
+}

packages/slate/src/editor/index.ts

@@ -8,6 +8,7 @@ export * from './delete-fragment'
 export * from './edges'
 export * from './element-read-only'
 export * from './end'
+export * from './find-path'
 export * from './first'
 export * from './fragment'
 export * from './get-void'

packages/slate/src/interfaces/editor.ts

@@ -46,6 +46,11 @@ export interface BaseEditor {
   operations: Operation[]
   marks: EditorMarks | null
 
+  /**
+   * @internal Caches for internal use.
+   */
+  _caches: EditorCaches
+
   // Overrideable core methods.
 
   apply: (operation: Operation) => void
@@ -122,6 +127,7 @@ export interface BaseEditor {
   edges: OmitFirstArg<typeof Editor.edges>
   elementReadOnly: OmitFirstArg<typeof Editor.elementReadOnly>
   end: OmitFirstArg<typeof Editor.end>
+  findPath: OmitFirstArg<typeof Editor.findPath>
   first: OmitFirstArg<typeof Editor.first>
   fragment: OmitFirstArg<typeof Editor.fragment>
   getMarks: OmitFirstArg<typeof Editor.marks>
@@ -180,6 +186,13 @@ export type Selection = ExtendedType<'Selection', BaseSelection>
 
 export type EditorMarks = Omit<Text, 'text'>
 
+export interface EditorCaches {
+  /**
+   * Editor children snapshot after the last flush.
+   */
+  nodeToParent: WeakMap<Descendant, Ancestor> | undefined
+}
+
 export interface EditorAboveOptions<T extends Ancestor> {
   at?: Location
   match?: NodeMatch<T>
@@ -389,6 +402,11 @@ export interface EditorInterface {
    */
   first: (editor: Editor, at: Location) => NodeEntry
 
+  /**
+   * Find the path of Slate node.
+   */
+  findPath: (editor: Editor, node: Node) => Path
+
   /**
    * Get the fragment at a location.
    */
@@ -767,6 +785,10 @@ export const Editor: EditorInterface = {
     return editor.end(at)
   },
 
+  findPath(editor, node) {
+    return editor.findPath(node)
+  },
+
   first(editor, at) {
     return editor.first(at)
   },