Fix shadow DOM - drag-and-drop text throws error

packages/slate-react/src/custom-types.ts

@@ -34,7 +34,11 @@ declare global {
   }
 
   interface Document {
-    caretPositionFromPoint(x: number, y: number): CaretPosition | null
+    caretPositionFromPoint(
+      x: number,
+      y: number,
+      options?: { shadowRoots?: ShadowRoot[] }
+    ): CaretPosition | null
   }
 
   interface Node {

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

@@ -44,6 +44,10 @@ import {
   NODE_TO_KEY,
   NODE_TO_PARENT,
 } from '../utils/weak-maps'
+import {
+  CursorPoint,
+  findClosestCharacterToCursorPoint,
+} from '../utils/find-closest-character-in-element-by-cursor-point'
 
 /**
  * A React and DOM-specific version of the `Editor` interface.
@@ -97,6 +101,12 @@ export interface ReactEditorInterface {
    */
   deselect: (editor: ReactEditor) => void
 
+  findEventRangeInShadowRoot: (
+    shadowRoot: ShadowRoot,
+    cursorPoint: CursorPoint
+  ) => DOMRange | null
+
+  createDomRangeFromCaretPoint: (cursorPoint: CaretPosition) => DOMRange
   /**
    * Find the DOM node that implements DocumentOrShadowRoot for the editor.
    */
@@ -310,6 +320,43 @@ export const ReactEditor: ReactEditorInterface = {
     return el.ownerDocument
   },
 
+  findEventRangeInShadowRoot: (
+    shadowRoot: ShadowRoot,
+    cursorPoint: CursorPoint
+  ): DOMRange | null => {
+    const { x, y } = cursorPoint
+    // The third parameter in caretPositionFromPoint is not compatible with all browsers.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Document/caretPositionFromPoint#browser_compatibility
+    if (document?.caretPositionFromPoint?.length === 3) {
+      const options = { shadowRoots: [shadowRoot] }
+      const position = document.caretPositionFromPoint(x, y, options)
+      if (position) return ReactEditor.createDomRangeFromCaretPoint(position)
+    }
+
+    const elementUnderCursor = shadowRoot.elementFromPoint(x, y)
+    const closestChar = elementUnderCursor
+      ? findClosestCharacterToCursorPoint(elementUnderCursor, cursorPoint)
+      : null
+    if (!closestChar) return null
+
+    const { textNode, offset } = closestChar
+
+    const selection = getSelection(shadowRoot)
+    selection?.setBaseAndExtent(textNode, offset, textNode, offset)
+    const range = selection?.getRangeAt(0)
+    return range || null
+  },
+
+  createDomRangeFromCaretPoint: (cursorPoint: CaretPosition): DOMRange => {
+    const { offsetNode, offset } = cursorPoint
+
+    const range = document.createRange()
+    range.setStart(offsetNode, offset)
+    range.setEnd(offsetNode, offset)
+
+    return range
+  },
+
   findEventRange: (editor, event) => {
     if ('nativeEvent' in event) {
       event = event.nativeEvent
@@ -349,17 +396,25 @@ export const ReactEditor: ReactEditorInterface = {
     // Else resolve a range from the caret position where the drop occured.
     let domRange
     const { document } = ReactEditor.getWindow(editor)
+    const shadowRootOrDocument = ReactEditor.toDOMNode(
+      editor,
+      editor
+    ).getRootNode()
+    const shadowRoot =
+      shadowRootOrDocument instanceof ShadowRoot ? shadowRootOrDocument : null
 
-    // COMPAT: In Firefox, `caretRangeFromPoint` doesn't exist. (2016/07/25)
-    if (document.caretRangeFromPoint) {
-      domRange = document.caretRangeFromPoint(x, y)
+    if (shadowRoot) {
+      domRange = ReactEditor.findEventRangeInShadowRoot(shadowRoot, { x, y })
     } else {
-      const position = document.caretPositionFromPoint(x, y)
+      // COMPAT: In Firefox, `caretRangeFromPoint` doesn't exist. (2016/07/25)
+      if (document.caretRangeFromPoint) {
+        domRange = document.caretRangeFromPoint(x, y)
+      } else {
+        const position = document.caretPositionFromPoint(x, y)
 
-      if (position) {
-        domRange = document.createRange()
-        domRange.setStart(position.offsetNode, position.offset)
-        domRange.setEnd(position.offsetNode, position.offset)
+        if (position) {
+          domRange = ReactEditor.createDomRangeFromCaretPoint(position)
+        }
       }
     }
 

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

@@ -355,3 +355,10 @@ export const isAfter = (node: DOMNode, otherNode: DOMNode): boolean =>
     node.compareDocumentPosition(otherNode) &
       DOMNode.DOCUMENT_POSITION_FOLLOWING
   )
+
+export const findTextNodesInNode = (node: Node): Text[] => {
+  if (isDOMText(node)) {
+    return [node as Text]
+  }
+  return Array.from(node.childNodes).flatMap(findTextNodesInNode)
+}

packages/slate-react/src/utils/find-closest-character-in-element-by-cursor-point.ts

@@ -0,0 +1,99 @@
+import { findTextNodesInNode } from './dom'
+
+export type CursorPoint = {
+  x: number
+  y: number
+}
+
+export type ClosestCharacter = {
+  offset: number
+  distance: number
+  textNode: Text
+}
+
+type CharDistanceFromCursorPoint = {
+  distanceX: number
+  distanceY: number
+  charCenterX: number
+  charCenterY: number
+  isCursorOnSameLine: boolean
+}
+
+const calculateCharDistance = (
+  cursorPoint: CursorPoint,
+  range: Range
+): CharDistanceFromCursorPoint => {
+  const rect = range.getBoundingClientRect()
+  const charCenterX = (rect.left + rect.right) / 2
+  const charCenterY = (rect.top + rect.bottom) / 2
+
+  return {
+    distanceX: Math.abs(cursorPoint.x - charCenterX),
+    distanceY: Math.abs(cursorPoint.y - charCenterY),
+    charCenterX,
+    charCenterY,
+    isCursorOnSameLine:
+      rect.top <= cursorPoint.y && rect.bottom >= cursorPoint.y,
+  }
+}
+
+const findClosestCharacterInSingleTextNode = (
+  textNode: Text,
+  cursorPoint: CursorPoint
+): ClosestCharacter | null => {
+  let closestChar: ClosestCharacter | null = null
+  const textLength = textNode.textContent?.length ?? 0
+
+  for (let i = 0; i < textLength; i++) {
+    const range = document.createRange()
+    range.setStart(textNode, i)
+    range.setEnd(textNode, i + 1)
+
+    const { distanceX, charCenterX, isCursorOnSameLine } =
+      calculateCharDistance(cursorPoint, range)
+
+    if (isCursorOnSameLine) {
+      const prevDistance: number = closestChar?.distance ?? Infinity
+      const newDistance: number = distanceX
+      const isCloser = newDistance < prevDistance
+
+      const isOnLeftSideOfCursor = cursorPoint.x < charCenterX
+      const offset = isOnLeftSideOfCursor ? i : i + 1
+
+      closestChar = isCloser
+        ? { offset, distance: newDistance, textNode }
+        : closestChar
+    }
+  }
+
+  return closestChar
+}
+
+const findClosestCharacterForTextNodes = (
+  textNodes: Text[],
+  cursorPoint: CursorPoint
+): ClosestCharacter | null => {
+  let closestInNode = null
+
+  for (const textNode of textNodes) {
+    const newResult = findClosestCharacterInSingleTextNode(
+      textNode,
+      cursorPoint
+    )
+    const prevDistance: number = closestInNode?.distance ?? Infinity
+    const newDistance: number = newResult?.distance ?? Infinity
+    const isCloser = newDistance < prevDistance
+
+    closestInNode = isCloser ? newResult : closestInNode
+  }
+
+  return closestInNode
+}
+
+export const findClosestCharacterToCursorPoint = (
+  elementUnderCursor: Element,
+  cursorPoint: CursorPoint
+): ClosestCharacter | null => {
+  const textNodes = findTextNodesInNode(elementUnderCursor)
+  return findClosestCharacterForTextNodes(textNodes, cursorPoint)
+}

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

@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test'
+import { dispatchDropEvent } from '../../playwrightTestHelpers'
 
 test.describe('shadow-dom example', () => {
   test.beforeEach(
@@ -29,4 +30,25 @@ test.describe('shadow-dom example', () => {
     // Assert that the textbox contains the correct text
     await expect(textbox).toHaveText('Hello, Playwright!')
   })
+  test('drag and drop text above the textbox', async ({ page }) => {
+    const outerShadow = page.locator('[data-cy="outer-shadow-root"]')
+    const innerShadow = outerShadow.locator('> div')
+
+    const textbox = innerShadow.getByRole('textbox')
+    await textbox.fill('test ')
+
+    const droppedText = 'droppedText'
+    const textboxEl = (await textbox.elementHandle()) as HTMLElement
+    const { x, y, width, height } = await textbox.boundingBox()
+    await dispatchDropEvent({
+      page,
+      element: textboxEl,
+      droppedText: droppedText,
+      clientX: x + width - 5,
+      clientY: y + height / 2,
+    })
+
+    const expectedText = `test ${droppedText}`
+    await expect(textbox).toHaveText(expectedText)
+  })
 })

playwright/playwrightTestHelpers.ts

@@ -0,0 +1,43 @@
+import { Page } from '@playwright/test'
+
+export type DisptachDropEvent = {
+  page: Page
+  element: Element
+  droppedText: string
+  clientX: number
+  clientY: number
+}
+
+export const dispatchDropEvent = async ({
+  page,
+  element,
+  droppedText,
+  clientX,
+  clientY,
+}: DisptachDropEvent) =>
+  page.evaluate(
+    ({
+      element,
+      droppedText,
+      clientX,
+      clientY,
+    }: Omit<DisptachDropEvent, 'page'>) => {
+      const fragmentData = JSON.stringify([{ type: 'text', text: droppedText }])
+      const encodedFragment = btoa(encodeURIComponent(fragmentData))
+
+      const dataTransfer = new DataTransfer()
+      dataTransfer.setData(`application/x-slate-fragment`, encodedFragment)
+      const eventInit: DragEventInit = {
+        bubbles: true,
+        cancelable: true,
+        clientX,
+        clientY,
+        dataTransfer: dataTransfer,
+      }
+
+      const event = new DragEvent('drop', eventInit)
+
+      element.dispatchEvent(event)
+    },
+    { element, droppedText, clientX, clientY }
+  )