Add Safari workaround inside shadow DOM. (#5648)

* Add Safari workaround inside shadow DOM.

* Add E2E test.

* Move browser checks to environment.ts

* Remove leftover @ts-ignore.
Fix linting change.

* Update `getActiveElement`

* Create red-poems-wave.md

* Fix prettier.

* Update E2E test.

.changeset/red-poems-wave.md

@@ -0,0 +1,5 @@
+---
+'slate-react': minor
+---
+
+Fix Safari selection inside Shadow DOM.

.yarnrc.yml

@@ -3,12 +3,12 @@ compressionLevel: mixed
 packageExtensions:
   eslint-module-utils@*:
     dependencies:
-      eslint-import-resolver-node: "*"
+      eslint-import-resolver-node: '*'
   next@*:
     dependencies:
-      eslint-import-resolver-node: "*"
+      eslint-import-resolver-node: '*'
   react-error-boundary@*:
     dependencies:
-      prop-types: "*"
+      prop-types: '*'
 
 yarnPath: .yarn/releases/yarn-4.0.2.cjs

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

@@ -34,6 +34,7 @@ import {
   DOMElement,
   DOMRange,
   DOMText,
+  getActiveElement,
   getDefaultView,
   isDOMElement,
   isDOMNode,
@@ -50,6 +51,7 @@ import {
   IS_WEBKIT,
   IS_UC_MOBILE,
   IS_WECHATBROWSER,
+  IS_SAFARI_LEGACY,
 } from '../utils/environment'
 import Hotkeys from '../utils/hotkeys'
 import {
@@ -156,6 +158,7 @@ export const Editable = (props: EditableProps) => {
   const [placeholderHeight, setPlaceholderHeight] = useState<
     number | undefined
   >()
+  const processing = useRef(false)
 
   const { onUserInput, receivedUserInput } = useTrackUserInput()
 
@@ -202,6 +205,29 @@ export const Editable = (props: EditableProps) => {
   const onDOMSelectionChange = useMemo(
     () =>
       throttle(() => {
+        const el = ReactEditor.toDOMNode(editor, editor)
+        const root = el.getRootNode()
+
+        if (
+          IS_SAFARI_LEGACY &&
+          !processing.current &&
+          IS_WEBKIT &&
+          root instanceof ShadowRoot
+        ) {
+          processing.current = true
+
+          const active = getActiveElement()
+
+          if (active) {
+            document.execCommand('indent')
+          } else {
+            Transforms.deselect(editor)
+          }
+
+          processing.current = false
+          return
+        }
+
         const androidInputManager = androidInputManagerRef.current
         if (
           (IS_ANDROID || !ReactEditor.isComposing(editor)) &&
@@ -471,6 +497,35 @@ export const Editable = (props: EditableProps) => {
   // https://github.com/facebook/react/issues/11211
   const onDOMBeforeInput = useCallback(
     (event: InputEvent) => {
+      const el = ReactEditor.toDOMNode(editor, editor)
+      const root = el.getRootNode()
+
+      if (
+        IS_SAFARI_LEGACY &&
+        processing?.current &&
+        IS_WEBKIT &&
+        root instanceof ShadowRoot
+      ) {
+        const ranges = event.getTargetRanges()
+        const range = ranges[0]
+
+        const newRange = new window.Range()
+
+        newRange.setStart(range.startContainer, range.startOffset)
+        newRange.setEnd(range.endContainer, range.endOffset)
+
+        // Translate the DOM Range into a Slate Range
+        const slateRange = ReactEditor.toSlateRange(editor, newRange, {
+          exactMatch: false,
+          suppressThrow: false,
+        })
+
+        Transforms.select(editor, slateRange)
+
+        event.preventDefault()
+        event.stopImmediatePropagation()
+        return
+      }
       onUserInput()
 
       if (

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

@@ -314,3 +314,16 @@ export const isTrackedMutation = (
   // Target add/remove is tracked. Track the mutation if we track the parent mutation.
   return isTrackedMutation(editor, parentMutation, batch)
 }
+
+/**
+ * Retrieves the deepest active element in the DOM, considering nested shadow DOMs.
+ */
+export const getActiveElement = () => {
+  let activeElement = document.activeElement
+
+  while (activeElement?.shadowRoot && activeElement.shadowRoot?.activeElement) {
+    activeElement = activeElement?.shadowRoot?.activeElement
+  }
+
+  return activeElement
+}

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

@@ -66,6 +66,15 @@ export const CAN_USE_DOM = !!(
   typeof window.document.createElement !== 'undefined'
 )
 
+// Check if the browser is Safari and older than 17
+export const IS_SAFARI_LEGACY =
+  typeof navigator !== 'undefined' &&
+  /Safari/.test(navigator.userAgent) &&
+  /Version\/(\d+)/.test(navigator.userAgent) &&
+  (navigator.userAgent.match(/Version\/(\d+)/)?.[1]
+    ? parseInt(navigator.userAgent.match(/Version\/(\d+)/)?.[1]!, 10) < 17
+    : false)
+
 // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
 // Chrome Legacy doesn't support `beforeinput` correctly
 export const HAS_BEFORE_INPUT_SUPPORT =

playwright/integration/examples/shadow-dom.test.ts

@@ -12,4 +12,22 @@ test.describe('shadow-dom example', () => {
 
     await expect(innerShadow.getByRole('textbox')).toHaveCount(1)
   })
+
+  test('renders slate editor inside nested shadow and edits content', async ({
+    page,
+  }) => {
+    const outerShadow = page.locator('[data-cy="outer-shadow-root"]')
+    const innerShadow = outerShadow.locator('> div')
+    const textbox = innerShadow.getByRole('textbox')
+
+    // Ensure the textbox is present
+    await expect(textbox).toHaveCount(1)
+
+    // Clear any existing text and type new text into the textbox
+    await textbox.fill('') // Clears the textbox
+    await textbox.type('Hello, Playwright!')
+
+    // Assert that the textbox contains the correct text
+    await expect(textbox).toHaveValue('Hello, Playwright!')
+  })
 })