Use relative path to find a node's text nodes (#2799)

When `block.texts()` is passed a path, it treats that path as relative
to itself. `findSelection` passes it the selection path, which is
relative to the document.

In order to find the correct text nodes, we must convert the selection
path to a path relative to the block we found. Then, when a new path
is returned, we need to convert that new block-relative path back to a
document-relative path.

packages/slate-react/src/plugins/react/queries.js

@@ -483,11 +483,14 @@ function QueriesPlugin() {
       anchor.offset === anchorText.text.length
     ) {
       const block = document.getClosestBlock(anchor.path)
-      const [next] = block.texts({ path: anchor.path })
+      const depth = document.getDepth(block.key)
+      const relativePath = PathUtils.drop(anchor.path, depth)
+      const [next] = block.texts({ path: relativePath })
 
       if (next) {
         const [, nextPath] = next
-        range = range.moveAnchorTo(nextPath, 0)
+        const absolutePath = anchor.path.slice(0, depth).concat(nextPath)
+        range = range.moveAnchorTo(absolutePath, 0)
       }
     }
 
@@ -497,11 +500,14 @@ function QueriesPlugin() {
       focus.offset === focusText.text.length
     ) {
       const block = document.getClosestBlock(focus.path)
-      const [next] = block.texts({ path: focus.path })
+      const depth = document.getDepth(block.key)
+      const relativePath = PathUtils.drop(focus.path, depth)
+      const [next] = block.texts({ path: relativePath })
 
       if (next) {
         const [, nextPath] = next
-        range = range.moveFocusTo(nextPath, 0)
+        const absolutePath = focus.path.slice(0, depth).concat(nextPath)
+        range = range.moveFocusTo(absolutePath, 0)
       }
     }
 

packages/slate-react/src/utils/get-selection-from-dom.js

@@ -1,4 +1,5 @@
 import warning from 'tiny-warning'
+import { PathUtils } from 'slate'
 
 import findRange from './find-range'
 
@@ -59,11 +60,14 @@ export default function getSelectionFromDOM(window, editor, domSelection) {
     anchor.offset === anchorText.text.length
   ) {
     const block = document.getClosestBlock(anchor.path)
-    const [next] = block.texts({ path: anchor.path })
+    const depth = document.getDepth(block.key)
+    const relativePath = PathUtils.drop(anchor.path, depth)
+    const [next] = block.texts({ path: relativePath })
 
     if (next) {
       const [, nextPath] = next
-      range = range.moveAnchorTo(nextPath, 0)
+      const absolutePath = anchor.path.slice(0, depth).concat(nextPath)
+      range = range.moveAnchorTo(absolutePath, 0)
     }
   }
 
@@ -73,11 +77,14 @@ export default function getSelectionFromDOM(window, editor, domSelection) {
     focus.offset === focusText.text.length
   ) {
     const block = document.getClosestBlock(focus.path)
-    const [next] = block.texts({ path: focus.path })
+    const depth = document.getDepth(block.key)
+    const relativePath = PathUtils.drop(focus.path, depth)
+    const [next] = block.texts({ path: relativePath })
 
     if (next) {
       const [, nextPath] = next
-      range = range.moveFocusTo(nextPath, 0)
+      const absolutePath = focus.path.slice(0, depth).concat(nextPath)
+      range = range.moveFocusTo(absolutePath, 0)
     }
   }