@portabletext/editor 1.39.0 → 1.40.0

package/src/editor/Editable.tsx

@@ -19,7 +19,6 @@ import {
 import {
   Editor,
   Path,
-  Element as SlateElement,
   Range as SlateRange,
   Transforms,
   type BaseRange,
@@ -34,7 +33,9 @@ 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 {
@@ -43,7 +44,9 @@ import {
   toSlateRange,
 } from '../internal-utils/ranges'
 import {normalizeSelection} from '../internal-utils/selection'
+import {getSelectionDomNodes} from '../internal-utils/selection-elements'
 import {fromSlateValue, isEqualToEmptyEditor} from '../internal-utils/values'
+import * as selectors from '../selectors'
 import type {
   EditorSelection,
   OnCopyFn,
@@ -444,14 +447,8 @@ export const PortableTextEditable = forwardRef<
         event.stopPropagation()
         event.preventDefault()
 
-        const position = getEventPosition({
-          snapshot: getEditorSnapshot({
-            editorActorSnapshot: editorActor.getSnapshot(),
-            slateEditorInstance: slateEditor,
-          }),
-          slateEditor,
-          event: event.nativeEvent,
-        })
+        const selection = editorActor.getSnapshot().context.selection
+        const position = selection ? {selection} : undefined
 
         if (!position) {
           console.warn('Could not find position for copy event')
@@ -488,14 +485,8 @@ export const PortableTextEditable = forwardRef<
         event.stopPropagation()
         event.preventDefault()
 
-        const position = getEventPosition({
-          snapshot: getEditorSnapshot({
-            editorActorSnapshot: editorActor.getSnapshot(),
-            slateEditorInstance: slateEditor,
-          }),
-          slateEditor,
-          event: event.nativeEvent,
-        })
+        const selection = editorActor.getSnapshot().context.selection
+        const position = selection ? {selection} : undefined
 
         if (!position) {
           console.warn('Could not find position for cut event')
@@ -544,14 +535,8 @@ export const PortableTextEditable = forwardRef<
             if (!result || !result.insert) {
               debug('No result from custom paste handler, pasting normally')
 
-              const position = getEventPosition({
-                snapshot: getEditorSnapshot({
-                  editorActorSnapshot: editorActor.getSnapshot(),
-                  slateEditorInstance: slateEditor,
-                }),
-                slateEditor,
-                event: event.nativeEvent,
-              })
+              const selection = editorActor.getSnapshot().context.selection
+              const position = selection ? {selection} : undefined
 
               if (!position) {
                 console.warn('Could not find position for paste event')
@@ -610,14 +595,8 @@ export const PortableTextEditable = forwardRef<
         event.preventDefault()
         event.stopPropagation()
 
-        const position = getEventPosition({
-          snapshot: getEditorSnapshot({
-            editorActorSnapshot: editorActor.getSnapshot(),
-            slateEditorInstance: slateEditor,
-          }),
-          slateEditor,
-          event: event.nativeEvent,
-        })
+        const selection = editorActor.getSnapshot().context.selection
+        const position = selection ? {selection} : undefined
 
         if (!position) {
           console.warn('Could not find position for paste event')
@@ -680,10 +659,7 @@ export const PortableTextEditable = forwardRef<
       }
 
       const position = getEventPosition({
-        snapshot: getEditorSnapshot({
-          editorActorSnapshot: editorActor.getSnapshot(),
-          slateEditorInstance: slateEditor,
-        }),
+        schema: editorActor.getSnapshot().context.schema,
         slateEditor,
         event: event.nativeEvent,
       })
@@ -962,10 +938,7 @@ export const PortableTextEditable = forwardRef<
 
       if (!event.isDefaultPrevented() && !event.isPropagationStopped()) {
         const position = getEventPosition({
-          snapshot: getEditorSnapshot({
-            editorActorSnapshot: editorActor.getSnapshot(),
-            slateEditorInstance: slateEditor,
-          }),
+          schema: editorActor.getSnapshot().context.schema,
           slateEditor,
           event: event.nativeEvent,
         })
@@ -975,25 +948,113 @@ export const PortableTextEditable = forwardRef<
           return
         }
 
-        if (ReactEditor.hasTarget(slateEditor, event.target)) {
-          const node = ReactEditor.toSlateNode(slateEditor, event.target)
-          const path = ReactEditor.findPath(slateEditor, node)
-          const voidMatch =
-            (SlateElement.isElement(node) &&
-              Editor.isVoid(slateEditor, node)) ||
-            Editor.void(slateEditor, {at: path, voids: true})
-
-          // If starting a drag on a void node, make sure it is selected
-          // so that it shows up in the selection's fragment.
-          if (voidMatch) {
-            const range = Editor.range(slateEditor, path)
-            Transforms.select(slateEditor, range)
+        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)
         }
 
         editorActor.send({
           type: 'dragstart',
-          origin: position,
+          origin: {
+            selection: dragSelection,
+          },
+          ghost: dragGhost,
         })
 
         editorActor.send({
@@ -1003,7 +1064,9 @@ export const PortableTextEditable = forwardRef<
             originEvent: {
               dataTransfer: event.dataTransfer,
             },
-            position,
+            position: {
+              selection: dragSelection,
+            },
           },
           editor: slateEditor,
         })
@@ -1067,10 +1130,7 @@ export const PortableTextEditable = forwardRef<
 
       if (!event.isDefaultPrevented() && !event.isPropagationStopped()) {
         const position = getEventPosition({
-          snapshot: getEditorSnapshot({
-            editorActorSnapshot: editorActor.getSnapshot(),
-            slateEditorInstance: slateEditor,
-          }),
+          schema: editorActor.getSnapshot().context.schema,
           slateEditor,
           event: event.nativeEvent,
         })
@@ -1104,10 +1164,7 @@ export const PortableTextEditable = forwardRef<
 
       if (!event.isDefaultPrevented() && !event.isPropagationStopped()) {
         const position = getEventPosition({
-          snapshot: getEditorSnapshot({
-            editorActorSnapshot: editorActor.getSnapshot(),
-            slateEditorInstance: slateEditor,
-          }),
+          schema: editorActor.getSnapshot().context.schema,
           slateEditor,
           event: event.nativeEvent,
         })
@@ -1142,10 +1199,7 @@ export const PortableTextEditable = forwardRef<
 
       if (!event.isDefaultPrevented() && !event.isPropagationStopped()) {
         const position = getEventPosition({
-          snapshot: getEditorSnapshot({
-            editorActorSnapshot: editorActor.getSnapshot(),
-            slateEditorInstance: slateEditor,
-          }),
+          schema: editorActor.getSnapshot().context.schema,
           slateEditor,
           event: event.nativeEvent,
         })

package/src/editor/PortableTextEditor.tsx

@@ -27,7 +27,7 @@ import type {
   PortableTextMemberSchemaTypes,
 } from '../types/editor'
 import {Synchronizer} from './components/Synchronizer'
-import {createEditor, type Editor} from './create-editor'
+import {createInternalEditor, type InternalEditor} from './create-editor'
 import {createEditorSchema} from './create-editor-schema'
 import {EditorActorContext} from './editor-actor-context'
 import type {EditorActor} from './editor-machine'
@@ -45,12 +45,12 @@ const debug = debugWithName('component:PortableTextEditor')
  * @deprecated Use `EditorProvider` instead
  */
 export type PortableTextEditorProps<
-  TEditor extends Editor | undefined = undefined,
+  TEditor extends InternalEditor | undefined = undefined,
 > = PropsWithChildren<
-  TEditor extends Editor
+  TEditor extends InternalEditor
     ? {
         /**
-         * @alpha
+         * @internal
          */
         editor: TEditor
       }
@@ -110,7 +110,7 @@ export type PortableTextEditorProps<
  * @deprecated Use `EditorProvider` instead
  */
 export class PortableTextEditor extends Component<
-  PortableTextEditorProps<Editor | undefined>
+  PortableTextEditorProps<InternalEditor | undefined>
 > {
   public static displayName = 'PortableTextEditor'
   /**
@@ -124,7 +124,7 @@ export class PortableTextEditor extends Component<
   /**
    * The editor instance
    */
-  private editor: Editor
+  private editor: InternalEditor
   /*
    * The editor API (currently implemented with Slate).
    */
@@ -134,9 +134,9 @@ export class PortableTextEditor extends Component<
     super(props)
 
     if (props.editor) {
-      this.editor = props.editor as Editor
+      this.editor = props.editor as InternalEditor
     } else {
-      this.editor = createEditor({
+      this.editor = createInternalEditor({
         keyGenerator: props.keyGenerator ?? defaultKeyGenerator,
         schema: props.schemaType,
         initialValue: props.value,

package/src/editor/__tests__/self-solving.test.tsx

@@ -4,7 +4,7 @@ import type {PortableTextBlock, PortableTextSpan} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type ComponentProps, type RefObject} from 'react'
 import {describe, expect, it, vi} from 'vitest'
-import {getTextSelection} from '../../../gherkin-tests/gherkin-step-helpers'
+import {getTextSelection} from '../../internal-utils/text-selection'
 import {PortableTextEditable} from '../Editable'
 import {PortableTextEditor} from '../PortableTextEditor'
 

package/src/editor/components/Element.tsx

@@ -38,7 +38,6 @@ import type {
 import {EditorActorContext} from '../editor-actor-context'
 import {DefaultBlockObject, DefaultInlineObject} from './DefaultObject'
 import {DropIndicator} from './drop-indicator'
-import {useDraggable} from './use-draggable'
 
 const debug = debugWithName('components:Element')
 const debugRenders = false
@@ -90,7 +89,6 @@ export const Element: FunctionComponent<ElementProps> = ({
     false
   const [dragPositionBlock, setDragPositionBlock] =
     useState<EventPositionBlock>()
-  const draggable = useDraggable({element, readOnly, blockRef})
 
   useEffect(() => {
     const behavior = defineBehavior({
@@ -425,7 +423,7 @@ export const Element: FunctionComponent<ElementProps> = ({
       key={element._key}
       {...attributes}
       className={className}
-      {...draggable.draggableProps}
+      draggable={!readOnly}
     >
       {dragPositionBlock === 'start' ? <DropIndicator /> : null}
       {children}

package/src/editor/create-editor.ts

@@ -78,6 +78,9 @@ export type Editor = {
   registerBehavior: (config: {behavior: Behavior}) => () => void
   send: (event: EditorEvent) => void
   on: ActorRef<Snapshot<unknown>, EventObject, EditorEmittedEvent>['on']
+}
+
+export type InternalEditor = Editor & {
   _internal: {
     editable: EditableAPI
     editorActor: EditorActor
@@ -85,21 +88,24 @@ export type Editor = {
   }
 }
 
-export function createEditor(config: EditorConfig): Editor {
+export function createInternalEditor(config: EditorConfig): InternalEditor {
   const editorActor = createActor(editorMachine, {
     input: editorConfigToMachineInput(config),
   })
   editorActor.start()
 
-  return createEditorFromActor(editorActor)
+  return createInternalEditorFromActor(editorActor)
 }
 
-export function useCreateEditor(config: EditorConfig): Editor {
+export function useCreateInternalEditor(config: EditorConfig): InternalEditor {
   const editorActor = useActorRef(editorMachine, {
     input: editorConfigToMachineInput(config),
   })
 
-  return useMemo(() => createEditorFromActor(editorActor), [editorActor])
+  return useMemo(
+    () => createInternalEditorFromActor(editorActor),
+    [editorActor],
+  )
 }
 
 function editorConfigToMachineInput(config: EditorConfig) {
@@ -120,7 +126,9 @@ function editorConfigToMachineInput(config: EditorConfig) {
   } as const
 }
 
-function createEditorFromActor(editorActor: EditorActor): Editor {
+function createInternalEditorFromActor(
+  editorActor: EditorActor,
+): InternalEditor {
   const slateEditor = createSlateEditor({editorActor})
   const editable = createEditableAPI(slateEditor.instance, editorActor)
 

package/src/editor/editor-machine.ts

@@ -16,6 +16,7 @@ import {
   isClipboardBehaviorEvent,
   isCustomBehaviorEvent,
   isDragBehaviorEvent,
+  isInputBehaviorEvent,
   isKeyboardBehaviorEvent,
   isMouseBehaviorEvent,
   type Behavior,
@@ -208,7 +209,11 @@ export type InternalEditorEvent =
   | NamespaceEvent<EditorEmittedEvent, 'notify'>
   | NamespaceEvent<UnsetEvent, 'notify'>
   | SyntheticBehaviorEvent
-  | {type: 'dragstart'; origin: EventPosition; ghost?: HTMLElement}
+  | {
+      type: 'dragstart'
+      origin: Pick<EventPosition, 'selection'>
+      ghost?: HTMLElement
+    }
   | {type: 'dragend'}
   | {type: 'drop'}
 
@@ -243,7 +248,7 @@ export const editorMachine = setup({
       value: Array<PortableTextBlock> | undefined
       internalDrag?: {
         ghost?: HTMLElement
-        origin: EventPosition
+        origin: Pick<EventPosition, 'selection'>
       }
     },
     events: {} as InternalEditorEvent,
@@ -328,9 +333,10 @@ export const editorMachine = setup({
           event.type === 'custom behavior event' ||
           isClipboardBehaviorEvent(event.behaviorEvent) ||
           isDragBehaviorEvent(event.behaviorEvent) ||
+          isInputBehaviorEvent(event.behaviorEvent) ||
           isKeyboardBehaviorEvent(event.behaviorEvent) ||
-          event.behaviorEvent.type === 'deserialize' ||
           isMouseBehaviorEvent(event.behaviorEvent) ||
+          event.behaviorEvent.type === 'deserialize' ||
           event.behaviorEvent.type === 'serialize'
             ? undefined
             : ({
@@ -364,6 +370,10 @@ export const editorMachine = setup({
             )
           }
 
+          if (isInputBehaviorEvent(event.behaviorEvent)) {
+            return behavior.on === 'input.*'
+          }
+
           if (isKeyboardBehaviorEvent(event.behaviorEvent)) {
             return (
               behavior.on === 'keyboard.*' ||

package/src/editor/editor-provider.tsx

@@ -1,7 +1,11 @@
 import React, {useMemo} from 'react'
 import {Slate} from 'slate-react'
 import {Synchronizer} from './components/Synchronizer'
-import {useCreateEditor, type Editor, type EditorConfig} from './create-editor'
+import {
+  useCreateInternalEditor,
+  type Editor,
+  type EditorConfig,
+} from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
 import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
@@ -40,19 +44,19 @@ export type EditorProviderProps = {
  * @group Components
  */
 export function EditorProvider(props: EditorProviderProps) {
-  const editor = useCreateEditor(props.initialConfig)
-  const editorActor = editor._internal.editorActor
-  const slateEditor = editor._internal.slateEditor
+  const internalEditor = useCreateInternalEditor(props.initialConfig)
+  const editorActor = internalEditor._internal.editorActor
+  const slateEditor = internalEditor._internal.slateEditor
   const portableTextEditor = useMemo(
     () =>
       new PortableTextEditor({
-        editor,
+        editor: internalEditor,
       } as unknown as PortableTextEditorProps),
-    [editor],
+    [internalEditor],
   )
 
   return (
-    <EditorContext.Provider value={editor}>
+    <EditorContext.Provider value={internalEditor}>
       <RouteEventsToChanges
         editorActor={editorActor}
         onChange={(change) => {

package/src/editor/editor-selector.ts

@@ -1,6 +1,6 @@
 import {useSelector} from '@xstate/react'
 import type {PortableTextSlateEditor} from '../types/editor'
-import type {Editor} from './create-editor'
+import type {Editor, InternalEditor} from './create-editor'
 import type {EditorActor} from './editor-machine'
 import type {EditorSnapshot} from './editor-snapshot'
 import {getActiveDecorators} from './get-active-decorators'
@@ -45,11 +45,12 @@ export function useEditorSelector<TSelected>(
   compare: (a: TSelected, b: TSelected) => boolean = defaultCompare,
 ) {
   return useSelector(
-    editor._internal.editorActor,
+    (editor as InternalEditor)._internal.editorActor,
     (editorActorSnapshot) => {
       const snapshot = getEditorSnapshot({
         editorActorSnapshot,
-        slateEditorInstance: editor._internal.slateEditor.instance,
+        slateEditorInstance: (editor as InternalEditor)._internal.slateEditor
+          .instance,
       })
 
       return selector(snapshot)

package/src/editor/editor-snapshot.ts

@@ -35,7 +35,7 @@ export type EditorSnapshot = {
     hasTag: HasTag
     internalDrag:
       | {
-          origin: EventPosition
+          origin: Pick<EventPosition, 'selection'>
         }
       | undefined
   }
@@ -58,7 +58,7 @@ export function createEditorSnapshot({
   hasTag: HasTag
   internalDrag:
     | {
-        origin: EventPosition
+        origin: Pick<EventPosition, 'selection'>
       }
     | undefined
 }) {

package/src/editor/plugins/create-with-event-listeners.ts

@@ -114,9 +114,24 @@ export function createWithEventListeners(
       return
     }
 
-    editor.insertData = () => {
-      console.warn('Unexpected call to .insertData(...)')
-      return
+    editor.insertData = (dataTransfer) => {
+      if (isApplyingBehaviorActions(editor)) {
+        throw new Error('Unexpected call to .insertData(...)')
+      }
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'deserialize',
+          originEvent: {
+            type: 'input.*',
+            originEvent: {
+              dataTransfer,
+            },
+          },
+        },
+        editor,
+      })
     }
 
     editor.insertSoftBreak = () => {

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -800,9 +800,8 @@ export const toggleDecoratorActionImplementation: BehaviorActionImplementation<
     decoratorAddActionImplementation({
       context,
       action: {
+        ...action,
         type: 'decorator.add',
-        editor: action.editor,
-        decorator: action.decorator,
       },
     })
   }

package/src/internal-utils/block-keys.ts

@@ -0,0 +1,9 @@
+import type {PortableTextBlock} from '@sanity/types'
+
+export function getBlockKeys(value: Array<PortableTextBlock> | undefined) {
+  if (!value) {
+    return []
+  }
+
+  return value.map((block) => block._key)
+}

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

@@ -0,0 +1,36 @@
+import type {EditorSelection} from '../types/editor'
+
+export function collapseSelection(
+  selection: EditorSelection,
+  direction: 'start' | 'end',
+): EditorSelection {
+  if (!selection) {
+    return selection
+  }
+
+  if (direction === 'start') {
+    return selection.backward
+      ? {
+          anchor: selection.focus,
+          focus: selection.focus,
+          backward: false,
+        }
+      : {
+          anchor: selection.anchor,
+          focus: selection.anchor,
+          backward: false,
+        }
+  }
+
+  return selection.backward
+    ? {
+        anchor: selection.anchor,
+        focus: selection.anchor,
+        backward: false,
+      }
+    : {
+        anchor: selection.focus,
+        focus: selection.focus,
+        backward: false,
+      }
+}

package/src/internal-utils/compound-client-rect.ts

@@ -0,0 +1,28 @@
+export function getCompoundClientRect(nodes: Array<Node>): DOMRect {
+  if (nodes.length === 0) {
+    return new DOMRect(0, 0, 0, 0)
+  }
+
+  const elements = nodes.filter((node) => node instanceof Element)
+
+  const firstRect = elements.at(0)?.getBoundingClientRect()
+
+  if (!firstRect) {
+    return new DOMRect(0, 0, 0, 0)
+  }
+
+  let left = firstRect.left
+  let top = firstRect.top
+  let right = firstRect.right
+  let bottom = firstRect.bottom
+
+  for (let i = 1; i < elements.length; i++) {
+    const rect = elements[i].getBoundingClientRect()
+    left = Math.min(left, rect.left)
+    top = Math.min(top, rect.top)
+    right = Math.max(right, rect.right)
+    bottom = Math.max(bottom, rect.bottom)
+  }
+
+  return new DOMRect(left, top, right - left, bottom - top)
+}