Fix selections with non-void non-editable focus

.changeset/brown-ears-tap.md

@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fix selections with non-void non-editable focus

packages/slate-react/src/components/editable.tsx

@@ -255,9 +255,7 @@ export const Editable = forwardRef(
               ReactEditor.hasEditableTarget(editor, anchorNode) ||
               ReactEditor.isTargetInsideNonReadonlyVoid(editor, anchorNode)
 
-            const focusNodeSelectable =
-              ReactEditor.hasEditableTarget(editor, focusNode) ||
-              ReactEditor.isTargetInsideNonReadonlyVoid(editor, focusNode)
+            const focusNodeSelectable = ReactEditor.hasTarget(editor, focusNode)
 
             if (anchorNodeSelectable && focusNodeSelectable) {
               const range = ReactEditor.toSlateRange(editor, domSelection, {

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

@@ -20,6 +20,8 @@ import {
   DOMText,
   getSelection,
   hasShadowRoot,
+  isAfter,
+  isBefore,
   isDOMElement,
   isDOMNode,
   isDOMSelection,
@@ -244,6 +246,11 @@ export interface ReactEditorInterface {
     options: {
       exactMatch: boolean
       suppressThrow: T
+      /**
+       * The direction to search for Slate leaf nodes if `domPoint` is
+       * non-editable and non-void.
+       */
+      searchDirection?: 'forward' | 'backward'
     }
   ) => T extends true ? Point | null : Point
 
@@ -681,9 +688,10 @@ export const ReactEditor: ReactEditorInterface = {
     options: {
       exactMatch: boolean
       suppressThrow: T
+      searchDirection?: 'forward' | 'backward'
     }
   ): T extends true ? Point | null : Point => {
-    const { exactMatch, suppressThrow } = options
+    const { exactMatch, suppressThrow, searchDirection } = options
     const [nearestNode, nearestOffset] = exactMatch
       ? domPoint
       : normalizeDOMPoint(domPoint)
@@ -702,6 +710,13 @@ export const ReactEditor: ReactEditorInterface = {
         potentialVoidNode && editorEl.contains(potentialVoidNode)
           ? potentialVoidNode
           : null
+      const potentialNonEditableNode = parentNode.closest(
+        '[contenteditable="false"]'
+      )
+      const nonEditableNode =
+        potentialNonEditableNode && editorEl.contains(potentialNonEditableNode)
+          ? potentialNonEditableNode
+          : null
       let leafNode = parentNode.closest('[data-slate-leaf]')
       let domNode: DOMElement | null = null
 
@@ -778,6 +793,35 @@ export const ReactEditor: ReactEditorInterface = {
             offset -= el.textContent!.length
           })
         }
+      } else if (nonEditableNode) {
+        // Find the edge of the nearest leaf in `searchDirection` from the
+        // non-editable node
+        const leafNodes = Array.from(
+          editorEl.querySelectorAll(
+            // This editor's leaves (not those of a nested editor)
+            '[data-slate-leaf]:not(:scope [data-slate-editor] [data-slate-leaf])'
+          )
+        )
+        leafNode =
+          (searchDirection === 'forward'
+            ? leafNodes.find(leaf => isAfter(nonEditableNode, leaf))
+            : leafNodes.findLast(leaf => isBefore(nonEditableNode, leaf))) ??
+          null
+
+        if (!leafNode) {
+          offset = 1
+        } else {
+          textNode = leafNode.closest('[data-slate-node="text"]')!
+          domNode = leafNode
+          if (searchDirection === 'forward') {
+            offset = 0
+          } else {
+            offset = domNode.textContent!.length
+            domNode.querySelectorAll('[data-slate-zero-width]').forEach(el => {
+              offset -= el.textContent!.length
+            })
+          }
+        }
       }
 
       if (
@@ -978,18 +1022,6 @@ export const ReactEditor: ReactEditorInterface = {
       focusOffset--
     }
 
-    // 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 as HTMLElement).getAttribute('data-slate-void') !== 'true'
-    ) {
-      focusNode = anchorNode
-      focusOffset = anchorNode.textContent?.length || 0
-    }
-
     const anchor = ReactEditor.toSlatePoint(
       editor,
       [anchorNode, anchorOffset],
@@ -1002,11 +1034,15 @@ export const ReactEditor: ReactEditorInterface = {
       return null as T extends true ? Range | null : Range
     }
 
+    const focusBeforeAnchor =
+      isBefore(anchorNode, focusNode) ||
+      (anchorNode === focusNode && focusOffset < anchorOffset)
     const focus = isCollapsed
       ? anchor
       : ReactEditor.toSlatePoint(editor, [focusNode, focusOffset], {
           exactMatch,
           suppressThrow,
+          searchDirection: focusBeforeAnchor ? 'forward' : 'backward',
         })
     if (!focus) {
       return null as T extends true ? Range | null : Range

packages/slate-react/src/utils/dom.ts

@@ -337,3 +337,21 @@ export const getActiveElement = () => {
 
   return activeElement
 }
+
+/**
+ * @returns `true` if `otherNode` is before `node` in the document; otherwise, `false`.
+ */
+export const isBefore = (node: DOMNode, otherNode: DOMNode): boolean =>
+  Boolean(
+    node.compareDocumentPosition(otherNode) &
+      DOMNode.DOCUMENT_POSITION_PRECEDING
+  )
+
+/**
+ * @returns `true` if `otherNode` is after `node` in the document; otherwise, `false`.
+ */
+export const isAfter = (node: DOMNode, otherNode: DOMNode): boolean =>
+  Boolean(
+    node.compareDocumentPosition(otherNode) &
+      DOMNode.DOCUMENT_POSITION_FOLLOWING
+  )