Fix "Cannot resolve from DOM point" error on onDomSelectionChange for…

… readonly void elements (#4727) * fix error caused by selecting void nodes in readonly editor * add changeset
ianstormtaylor · Dec 10, 2021 · 0334851 · 0334851
1 parent 1217021
commit 0334851
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/.changeset/cyan-games-share.md b/.changeset/cyan-games-share.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fix "Cannot resolve from DOM point" error on onDomSelectionChange for readonly void elements
diff --git a/packages/slate-react/src/components/android/android-editable.tsx b/packages/slate-react/src/components/android/android-editable.tsx
@@ -31,7 +31,7 @@ import {
   hasEditableTarget,
   isEventHandled,
   isDOMEventHandled,
-  isTargetInsideVoid,
+  isTargetInsideNonReadonlyVoid,
 } from '../editable'
 
 import { useAndroidInputManager } from './use-android-input-manager'
@@ -249,11 +249,11 @@ export const AndroidEditable = (props: EditableProps): JSX.Element => {
 
           const anchorNodeSelectable =
             hasEditableTarget(editor, anchorNode) ||
-            isTargetInsideVoid(editor, anchorNode)
+            isTargetInsideNonReadonlyVoid(editor, anchorNode)
 
           const focusNodeSelectable =
             hasEditableTarget(editor, focusNode) ||
-            isTargetInsideVoid(editor, focusNode)
+            isTargetInsideNonReadonlyVoid(editor, focusNode)
 
           if (anchorNodeSelectable && focusNodeSelectable) {
             const range = ReactEditor.toSlateRange(editor, domSelection, {

diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
@@ -289,11 +289,11 @@ export const Editable = (props: EditableProps) => {
 
         const anchorNodeSelectable =
           hasEditableTarget(editor, anchorNode) ||
-          isTargetInsideVoid(editor, anchorNode)
+          isTargetInsideNonReadonlyVoid(editor, anchorNode)
 
         const focusNodeSelectable =
           hasEditableTarget(editor, focusNode) ||
-          isTargetInsideVoid(editor, focusNode)
+          isTargetInsideNonReadonlyVoid(editor, focusNode)
 
         if (anchorNodeSelectable && focusNodeSelectable) {
           const range = ReactEditor.toSlateRange(editor, domSelection, {
@@ -1408,13 +1408,15 @@ export const hasEditableTarget = (
 }
 
 /**
- * Check if the target is inside void and in the editor.
+ * Check if the target is inside void and in an non-readonly editor.
  */
 
-export const isTargetInsideVoid = (
+export const isTargetInsideNonReadonlyVoid = (
   editor: ReactEditor,
   target: EventTarget | null
 ): boolean => {
+  if (IS_READ_ONLY.get(editor)) return false
+
   const slateNode =
     hasTarget(editor, target) && ReactEditor.toSlateNode(editor, target)
   return Editor.isVoid(editor, slateNode)