fix: focus loss inside Shadow DOM in Firefox. (#5676)

.changeset/clean-rats-raise.md

@@ -0,0 +1,5 @@
+---
+'slate-react': minor
+---
+
+Changed behaviour of ReactEditor.findDocumentOrShadowRoot. It returns shadow root or document without checking for the existence of the getSelection method.

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

@@ -36,6 +36,7 @@ import {
   DOMText,
   getActiveElement,
   getDefaultView,
+  getSelection,
   isDOMElement,
   isDOMNode,
   isPlainTextOnlyPaste,
@@ -231,7 +232,7 @@ export const Editable = (props: EditableProps) => {
           const root = ReactEditor.findDocumentOrShadowRoot(editor)
           const { activeElement } = root
           const el = ReactEditor.toDOMNode(editor, editor)
-          const domSelection = root.getSelection()
+          const domSelection = getSelection(root)
 
           if (activeElement === el) {
             state.latestElement = activeElement
@@ -308,7 +309,7 @@ export const Editable = (props: EditableProps) => {
     // Make sure the DOM selection state is in sync.
     const { selection } = editor
     const root = ReactEditor.findDocumentOrShadowRoot(editor)
-    const domSelection = root.getSelection()
+    const domSelection = getSelection(root)
 
     if (
       !domSelection ||
@@ -1090,7 +1091,7 @@ export const Editable = (props: EditableProps) => {
                 // editable element no longer has focus. Refer to:
                 // https://stackoverflow.com/questions/12353247/force-contenteditable-div-to-stop-accepting-input-after-it-loses-focus-under-web
                 if (IS_WEBKIT) {
-                  const domSelection = root.getSelection()
+                  const domSelection = getSelection(root)
                   domSelection?.removeAllRanges()
                 }
 

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

@@ -18,6 +18,7 @@ import {
   DOMSelection,
   DOMStaticRange,
   DOMText,
+  getSelection,
   hasShadowRoot,
   isDOMElement,
   isDOMNode,
@@ -280,7 +281,7 @@ export const ReactEditor: ReactEditorInterface = {
   deselect: editor => {
     const { selection } = editor
     const root = ReactEditor.findDocumentOrShadowRoot(editor)
-    const domSelection = root.getSelection()
+    const domSelection = getSelection(root)
 
     if (domSelection && domSelection.rangeCount > 0) {
       domSelection.removeAllRanges()
@@ -295,10 +296,7 @@ export const ReactEditor: ReactEditorInterface = {
     const el = ReactEditor.toDOMNode(editor, editor)
     const root = el.getRootNode()
 
-    if (
-      (root instanceof Document || root instanceof ShadowRoot) &&
-      root.getSelection != null
-    ) {
+    if (root instanceof Document || root instanceof ShadowRoot) {
       return root
     }
 
@@ -437,7 +435,7 @@ export const ReactEditor: ReactEditorInterface = {
     if (root.activeElement !== el) {
       // Ensure that the DOM selection state is set to the editor's selection
       if (editor.selection && root instanceof Document) {
-        const domSelection = root.getSelection()
+        const domSelection = getSelection(root)
         const domRange = ReactEditor.toDOMRange(editor, editor.selection)
         domSelection?.removeAllRanges()
         domSelection?.addRange(domRange)

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

@@ -274,6 +274,16 @@ export const getClipboardData = (
   return dataTransfer
 }
 
+/**
+ * Get the dom selection from Shadow Root if possible, otherwise from the document
+ */
+export const getSelection = (root: Document | ShadowRoot): Selection | null => {
+  if (root.getSelection != null) {
+    return root.getSelection()
+  }
+  return document.getSelection()
+}
+
 /**
  * Check whether a mutation originates from a editable element inside the editor.
  */