Fix triple-click contenteditable="false" error (#5343)

ianstormtaylor · Mar 7, 2023 · f7f02a8 · f7f02a8
1 parent bc07cf8
commit f7f02a8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/.changeset/lucky-falcons-reflect.md b/.changeset/lucky-falcons-reflect.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fix error when triple-clicking a word preceding a `contenteditable="false"` DOM node in Chrome
diff --git a/packages/slate-react/src/plugin/react-editor.ts b/packages/slate-react/src/plugin/react-editor.ts
@@ -754,6 +754,17 @@ export const ReactEditor = {
       )
     }
 
+    // COMPAT: Triple-clicking a word in chrome will sometimes place the focus
+    // inside a `contenteditable="false"` DOM node following the word, which
+    // will cause `toSlatePoint` to throw an error. (2023/03/07)
+    if (
+      'getAttribute' in focusNode &&
+      (focusNode as HTMLElement).getAttribute('contenteditable') === 'false'
+    ) {
+      focusNode = anchorNode
+      focusOffset = anchorNode.textContent?.length || 0
+    }
+
     let anchor = ReactEditor.toSlatePoint(editor, [anchorNode, anchorOffset], {
       exactMatch,
       suppressThrow,