From 0334851cb1da3fd194278e48985166eb658eaf24 Mon Sep 17 00:00:00 2001
From: Alex <32290337+ahoisl@users.noreply.github.com>
Date: Fri, 10 Dec 2021 13:52:03 +0100
Subject: [PATCH] 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
---
 .changeset/cyan-games-share.md                         |  5 +++++
 .../src/components/android/android-editable.tsx        |  6 +++---
 packages/slate-react/src/components/editable.tsx       | 10 ++++++----
 3 files changed, 14 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/cyan-games-share.md

diff --git a/.changeset/cyan-games-share.md b/.changeset/cyan-games-share.md
new file mode 100644
index 000000000..d903dc419
--- /dev/null
+++ 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
index 0e66f0a8d..a6a59a1fc 100644
--- 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
index c1092ca4b..7cb059b9b 100644
--- 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)