@portabletext/editor 1.36.6 → 1.38.0

package/src/behaviors/behavior.default.ts

@@ -129,19 +129,7 @@ const raiseDeserializationSuccessOrFailure = defineBehavior({
       raise({
         ...deserializeEvent,
         dataTransfer: event.dataTransfer,
-      }),
-    ],
-  ],
-})
-
-const raiseInsertBlocks = defineBehavior({
-  on: 'deserialization.success',
-  actions: [
-    ({event}) => [
-      raise({
-        type: 'insert.blocks',
-        blocks: event.data,
-        placement: 'auto',
+        originEvent: event.originEvent,
       }),
     ],
   ],
@@ -155,7 +143,13 @@ const raiseSerializationSuccessOrFailure = defineBehavior({
     }
 
     const serializeEvents = snapshot.context.converters.map((converter) =>
-      converter.serialize({snapshot, event}),
+      converter.serialize({
+        snapshot,
+        event: {
+          ...event,
+          originEvent: event.originEvent.type,
+        },
+      }),
     )
 
     if (serializeEvents.length === 0) {
@@ -166,30 +160,246 @@ const raiseSerializationSuccessOrFailure = defineBehavior({
   },
   actions: [
     ({event}, serializeEvents) =>
-      serializeEvents.map((serializeEvent) =>
-        raise({
+      serializeEvents.map((serializeEvent) => {
+        return raise({
           ...serializeEvent,
+          originEvent: event.originEvent,
           dataTransfer: event.dataTransfer,
-        }),
-      ),
-  ],
-})
-
-const raiseDataTransferSet = defineBehavior({
-  on: 'serialization.success',
-  actions: [
-    ({event}) => [
-      raise({
-        type: 'data transfer.set',
-        data: event.data,
-        dataTransfer: event.dataTransfer,
-        mimeType: event.mimeType,
+        })
       }),
-    ],
   ],
 })
 
 export const defaultBehaviors = [
+  defineBehavior({
+    on: 'copy',
+    guard: ({snapshot}) => {
+      const focusSpan = selectors.getFocusSpan(snapshot)
+      const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
+
+      return focusSpan && selectionCollapsed
+    },
+    actions: [() => [{type: 'noop'}]],
+  }),
+  defineBehavior({
+    on: 'copy',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'serialize',
+          dataTransfer: event.data,
+          originEvent: event,
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'cut',
+    guard: ({snapshot}) => {
+      const focusSpan = selectors.getFocusSpan(snapshot)
+      const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
+
+      return focusSpan && selectionCollapsed
+    },
+    actions: [() => [{type: 'noop'}]],
+  }),
+  defineBehavior({
+    on: 'cut',
+    guard: ({snapshot}) => {
+      return snapshot.context.selection
+        ? {
+            selection: snapshot.context.selection,
+          }
+        : false
+    },
+    actions: [
+      ({event}, {selection}) => [
+        raise({
+          type: 'serialize',
+          dataTransfer: event.dataTransfer,
+          originEvent: event,
+        }),
+        raise({
+          type: 'delete',
+          selection,
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'drag.dragstart',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'serialize',
+          dataTransfer: event.dataTransfer,
+          originEvent: event,
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'serialization.success',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'data transfer.set',
+          data: event.data,
+          dataTransfer: event.dataTransfer,
+          mimeType: event.mimeType,
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'drag.drop',
+    guard: ({snapshot, event}) => {
+      const dragOrigin = snapshot.beta.internalDrag?.origin
+      const dropPosition = event.position.selection
+      const droppingOnDragOrigin = dragOrigin
+        ? selectors.isOverlappingSelection(dropPosition)({
+            ...snapshot,
+            context: {
+              ...snapshot.context,
+              selection: dragOrigin.selection,
+            },
+          })
+        : false
+      return droppingOnDragOrigin
+    },
+    actions: [() => [{type: 'noop'}]],
+  }),
+  defineBehavior({
+    on: 'drag.drop',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'deserialize',
+          dataTransfer: event.dataTransfer,
+          originEvent: event,
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'deserialization.success',
+    guard: ({snapshot, event}) => {
+      if (
+        event.originEvent.type !== 'drag.drop' ||
+        snapshot.beta.internalDrag === undefined
+      ) {
+        return false
+      }
+
+      const dragOrigin = snapshot.beta.internalDrag.origin
+      const dropPosition = event.originEvent.position.selection
+      const droppingOnDragOrigin = dragOrigin
+        ? selectors.isOverlappingSelection(dropPosition)({
+            ...snapshot,
+            context: {
+              ...snapshot.context,
+              selection: dragOrigin.selection,
+            },
+          })
+        : false
+
+      const draggingEntireBlocks = selectors.isSelectingEntireBlocks({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: dragOrigin.selection,
+        },
+      })
+
+      const draggedBlocks = selectors.getSelectedBlocks({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: dragOrigin.selection,
+        },
+      })
+
+      if (!droppingOnDragOrigin) {
+        return {draggingEntireBlocks, draggedBlocks, dragOrigin}
+      }
+
+      return false
+    },
+    actions: [
+      ({event}, {draggingEntireBlocks, draggedBlocks, dragOrigin}) => [
+        raise({
+          type: 'insert.blocks',
+          blocks: event.data,
+          placement: draggingEntireBlocks
+            ? event.originEvent.position.block === 'start'
+              ? 'before'
+              : event.originEvent.position.block === 'end'
+                ? 'after'
+                : 'auto'
+            : 'auto',
+        }),
+        ...(draggingEntireBlocks
+          ? draggedBlocks.map((block) =>
+              raise({
+                type: 'delete.block',
+                blockPath: block.path,
+              }),
+            )
+          : [
+              raise({
+                type: 'delete',
+                selection: dragOrigin.selection,
+              }),
+            ]),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'deserialization.success',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'insert.blocks',
+          blocks: event.data,
+          placement: 'auto',
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'paste',
+    guard: ({snapshot}) => {
+      return snapshot.context.selection &&
+        selectors.isSelectionExpanded(snapshot)
+        ? {selection: snapshot.context.selection}
+        : false
+    },
+    actions: [
+      ({event}, {selection}) => [
+        raise({
+          type: 'delete',
+          selection,
+        }),
+        raise({
+          type: 'deserialize',
+          dataTransfer: event.data,
+          originEvent: event,
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'paste',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'deserialize',
+          dataTransfer: event.data,
+          originEvent: event,
+        }),
+      ],
+    ],
+  }),
   toggleAnnotationOff,
   toggleAnnotationOn,
   toggleDecoratorOff,
@@ -199,8 +409,6 @@ export const defaultBehaviors = [
   toggleStyleOff,
   toggleStyleOn,
   raiseDeserializationSuccessOrFailure,
-  raiseInsertBlocks,
   raiseSerializationSuccessOrFailure,
-  raiseDataTransferSet,
   raiseInsertSoftBreak,
 ]

package/src/behaviors/behavior.types.ts

@@ -7,6 +7,7 @@ import type {TextUnit} from 'slate'
 import type {TextInsertTextOptions} from 'slate/dist/interfaces/transforms/text'
 import type {ConverterEvent} from '../converters/converter.types'
 import type {EditorContext, EditorSnapshot} from '../editor/editor-snapshot'
+import type {EventPosition} from '../internal-utils/event-position'
 import type {MIMEType} from '../internal-utils/mime-type'
 import type {OmitFromUnion, PickFromUnion} from '../type-utils'
 import type {BlockOffset} from '../types/block-offset'
@@ -101,11 +102,11 @@ export type SyntheticBehaviorEvent =
   | {
       type: 'insert.blocks'
       blocks: Array<PortableTextBlock>
-      placement: 'auto' | 'after' | 'before'
+      placement: InsertPlacement
     }
   | {
       type: 'insert.block object'
-      placement: 'auto' | 'after' | 'before'
+      placement: InsertPlacement
       blockObject: {
         name: string
         value?: {[prop: string]: unknown}
@@ -127,7 +128,8 @@ export type SyntheticBehaviorEvent =
   | {
       type: 'insert.block'
       block: PortableTextBlock
-      placement: 'auto' | 'after' | 'before'
+      placement: InsertPlacement
+      select?: 'start' | 'end' | 'none'
     }
   | {
       type: 'insert.span'
@@ -145,7 +147,7 @@ export type SyntheticBehaviorEvent =
     }
   | {
       type: 'insert.text block'
-      placement: 'auto' | 'after' | 'before'
+      placement: InsertPlacement
       textBlock?: {
         children?: PortableTextTextBlock['children']
       }
@@ -181,9 +183,11 @@ export type SyntheticBehaviorEvent =
     }
   | {
       type: 'select.previous block'
+      select?: 'start' | 'end'
     }
   | {
       type: 'select.next block'
+      select?: 'start' | 'end'
     }
   | {
       type: 'style.add'
@@ -200,11 +204,117 @@ export type SyntheticBehaviorEvent =
   | (PickFromUnion<
       ConverterEvent,
       'type',
-      | 'deserialization.failure'
-      | 'deserialization.success'
-      | 'serialization.failure'
-      | 'serialization.success'
-    > & {dataTransfer: DataTransfer})
+      'deserialization.failure' | 'deserialization.success'
+    > & {
+      dataTransfer: DataTransfer
+      originEvent: Omit<
+        PickFromUnion<NativeBehaviorEvent, 'type', 'drag.drop' | 'paste'>,
+        'dataTransfer'
+      >
+    })
+  | {
+      type: 'serialization.success'
+      mimeType: MIMEType
+      data: string
+      dataTransfer: DataTransfer
+      originEvent: Omit<
+        PickFromUnion<
+          NativeBehaviorEvent,
+          'type',
+          'copy' | 'cut' | 'drag.dragstart'
+        >,
+        'dataTransfer'
+      >
+    }
+  | {
+      type: 'serialization.failure'
+      mimeType: MIMEType
+      reason: string
+      dataTransfer: DataTransfer
+      originEvent: Omit<
+        PickFromUnion<
+          NativeBehaviorEvent,
+          'type',
+          'copy' | 'cut' | 'drag.dragstart'
+        >,
+        'dataTransfer'
+      >
+    }
+
+export type InsertPlacement = 'auto' | 'after' | 'before'
+
+type DragBehaviorEvent =
+  | {
+      type: 'drag.dragstart'
+      dataTransfer: DataTransfer
+      position: EventPosition
+    }
+  | {
+      type: 'drag.drag'
+      dataTransfer: DataTransfer
+    }
+  | {
+      type: 'drag.dragend'
+      dataTransfer: DataTransfer
+    }
+  | {
+      type: 'drag.dragenter'
+      dataTransfer: DataTransfer
+      position: EventPosition
+    }
+  | {
+      type: 'drag.dragover'
+      dataTransfer: DataTransfer
+      position: EventPosition
+    }
+  | {
+      type: 'drag.drop'
+      dataTransfer: DataTransfer
+      position: EventPosition
+    }
+  | {
+      type: 'drag.dragleave'
+      dataTransfer: DataTransfer
+    }
+
+export function isDragBehaviorEvent(
+  event: BehaviorEvent,
+): event is DragBehaviorEvent {
+  return event.type.startsWith('drag.')
+}
+
+export type DataBehaviorEvent =
+  | {
+      type: 'deserialize'
+      dataTransfer: DataTransfer
+      originEvent: Omit<
+        PickFromUnion<NativeBehaviorEvent, 'type', 'drag.drop' | 'paste'>,
+        'dataTransfer'
+      >
+    }
+  | {
+      type: 'serialize'
+      dataTransfer: DataTransfer
+      originEvent: Omit<
+        PickFromUnion<
+          NativeBehaviorEvent,
+          'type',
+          'copy' | 'cut' | 'drag.dragstart'
+        >,
+        'dataTransfer'
+      >
+    }
+
+export type MouseBehaviorEvent = {
+  type: 'mouse.click'
+  position: EventPosition
+}
+
+export function isMouseBehaviorEvent(
+  event: BehaviorEvent,
+): event is MouseBehaviorEvent {
+  return event.type.startsWith('mouse.')
+}
 
 /**
  * @beta
@@ -213,10 +323,12 @@ export type NativeBehaviorEvent =
   | {
       type: 'copy'
       data: DataTransfer
+      position: EventPosition
     }
   | {
-      type: 'deserialize'
+      type: 'cut'
       dataTransfer: DataTransfer
+      position: EventPosition
     }
   | {
       type: 'key.down'
@@ -232,15 +344,13 @@ export type NativeBehaviorEvent =
         'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
       >
     }
+  | MouseBehaviorEvent
   | {
       type: 'paste'
       data: DataTransfer
+      position: EventPosition
     }
-  | {
-      type: 'serialize'
-      originEvent: 'copy' | 'cut' | 'drag' | 'unknown'
-      dataTransfer: DataTransfer
-    }
+  | DragBehaviorEvent
 
 /**
  * @beta
@@ -266,7 +376,7 @@ export type BehaviorAction =
   | SyntheticBehaviorEvent
   | {
       type: 'raise'
-      event: SyntheticBehaviorEvent | CustomBehaviorEvent
+      event: DataBehaviorEvent | SyntheticBehaviorEvent | CustomBehaviorEvent
     }
   | {
       type: 'noop'
@@ -288,7 +398,7 @@ export type InternalBehaviorAction = OmitFromUnion<
  * @beta
  */
 export function raise(
-  event: SyntheticBehaviorEvent | CustomBehaviorEvent,
+  event: DataBehaviorEvent | SyntheticBehaviorEvent | CustomBehaviorEvent,
 ): PickFromUnion<BehaviorAction, 'type', 'raise'> {
   return {type: 'raise', event}
 }
@@ -298,9 +408,11 @@ export function raise(
  */
 export type BehaviorEvent =
   | SyntheticBehaviorEvent
+  | DataBehaviorEvent
   | NativeBehaviorEvent
   | CustomBehaviorEvent
   | {type: '*'}
+  | {type: 'drag.*'}
 
 /**
  * @beta
@@ -310,7 +422,9 @@ export type Behavior<
   TGuardResponse = true,
   TBehaviorEvent extends BehaviorEvent = TBehaviorEventType extends '*'
     ? BehaviorEvent
-    : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
+    : TBehaviorEventType extends 'drag.*'
+      ? DragBehaviorEvent
+      : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
 > = {
   /**
    * The internal editor event that triggers this behavior.
@@ -388,7 +502,9 @@ export function defineBehavior<
       ? CustomBehaviorEvent<TPayload, TType>
       : TBehaviorEventType extends '*'
         ? OmitFromUnion<BehaviorEvent, 'type', '*'>
-        : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>
+        : TBehaviorEventType extends `drag.*`
+          ? DragBehaviorEvent
+          : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>
   >,
 ): Behavior
 export function defineBehavior<
@@ -400,7 +516,9 @@ export function defineBehavior<
     ? CustomBehaviorEvent<TPayload, TType>
     : TBehaviorEventType extends '*'
       ? OmitFromUnion<BehaviorEvent, 'type', '*'>
-      : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
+      : TBehaviorEventType extends `drag.*`
+        ? DragBehaviorEvent
+        : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
 >(
   behavior: Behavior<TBehaviorEventType, TGuardResponse, TBehaviorEvent>,
 ): Behavior {

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

@@ -5,7 +5,10 @@ import {defineConverter} from './converter.types'
 export const converterPortableText = defineConverter({
   mimeType: 'application/x-portable-text',
   serialize: ({snapshot, event}) => {
-    if (!snapshot.context.selection) {
+    const selection =
+      snapshot.beta.internalDrag?.origin.selection ?? snapshot.context.selection
+
+    if (!selection) {
       return {
         type: 'serialization.failure',
         mimeType: 'application/x-portable-text',
@@ -16,7 +19,7 @@ export const converterPortableText = defineConverter({
 
     const blocks = sliceBlocks({
       blocks: snapshot.context.value,
-      selection: snapshot.context.selection,
+      selection,
     })
 
     return {

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

@@ -110,7 +110,7 @@ describe(converterTextHtml.serialize.name, () => {
         }),
         event: {
           type: 'serialize',
-          originEvent: 'unknown',
+          originEvent: 'copy',
         },
       }),
     ).toMatchObject({
@@ -133,7 +133,7 @@ describe(converterTextHtml.serialize.name, () => {
         }),
         event: {
           type: 'serialize',
-          originEvent: 'unknown',
+          originEvent: 'copy',
         },
       }),
     ).toMatchObject({
@@ -164,7 +164,7 @@ describe(converterTextHtml.serialize.name, () => {
         }),
         event: {
           type: 'serialize',
-          originEvent: 'unknown',
+          originEvent: 'copy',
         },
       }),
     ).toMatchObject({
@@ -222,7 +222,7 @@ describe(converterTextHtml.serialize.name, () => {
         }),
         event: {
           type: 'serialize',
-          originEvent: 'unknown',
+          originEvent: 'copy',
         },
       }),
     ).toMatchObject({

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

@@ -7,7 +7,10 @@ import {defineConverter} from './converter.types'
 export const converterTextHtml = defineConverter({
   mimeType: 'text/html',
   serialize: ({snapshot, event}) => {
-    if (!snapshot.context.selection) {
+    const selection =
+      snapshot.beta.internalDrag?.origin.selection ?? snapshot.context.selection
+
+    if (!selection) {
       return {
         type: 'serialization.failure',
         mimeType: 'text/html',
@@ -18,7 +21,7 @@ export const converterTextHtml = defineConverter({
 
     const blocks = sliceBlocks({
       blocks: snapshot.context.value,
-      selection: snapshot.context.selection,
+      selection,
     })
 
     const html = toHTML(blocks, {

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

@@ -100,7 +100,7 @@ test(converterTextPlain.serialize.name, () => {
       }),
       event: {
         type: 'serialize',
-        originEvent: 'unknown',
+        originEvent: 'copy',
       },
     }),
   ).toMatchObject({
@@ -124,7 +124,7 @@ test(converterTextPlain.serialize.name, () => {
       }),
       event: {
         type: 'serialize',
-        originEvent: 'unknown',
+        originEvent: 'copy',
       },
     }),
   ).toMatchObject({
@@ -148,7 +148,7 @@ test(converterTextPlain.serialize.name, () => {
       }),
       event: {
         type: 'serialize',
-        originEvent: 'unknown',
+        originEvent: 'copy',
       },
     }),
   ).toMatchObject({
@@ -178,7 +178,7 @@ test(converterTextPlain.serialize.name, () => {
       }),
       event: {
         type: 'serialize',
-        originEvent: 'unknown',
+        originEvent: 'copy',
       },
     }),
   ).toMatchObject({
@@ -202,7 +202,7 @@ test(converterTextPlain.serialize.name, () => {
       }),
       event: {
         type: 'serialize',
-        originEvent: 'unknown',
+        originEvent: 'copy',
       },
     }),
   ).toMatchObject({
@@ -232,7 +232,7 @@ test(converterTextPlain.serialize.name, () => {
       }),
       event: {
         type: 'serialize',
-        originEvent: 'unknown',
+        originEvent: 'copy',
       },
     }),
   ).toMatchObject({