@portabletext/editor 1.51.0 → 1.52.0

package/src/editor/Editable.tsx

@@ -23,18 +23,14 @@ import {
   type RenderElementProps,
   type RenderLeafProps,
 } from 'slate-react'
-import {getCompoundClientRect} from '../internal-utils/compound-client-rect'
 import {debugWithName} from '../internal-utils/debug'
-import {getDragSelection} from '../internal-utils/drag-selection'
 import {getEventPosition} from '../internal-utils/event-position'
 import {parseBlocks} from '../internal-utils/parse-blocks'
 import {toSlateRange} from '../internal-utils/ranges'
 import {normalizeSelection} from '../internal-utils/selection'
-import {getSelectionDomNodes} from '../internal-utils/selection-elements'
 import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import {fromSlateValue} from '../internal-utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
-import * as selectors from '../selectors'
 import type {
   EditorSelection,
   OnCopyFn,
@@ -50,13 +46,10 @@ import type {
   ScrollSelectionIntoViewFunction,
 } from '../types/editor'
 import type {HotkeyOptions} from '../types/options'
-import {isSelectionCollapsed} from '../utils'
-import {getSelectionEndPoint} from '../utils/util.get-selection-end-point'
 import {RenderElement} from './components/render-element'
 import {RenderLeaf} from './components/render-leaf'
 import {RenderText, type RenderTextProps} from './components/render-text'
 import {EditorActorContext} from './editor-actor-context'
-import {getEditorSnapshot} from './editor-selector'
 import {usePortableTextEditor} from './hooks/usePortableTextEditor'
 import {createWithHotkeys} from './plugins/createWithHotKeys'
 import {PortableTextEditor} from './PortableTextEditor'
@@ -811,131 +804,9 @@ export const PortableTextEditable = forwardRef<
         return
       }
 
-      const snapshot = getEditorSnapshot({
-        editorActorSnapshot: editorActor.getSnapshot(),
-        slateEditorInstance: slateEditor,
-      })
-      const dragSelection = getDragSelection({
-        eventSelection: position.selection,
-        snapshot,
-      })
-
-      const selectingEntireBlocks = selectors.isSelectingEntireBlocks({
-        ...snapshot,
-        context: {
-          ...snapshot.context,
-          selection: dragSelection,
-        },
-      })
-
-      const dragGhost = document.createElement('div')
-
-      const draggedDomNodes = getSelectionDomNodes({
-        snapshot: {
-          ...snapshot,
-          context: {
-            ...snapshot.context,
-            selection: dragSelection,
-          },
-        },
-        slateEditor,
-      })
-
-      if (selectingEntireBlocks) {
-        // Clone the DOM Nodes so they won't be visually clipped by scroll-containers etc.
-        const clonedBlockNodes = draggedDomNodes.blockNodes.map((node) =>
-          node.cloneNode(true),
-        )
-
-        for (const block of clonedBlockNodes) {
-          if (block instanceof HTMLElement) {
-            block.style.position = 'relative'
-          }
-          dragGhost.appendChild(block)
-        }
-
-        // A custom drag ghost element can be configured using this data attribute
-        const customGhost = dragGhost.querySelector(
-          '[data-pt-drag-ghost-element]',
-        )
-        if (customGhost) {
-          dragGhost.replaceChildren(customGhost)
-        }
-
-        // Setting the `data-dragged` attribute so the consumer can style the element while it’s dragged
-        dragGhost.setAttribute('data-dragged', '')
-
-        dragGhost.style.position = 'absolute'
-        dragGhost.style.left = '-99999px'
-        dragGhost.style.boxSizing = 'border-box'
-        document.body.appendChild(dragGhost)
-
-        if (customGhost) {
-          const customGhostRect = customGhost.getBoundingClientRect()
-          const x = event.clientX - customGhostRect.left
-          const y = event.clientY - customGhostRect.top
-          dragGhost.style.width = `${customGhostRect.width}px`
-          dragGhost.style.height = `${customGhostRect.height}px`
-          event.dataTransfer.setDragImage(dragGhost, x, y)
-        } else {
-          const blocksDomRect = getCompoundClientRect(
-            draggedDomNodes.blockNodes,
-          )
-          const x = event.clientX - blocksDomRect.left
-          const y = event.clientY - blocksDomRect.top
-          dragGhost.style.width = `${blocksDomRect.width}px`
-          dragGhost.style.height = `${blocksDomRect.height}px`
-          event.dataTransfer.setDragImage(dragGhost, x, y)
-        }
-      } else {
-        const clonedChildNodes = draggedDomNodes.childNodes.map((node) =>
-          node.cloneNode(true),
-        )
-
-        for (const child of clonedChildNodes) {
-          dragGhost.appendChild(child)
-        }
-
-        dragGhost.style.position = 'absolute'
-        dragGhost.style.left = '-99999px'
-        dragGhost.style.boxSizing = 'border-box'
-        document.body.appendChild(dragGhost)
-
-        const childrenDomRect = getCompoundClientRect(
-          draggedDomNodes.childNodes,
-        )
-        const x = event.clientX - childrenDomRect.left
-        const y = event.clientY - childrenDomRect.top
-        dragGhost.style.width = `${childrenDomRect.width}px`
-        dragGhost.style.height = `${childrenDomRect.height}px`
-
-        event.dataTransfer.setDragImage(dragGhost, x, y)
-      }
-
-      // Select drag selection
-      // If the selection is expanded then we just select the end of the
-      // selection
-      editorActor.send({
-        type: 'behavior event',
-        behaviorEvent: {
-          type: 'select',
-          at: isSelectionCollapsed(dragSelection)
-            ? dragSelection
-            : {
-                anchor: getSelectionEndPoint(dragSelection),
-                focus: getSelectionEndPoint(dragSelection),
-                backward: false,
-              },
-        },
-        editor: slateEditor,
-      })
-
       editorActor.send({
         type: 'dragstart',
-        origin: {
-          selection: dragSelection,
-        },
-        ghost: dragGhost,
+        origin: position,
       })
 
       editorActor.send({
@@ -943,11 +814,11 @@ export const PortableTextEditable = forwardRef<
         behaviorEvent: {
           type: 'drag.dragstart',
           originEvent: {
+            clientX: event.clientX,
+            clientY: event.clientY,
             dataTransfer: event.dataTransfer,
           },
-          position: {
-            selection: dragSelection,
-          },
+          position,
         },
         editor: slateEditor,
       })
@@ -1079,6 +950,7 @@ export const PortableTextEditable = forwardRef<
           originEvent: {
             dataTransfer: event.dataTransfer,
           },
+          dragOrigin: editorActor.getSnapshot().context.internalDrag?.origin,
           position,
         },
         editor: slateEditor,
@@ -1117,6 +989,7 @@ export const PortableTextEditable = forwardRef<
           originEvent: {
             dataTransfer: event.dataTransfer,
           },
+          dragOrigin: editorActor.getSnapshot().context.internalDrag?.origin,
           position,
         },
         editor: slateEditor,

package/src/editor/editor-machine.ts

@@ -114,10 +114,14 @@ export type InternalEditorEvent =
     }
   | MutationEvent
   | InternalPatchEvent
+  | {
+      type: 'set drag ghost'
+      ghost: HTMLElement
+    }
   | {
       type: 'dragstart'
-      origin: Pick<EventPosition, 'selection'>
       ghost?: HTMLElement
+      origin: Pick<EventPosition, 'selection'>
     }
   | {type: 'dragend'}
   | {type: 'drop'}
@@ -148,9 +152,9 @@ export const editorMachine = setup({
       selection: EditorSelection
       initialValue: Array<PortableTextBlock> | undefined
       internalDrag?: {
-        ghost?: HTMLElement
         origin: Pick<EventPosition, 'selection'>
       }
+      dragGhost?: HTMLElement
       slateEditor?: PortableTextSlateEditor
     },
     events: {} as InternalEditorEvent,
@@ -273,9 +277,9 @@ export const editorMachine = setup({
               keyGenerator: context.keyGenerator,
               readOnly: self.getSnapshot().matches({'edit mode': 'read only'}),
               schema: context.schema,
-              internalDrag: context.internalDrag,
             }),
           nativeEvent: event.nativeEvent,
+          sendBack: (event) => self.send(event),
         })
       } catch (error) {
         console.error(
@@ -322,6 +326,9 @@ export const editorMachine = setup({
         emit(({event}) => ({...event, type: 'selection'})),
       ],
     },
+    'set drag ghost': {
+      actions: assign({dragGhost: ({event}) => event.ghost}),
+    },
   },
   type: 'parallel',
   states: {
@@ -427,7 +434,6 @@ export const editorMachine = setup({
                   actions: [
                     assign({
                       internalDrag: ({event}) => ({
-                        ghost: event.ghost,
                         origin: event.origin,
                       }),
                     }),
@@ -495,20 +501,21 @@ export const editorMachine = setup({
                   debug('exit: edit mode->editable->dragging internally')
                 },
                 ({context}) => {
-                  if (context.internalDrag?.ghost) {
+                  if (context.dragGhost) {
                     try {
-                      context.internalDrag.ghost.parentNode?.removeChild(
-                        context.internalDrag.ghost,
+                      context.dragGhost.parentNode?.removeChild(
+                        context.dragGhost,
                       )
                     } catch (error) {
                       console.error(
                         new Error(
-                          `Removing the internal drag ghost failed due to: ${error.message}`,
+                          `Removing the drag ghost failed due to: ${error.message}`,
                         ),
                       )
                     }
                   }
                 },
+                assign({dragGhost: undefined}),
                 assign({internalDrag: undefined}),
               ],
               tags: ['dragging internally'],

package/src/editor/editor-selector.ts

@@ -86,7 +86,6 @@ export function getEditorSnapshot({
         markState: slateEditorInstance.markState,
         schema: editorActorSnapshot.context.schema,
       }),
-      internalDrag: editorActorSnapshot.context.internalDrag,
     },
   }
 }

package/src/editor/editor-snapshot.ts

@@ -1,6 +1,5 @@
 import type {PortableTextBlock} from '@sanity/types'
 import type {Converter} from '../converters/converter.types'
-import type {EventPosition} from '../internal-utils/event-position'
 import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import type {EditorSelection, PortableTextSlateEditor} from '../types/editor'
 import type {EditorSchema} from './editor-schema'
@@ -31,11 +30,6 @@ export type EditorSnapshot = {
   beta: {
     activeAnnotations: Array<string>
     activeDecorators: Array<string>
-    internalDrag:
-      | {
-          origin: Pick<EventPosition, 'selection'>
-        }
-      | undefined
   }
 }
 
@@ -45,18 +39,12 @@ export function createEditorSnapshot({
   keyGenerator,
   readOnly,
   schema,
-  internalDrag,
 }: {
   converters: Array<Converter>
   editor: PortableTextSlateEditor
   keyGenerator: () => string
   readOnly: boolean
   schema: EditorSchema
-  internalDrag:
-    | {
-        origin: Pick<EventPosition, 'selection'>
-      }
-    | undefined
 }) {
   const selection = editor.selection
     ? slateRangeToSelection({
@@ -87,7 +75,6 @@ export function createEditorSnapshot({
         markState: editor.markState,
         schema,
       }),
-      internalDrag,
     },
   } satisfies EditorSnapshot
 }

package/src/internal-utils/create-test-snapshot.ts

@@ -19,7 +19,6 @@ export function createTestSnapshot(snapshot: {
     beta: {
       activeAnnotations: snapshot.beta?.activeAnnotations ?? [],
       activeDecorators: snapshot.beta?.activeDecorators ?? [],
-      internalDrag: undefined,
     },
   }
 }

package/src/internal-utils/event-position.ts

@@ -35,79 +35,93 @@ export function getEventPosition({
     return undefined
   }
 
-  const node = getEventNode({slateEditor, event})
+  const eventNode = getEventNode({slateEditor, event})
 
-  if (!node) {
+  if (!eventNode) {
     return undefined
   }
 
-  const block = getNodeBlock({
+  const eventBlock = getNodeBlock({
     editor: slateEditor,
     schema: editorActor.getSnapshot().context.schema,
-    node,
+    node: eventNode,
   })
-
-  const positionBlock = getEventPositionBlock({node, slateEditor, event})
-  const selection = getEventSelection({
+  const eventPositionBlock = getEventPositionBlock({
+    node: eventNode,
+    slateEditor,
+    event,
+  })
+  const eventSelection = getEventSelection({
     schema: editorActor.getSnapshot().context.schema,
     slateEditor,
     event,
   })
 
-  if (block && positionBlock && !selection && !Editor.isEditor(node)) {
+  if (
+    eventBlock &&
+    eventPositionBlock &&
+    !eventSelection &&
+    !Editor.isEditor(eventNode)
+  ) {
+    // If we for some reason can't find the event selection, then we default to
+    // selecting the entire block that the event originates from.
     return {
-      block: positionBlock,
+      block: eventPositionBlock,
       isEditor: false,
       selection: {
         anchor: utils.getBlockStartPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
-            path: [{_key: block._key}],
+            node: eventBlock,
+            path: [{_key: eventBlock._key}],
           },
         }),
         focus: utils.getBlockEndPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
-            path: [{_key: block._key}],
+            node: eventBlock,
+            path: [{_key: eventBlock._key}],
           },
         }),
       },
     }
   }
 
-  if (!positionBlock || !selection) {
+  if (!eventPositionBlock || !eventSelection) {
     return undefined
   }
 
-  const focusBlockKey = getBlockKeyFromSelectionPoint(selection.focus)
+  const eventSelectionFocusBlockKey = getBlockKeyFromSelectionPoint(
+    eventSelection.focus,
+  )
 
-  if (focusBlockKey === undefined) {
+  if (eventSelectionFocusBlockKey === undefined) {
     return undefined
   }
 
   if (
-    utils.isSelectionCollapsed(selection) &&
-    block &&
-    focusBlockKey !== block._key
+    utils.isSelectionCollapsed(eventSelection) &&
+    eventBlock &&
+    eventSelectionFocusBlockKey !== eventBlock._key
   ) {
+    // If the event block and event selection somehow don't match, then the
+    // event block takes precedence.
     return {
-      block: positionBlock,
+      block: eventPositionBlock,
       isEditor: false,
       selection: {
         anchor: utils.getBlockStartPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
-            path: [{_key: block._key}],
+            node: eventBlock,
+            path: [{_key: eventBlock._key}],
           },
         }),
         focus: utils.getBlockEndPoint({
           context: editorActor.getSnapshot().context,
           block: {
-            node: block,
-            path: [{_key: block._key}],
+            node: eventBlock,
+            path: [{_key: eventBlock._key}],
           },
         }),
       },
@@ -115,9 +129,9 @@ export function getEventPosition({
   }
 
   return {
-    block: positionBlock,
-    isEditor: Editor.isEditor(node),
-    selection,
+    block: eventPositionBlock,
+    isEditor: Editor.isEditor(eventNode),
+    selection: eventSelection,
   }
 }
 

package/src/internal-utils/selection-elements.ts

@@ -1,9 +1,96 @@
 import {Editor} from 'slate'
 import {DOMEditor} from 'slate-dom'
 import type {EditorSnapshot} from '..'
+import type {BehaviorEvent} from '../behaviors'
+import type {PickFromUnion} from '../type-utils'
 import type {PortableTextSlateEditor} from '../types/editor'
 import {toSlateRange} from './ranges'
 
+export type EditorDom = {
+  getBlockNodes: (snapshot: EditorSnapshot) => Array<Node>
+  getChildNodes: (snapshot: EditorSnapshot) => Array<Node>
+  /**
+   * Let the Editor set the drag ghost. This is to be sure that it will get
+   * properly removed again when the drag ends.
+   */
+  setDragGhost: ({
+    event,
+    ghost,
+  }: {
+    event: PickFromUnion<BehaviorEvent, 'type', 'drag.dragstart'>
+    ghost: {
+      element: HTMLElement
+      x: number
+      y: number
+    }
+  }) => void
+}
+
+export function createEditorDom(
+  sendBack: (event: {type: 'set drag ghost'; ghost: HTMLElement}) => void,
+  slateEditor: PortableTextSlateEditor,
+): EditorDom {
+  return {
+    getBlockNodes: (snapshot) => getBlockNodes(slateEditor, snapshot),
+    getChildNodes: (snapshot) => getChildNodes(slateEditor, snapshot),
+    setDragGhost: ({event, ghost}) => setDragGhost({sendBack, event, ghost}),
+  }
+}
+
+function getBlockNodes(
+  slateEditor: PortableTextSlateEditor,
+  snapshot: EditorSnapshot,
+) {
+  if (!snapshot.context.selection) {
+    return []
+  }
+
+  const range = toSlateRange(snapshot.context.selection, slateEditor)
+
+  if (!range) {
+    return []
+  }
+
+  const blockEntries = Array.from(
+    Editor.nodes(slateEditor, {
+      at: range,
+      mode: 'highest',
+      match: (n) => !Editor.isEditor(n),
+    }),
+  )
+
+  return blockEntries.map(([blockNode]) =>
+    DOMEditor.toDOMNode(slateEditor, blockNode),
+  )
+}
+
+function getChildNodes(
+  slateEditor: PortableTextSlateEditor,
+  snapshot: EditorSnapshot,
+) {
+  if (!snapshot.context.selection) {
+    return []
+  }
+
+  const range = toSlateRange(snapshot.context.selection, slateEditor)
+
+  if (!range) {
+    return []
+  }
+
+  const childEntries = Array.from(
+    Editor.nodes(slateEditor, {
+      at: range,
+      mode: 'lowest',
+      match: (n) => !Editor.isEditor(n),
+    }),
+  )
+
+  return childEntries.map(([childNode]) =>
+    DOMEditor.toDOMNode(slateEditor, childNode),
+  )
+}
+
 export type SelectionDomNodes = {
   blockNodes: Array<Node>
   childNodes: Array<Node>
@@ -59,3 +146,24 @@ export function getSelectionDomNodes({
     ),
   }
 }
+
+function setDragGhost({
+  sendBack,
+  event,
+  ghost,
+}: {
+  sendBack: (event: {type: 'set drag ghost'; ghost: HTMLElement}) => void
+  event: PickFromUnion<BehaviorEvent, 'type', 'drag.dragstart'>
+  ghost: {
+    element: HTMLElement
+    x: number
+    y: number
+  }
+}) {
+  event.originEvent.dataTransfer.setDragImage(ghost.element, ghost.x, ghost.y)
+
+  sendBack({
+    type: 'set drag ghost',
+    ghost: ghost.element,
+  })
+}

package/src/operations/behavior.operation.decorator.add.ts

@@ -111,7 +111,6 @@ export const decoratorAddOperationImplementation: BehaviorOperationImplementatio
       beta: {
         activeAnnotations: [],
         activeDecorators: [],
-        internalDrag: undefined,
       },
       context: {
         converters: [],