From 09f4662d31217d5d2f156303316a593f815d44e8 Mon Sep 17 00:00:00 2001
From: Justin Weiss <justin@justinweiss.com>
Date: Mon, 20 May 2019 13:17:28 -0700
Subject: [PATCH] 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 | 14 ++++++++++----
 .../src/utils/get-selection-from-dom.js           | 15 +++++++++++----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/slate-react/src/plugins/react/queries.js b/packages/slate-react/src/plugins/react/queries.js
index 789edfb36..73481985c 100644
--- a/packages/slate-react/src/plugins/react/queries.js
+++ b/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)
       }
     }
 
diff --git a/packages/slate-react/src/utils/get-selection-from-dom.js b/packages/slate-react/src/utils/get-selection-from-dom.js
index f26e010b5..0f7a68cd2 100644
--- a/packages/slate-react/src/utils/get-selection-from-dom.js
+++ b/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)
     }
   }