@portabletext/editor 1.50.8 → 1.52.0

package/src/behaviors/behavior.core.dnd.ts

@@ -1,7 +1,176 @@
+import {getCompoundClientRect} from '../internal-utils/compound-client-rect'
+import {getDragSelection} from '../internal-utils/drag-selection'
 import * as selectors from '../selectors'
+import {effect, forward, raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
 export const coreDndBehaviors = [
+  /**
+   * Core Behavior that:
+   * 1. Calculates and selects a "drag selection"
+   * 2. Constructs and sets a drag ghost element
+   * 3. Forwards the dragstart event
+   */
+  defineBehavior({
+    on: 'drag.dragstart',
+    guard: ({snapshot, dom, event}) => {
+      const dragSelection = getDragSelection({
+        snapshot,
+        eventSelection: event.position.selection,
+      })
+      const selectingEntireBlocks = selectors.isSelectingEntireBlocks({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: dragSelection,
+        },
+      })
+      const draggedDomNodes = {
+        blockNodes: dom.getBlockNodes({
+          ...snapshot,
+          context: {
+            ...snapshot.context,
+            selection: dragSelection,
+          },
+        }),
+        childNodes: dom.getChildNodes({
+          ...snapshot,
+          context: {
+            ...snapshot.context,
+            selection: dragSelection,
+          },
+        }),
+      }
+
+      return {
+        dragSelection,
+        draggedDomNodes,
+        selectingEntireBlocks,
+      }
+    },
+    actions: [
+      (
+        {dom, event},
+        {dragSelection, draggedDomNodes, selectingEntireBlocks},
+      ) => {
+        const dragGhost = document.createElement('div')
+
+        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.originEvent.clientX - customGhostRect.left
+            const y = event.originEvent.clientY - customGhostRect.top
+            dragGhost.style.width = `${customGhostRect.width}px`
+            dragGhost.style.height = `${customGhostRect.height}px`
+
+            return [
+              raise({
+                type: 'select',
+                at: dragSelection,
+              }),
+              effect(() => {
+                dom.setDragGhost({
+                  event,
+                  ghost: {
+                    element: dragGhost,
+                    x,
+                    y,
+                  },
+                })
+              }),
+              forward(event),
+            ]
+          } else {
+            const blocksDomRect = getCompoundClientRect(
+              draggedDomNodes.blockNodes,
+            )
+            const x = event.originEvent.clientX - blocksDomRect.left
+            const y = event.originEvent.clientY - blocksDomRect.top
+            dragGhost.style.width = `${blocksDomRect.width}px`
+            dragGhost.style.height = `${blocksDomRect.height}px`
+
+            return [
+              raise({
+                type: 'select',
+                at: dragSelection,
+              }),
+              effect(() => {
+                dom.setDragGhost({
+                  event,
+                  ghost: {element: dragGhost, x, y},
+                })
+              }),
+              forward(event),
+            ]
+          }
+        } 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.originEvent.clientX - childrenDomRect.left
+          const y = event.originEvent.clientY - childrenDomRect.top
+          dragGhost.style.width = `${childrenDomRect.width}px`
+          dragGhost.style.height = `${childrenDomRect.height}px`
+
+          return [
+            raise({
+              type: 'select',
+              at: dragSelection,
+            }),
+            effect(() => {
+              dom.setDragGhost({
+                event,
+                ghost: {element: dragGhost, x, y},
+              })
+            }),
+            forward(event),
+          ]
+        }
+      },
+    ],
+  }),
+
   /**
    * When dragging over the drag origin, we don't want to show the caret in the
    * text.
@@ -9,7 +178,7 @@ export const coreDndBehaviors = [
   defineBehavior({
     on: 'drag.dragover',
     guard: ({snapshot, event}) => {
-      const dragOrigin = snapshot.beta.internalDrag?.origin
+      const dragOrigin = event.dragOrigin
       const draggingOverDragOrigin = dragOrigin
         ? selectors.isOverlappingSelection(event.position.selection)({
             ...snapshot,
@@ -24,4 +193,162 @@ export const coreDndBehaviors = [
     },
     actions: [],
   }),
+
+  /**
+   * If the drop position overlaps the drag origin, then the event should be
+   * cancelled.
+   */
+  defineBehavior({
+    on: 'drag.drop',
+    guard: ({snapshot, event}) => {
+      const dragOrigin = event.dragOrigin
+      const dropPosition = event.position.selection
+      const droppingOnDragOrigin = dragOrigin
+        ? selectors.isOverlappingSelection(dropPosition)({
+            ...snapshot,
+            context: {
+              ...snapshot.context,
+              selection: dragOrigin.selection,
+            },
+          })
+        : false
+      return droppingOnDragOrigin
+    },
+    actions: [],
+  }),
+  /**
+   * If we drop and have access to a drag origin, then we can deserialize
+   * without creating a new selection.
+   */
+  defineBehavior({
+    on: 'drag.drop',
+    guard: ({event}) => event.dragOrigin !== undefined,
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'deserialize',
+          originEvent: event,
+        }),
+      ],
+    ],
+  }),
+  /**
+   * Otherwise, we should to create a new selection.
+   */
+  defineBehavior({
+    on: 'drag.drop',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'select',
+          at: event.position.selection,
+        }),
+        raise({
+          type: 'deserialize',
+          originEvent: event,
+        }),
+      ],
+    ],
+  }),
+
+  /**
+   * Core Behavior that uses the drag origin to mimic a move operation during
+   * internal dragging.
+   */
+  defineBehavior({
+    on: 'deserialization.success',
+    guard: ({snapshot, event}) => {
+      if (
+        event.originEvent.type !== 'drag.drop' ||
+        event.originEvent.dragOrigin === undefined
+      ) {
+        return false
+      }
+
+      const dragOrigin = event.originEvent.dragOrigin
+      const dragSelection = getDragSelection({
+        eventSelection: dragOrigin.selection,
+        snapshot,
+      })
+      const dropPosition = event.originEvent.position.selection
+      const droppingOnDragOrigin = dragOrigin
+        ? selectors.isOverlappingSelection(dropPosition)({
+            ...snapshot,
+            context: {
+              ...snapshot.context,
+              selection: dragSelection,
+            },
+          })
+        : false
+
+      const draggingEntireBlocks = selectors.isSelectingEntireBlocks({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: dragSelection,
+        },
+      })
+
+      const draggedBlocks = selectors.getSelectedBlocks({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: dragSelection,
+        },
+      })
+
+      if (!droppingOnDragOrigin) {
+        return {
+          dropPosition,
+          draggingEntireBlocks,
+          draggedBlocks,
+          dragOrigin,
+          originEvent: event.originEvent,
+        }
+      }
+
+      return false
+    },
+    actions: [
+      (
+        {event},
+        {
+          draggingEntireBlocks,
+          draggedBlocks,
+          dragOrigin,
+          dropPosition,
+          originEvent,
+        },
+      ) => [
+        ...(draggingEntireBlocks
+          ? draggedBlocks.map((block) =>
+              raise({
+                type: 'delete.block',
+                at: block.path,
+              }),
+            )
+          : [
+              raise({
+                type: 'delete',
+                at: dragOrigin.selection,
+              }),
+            ]),
+        raise({
+          type: 'select',
+          at: dropPosition,
+        }),
+        raise({
+          type: 'insert.blocks',
+          blocks: event.data,
+          placement: draggingEntireBlocks
+            ? originEvent.position.block === 'start'
+              ? 'before'
+              : originEvent.position.block === 'end'
+                ? 'after'
+                : 'auto'
+            : 'auto',
+        }),
+      ],
+    ],
+  }),
 ]

package/src/behaviors/behavior.perform-event.ts

@@ -3,6 +3,7 @@ import type {EditorSnapshot} from '../editor/editor-snapshot'
 import {withApplyingBehaviorOperations} from '../editor/with-applying-behavior-operations'
 import {withUndoStep} from '../editor/with-undo-step'
 import {debugWithName} from '../internal-utils/debug'
+import {createEditorDom} from '../internal-utils/selection-elements'
 import {performOperation} from '../operations/behavior.operations'
 import type {PortableTextSlateEditor} from '../types/editor'
 import {abstractBehaviors} from './behavior.abstract'
@@ -38,6 +39,7 @@ export function performEvent({
   schema,
   getSnapshot,
   nativeEvent,
+  sendBack,
 }: {
   mode: 'raise' | 'execute' | 'forward'
   behaviors: Array<Behavior>
@@ -52,6 +54,7 @@ export function performEvent({
         preventDefault: () => void
       }
     | undefined
+  sendBack: (event: {type: 'set drag ghost'; ghost: HTMLElement}) => void
 }) {
   debug(`(${mode}:${eventCategory(event)})`, JSON.stringify(event, null, 2))
 
@@ -135,6 +138,7 @@ export function performEvent({
         eventBehavior.guard({
           snapshot: guardSnapshot,
           event,
+          dom: createEditorDom(sendBack, editor),
         })
     } catch (error) {
       console.error(
@@ -162,6 +166,7 @@ export function performEvent({
           {
             snapshot: actionsSnapshot,
             event,
+            dom: createEditorDom(sendBack, editor),
           },
           shouldRun,
         )
@@ -215,6 +220,7 @@ export function performEvent({
                 schema,
                 getSnapshot,
                 nativeEvent,
+                sendBack,
               })
 
               continue
@@ -233,6 +239,7 @@ export function performEvent({
                 schema,
                 getSnapshot,
                 nativeEvent,
+                sendBack,
               })
 
               continue
@@ -252,6 +259,7 @@ export function performEvent({
               schema,
               getSnapshot,
               nativeEvent: undefined,
+              sendBack,
             })
           }
         })
@@ -291,6 +299,7 @@ export function performEvent({
             schema,
             getSnapshot,
             nativeEvent,
+            sendBack,
           })
 
           continue
@@ -309,6 +318,7 @@ export function performEvent({
             schema,
             getSnapshot,
             nativeEvent,
+            sendBack,
           })
 
           continue

package/src/behaviors/behavior.types.action.ts

@@ -1,4 +1,5 @@
 import type {EditorSnapshot} from '../editor/editor-snapshot'
+import type {EditorDom} from '../internal-utils/selection-elements'
 import type {PickFromUnion} from '../type-utils'
 import type {
   CustomBehaviorEvent,
@@ -70,6 +71,7 @@ export type BehaviorActionSet<TBehaviorEvent, TGuardResponse> = (
   payload: {
     snapshot: EditorSnapshot
     event: TBehaviorEvent
+    dom: EditorDom
   },
   guardResponse: TGuardResponse,
 ) => Array<BehaviorAction>

package/src/behaviors/behavior.types.event.ts

@@ -337,6 +337,7 @@ type AbstractBehaviorEvent =
       type: StrictExtract<SyntheticBehaviorEventType, 'insert.blocks'>
       blocks: Array<BlockWithOptionalKey>
       placement: InsertPlacement
+      select?: 'start' | 'end' | 'none'
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'insert.break'>
@@ -462,6 +463,8 @@ type DragBehaviorEvent =
   | {
       type: StrictExtract<NativeBehaviorEventType, 'drag.dragstart'>
       originEvent: {
+        clientX: number
+        clientY: number
         dataTransfer: DataTransfer
       }
       position: Pick<EventPosition, 'selection'>
@@ -490,6 +493,7 @@ type DragBehaviorEvent =
       originEvent: {
         dataTransfer: DataTransfer
       }
+      dragOrigin?: Pick<EventPosition, 'selection'>
       position: EventPosition
     }
   | {
@@ -497,6 +501,7 @@ type DragBehaviorEvent =
       originEvent: {
         dataTransfer: DataTransfer
       }
+      dragOrigin?: Pick<EventPosition, 'selection'>
       position: EventPosition
     }
   | {

package/src/behaviors/behavior.types.guard.ts

@@ -1,4 +1,5 @@
 import type {EditorSnapshot} from '../editor/editor-snapshot'
+import type {EditorDom} from '../internal-utils/selection-elements'
 
 /**
  * @beta
@@ -6,4 +7,5 @@ import type {EditorSnapshot} from '../editor/editor-snapshot'
 export type BehaviorGuard<TBehaviorEvent, TGuardResponse> = (payload: {
   snapshot: EditorSnapshot
   event: TBehaviorEvent
+  dom: EditorDom
 }) => TGuardResponse | false

package/src/converters/converter.portable-text.ts

@@ -5,8 +5,7 @@ import {defineConverter} from './converter.types'
 export const converterPortableText = defineConverter({
   mimeType: 'application/x-portable-text',
   serialize: ({snapshot, event}) => {
-    const selection =
-      snapshot.beta.internalDrag?.origin.selection ?? snapshot.context.selection
+    const selection = snapshot.context.selection
 
     if (!selection) {
       return {
@@ -57,11 +56,7 @@ export const converterPortableText = defineConverter({
         context: snapshot.context,
         block,
         options: {
-          /**
-           * If we are dragging internally then we would like to keep the
-           * dropped portable text as is.
-           */
-          refreshKeys: !snapshot.beta.hasTag?.('dragging internally'),
+          refreshKeys: true,
           validateFields: false,
         },
       })

package/src/converters/converter.text-html.ts

@@ -12,9 +12,7 @@ export function createConverterTextHtml(
   return defineConverter({
     mimeType: 'text/html',
     serialize: ({snapshot, event}) => {
-      const selection =
-        snapshot.beta.internalDrag?.origin.selection ??
-        snapshot.context.selection
+      const selection = snapshot.context.selection
 
       if (!selection) {
         return {

package/src/converters/converter.text-plain.ts

@@ -11,9 +11,7 @@ export function createConverterTextPlain(
   return defineConverter({
     mimeType: 'text/plain',
     serialize: ({snapshot, event}) => {
-      const selection =
-        snapshot.beta.internalDrag?.origin.selection ??
-        snapshot.context.selection
+      const selection = snapshot.context.selection
 
       if (!selection) {
         return {
@@ -41,7 +39,7 @@ export function createConverterTextPlain(
                   return child.text
                 }
 
-                return snapshot.beta.hasTag('dragging internally')
+                return event.originEvent === 'drag.dragstart'
                   ? `[${
                       snapshot.context.schema.inlineObjects.find(
                         (inlineObjectType) =>
@@ -53,7 +51,7 @@ export function createConverterTextPlain(
               .join('')
           }
 
-          return snapshot.beta.hasTag('dragging internally')
+          return event.originEvent === 'drag.dragstart'
             ? `[${
                 snapshot.context.schema.blockObjects.find(
                   (blockObjectType) => blockObjectType.name === block._type,