Add Safari workaround inside shadow DOM.

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

@@ -34,6 +34,7 @@
   DOMElement,
   DOMRange,
   DOMText,
+  getActiveElement,
   getDefaultView,
   isDOMElement,
   isDOMNode,
@@ -156,6 +157,7 @@
   const [placeholderHeight, setPlaceholderHeight] = useState<
     number | undefined
   >()
+  const processing = useRef(false)
 
   const { onUserInput, receivedUserInput } = useTrackUserInput()
 
@@ -202,6 +204,32 @@
   const onDOMSelectionChange = useMemo(
     () =>
       throttle(() => {
+        const el = ReactEditor.toDOMNode(editor, editor)
+        const root = el.getRootNode()
+        const safariVersion = navigator.userAgent.match(/Version\/(\d+\.\d+)/)
+        const isSafariVersionLessThan17 =
+          IS_WEBKIT && safariVersion && parseFloat(safariVersion[1]) < 17.0
+
+        if (
+          isSafariVersionLessThan17 &&
+          !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 +499,39 @@
   // https://github.com/facebook/react/issues/11211
   const onDOMBeforeInput = useCallback(
     (event: InputEvent) => {
+      const el = ReactEditor.toDOMNode(editor, editor)
+      const root = el.getRootNode()
+      const safariVersion = navigator.userAgent.match(/Version\/(\d+\.\d+)/)
+      const isSafariVersionLessThan17 =
+        IS_WEBKIT && safariVersion && parseFloat(safariVersion[1]) < 17.0
+
+      if (
+        isSafariVersionLessThan17 &&
+        processing?.current &&
+        IS_WEBKIT &&
+        root instanceof ShadowRoot
+      ) {
+        // @ts-ignore
+        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 (
@@ -921,17 +982,17 @@
               ...(disableDefaultStyles
                 ? {}
                 : {
-                    // Allow positioning relative to the editable element.
-                    position: 'relative',
-                    // Preserve adjacent whitespace and new lines.
-                    whiteSpace: 'pre-wrap',
-                    // Allow words to break if they are too long.
-                    wordWrap: 'break-word',
-                    // Make the minimum height that of the placeholder.
-                    ...(placeholderHeight
-                      ? { minHeight: placeholderHeight }
-                      : {}),
-                  }),
+                  // Allow positioning relative to the editable element.
+                  position: 'relative',
+                  // Preserve adjacent whitespace and new lines.
+                  whiteSpace: 'pre-wrap',
+                  // Allow words to break if they are too long.
+                  wordWrap: 'break-word',
+                  // Make the minimum height that of the placeholder.
+                  ...(placeholderHeight
+                    ? { minHeight: placeholderHeight }
+                    : {}),
+                }),
               // Allow for passed-in styles to override anything.
               ...userStyle,
             }}
@@ -1414,7 +1475,7 @@
                   const element =
                     editor.children[
                       selection !== null ? selection.focus.path[0] : 0
-                    ]
+                      ]
                   const isRTL = getDirection(Node.string(element)) === 'rtl'
 
                   // COMPAT: Since we prevent the default behavior on
@@ -1722,9 +1783,9 @@
  */
 
 export const DefaultPlaceholder = ({
-  attributes,
-  children,
-}: RenderPlaceholderProps) => (
+                                     attributes,
+                                     children,
+                                   }: RenderPlaceholderProps) => (
   // COMPAT: Artificially add a line-break to the end on the placeholder element
   // to prevent Android IMEs to pick up its content in autocorrect and to auto-capitalize the first letter
   <span {...attributes}>

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

@@ -170,7 +170,7 @@ export const getEditableChildAndIndex = (
     isDOMComment(child) ||
     (isDOMElement(child) && child.childNodes.length === 0) ||
     (isDOMElement(child) && child.getAttribute('contenteditable') === 'false')
-  ) {
+    ) {
     if (triedForward && triedBackward) {
       break
     }
@@ -314,3 +314,18 @@ export const isTrackedMutation = (
   // Target add/remove is tracked. Track the mutation if we track the parent mutation.
   return isTrackedMutation(editor, parentMutation, batch)
 }
+
+export function getActiveElement() {
+  let active = document.activeElement
+
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    if (active && active.shadowRoot && active.shadowRoot.activeElement) {
+      active = active.shadowRoot.activeElement
+    } else {
+      break
+    }
+  }
+
+  return active
+}

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

@@ -12,4 +12,25 @@ 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!')
+
+    // Optionally, if you want to assert just the presence of text, not exact match
+    await expect(textbox).toContainText('Hello, Playwright!')
+  })
 })