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!')
+ })
 })