Fix selection getting incorrectly set in readonly shadow dom case (ia…

…nstormtaylor#5259) * Fix selection getting incorrectly set in readonly shadow dom case * Add changeset for slate react
donaldxdonald · Jan 14, 2023 · d7de564 · d7de564
1 parent 0df29a9
commit d7de564
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/.changeset/fast-apricots-deliver.md b/.changeset/fast-apricots-deliver.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Updates the selection correctly in readonly shadowdom
diff --git a/packages/slate-react/src/plugin/react-editor.ts b/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

diff --git a/packages/slate-react/src/utils/dom.ts b/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
 }
 
 /**