Fix selection getting incorrectly set in readonly shadow dom case (#5259)

* Fix selection getting incorrectly set in readonly shadow dom case

* Add changeset for slate react

.changeset/fast-apricots-deliver.md

@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Updates the selection correctly in readonly shadowdom

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

@@ -726,7 +726,7 @@ export const ReactEditor = {
         // `isCollapsed` for a Selection that comes from a ShadowRoot.
         // (2020/08/08)
         // https://bugs.chromium.org/p/chromium/issues/detail?id=447523
-        if (IS_CHROME && hasShadowRoot()) {
+        if (IS_CHROME && hasShadowRoot(anchorNode)) {
           isCollapsed =
             domRange.anchorNode === domRange.focusNode &&
             domRange.anchorOffset === domRange.focusOffset

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

@@ -137,10 +137,15 @@ export const normalizeDOMPoint = (domPoint: DOMPoint): DOMPoint => {
  * Determines wether the active element is nested within a shadowRoot
  */
 
-export const hasShadowRoot = () => {
-  return !!(
-    window.document.activeElement && window.document.activeElement.shadowRoot
-  )
+export const hasShadowRoot = (node: Node | null) => {
+  let parent = node && node.parentNode
+  while (parent) {
+    if (parent.toString() === '[object ShadowRoot]') {
+      return true
+    }
+    parent = parent.parentNode
+  }
+  return false
 }
 
 /**