@portabletext/editor 1.51.0 → 1.52.0

package/lib/plugins/index.d.cts

@@ -266,6 +266,7 @@ declare type BehaviorActionSet<TBehaviorEvent, TGuardResponse> = (
   payload: {
     snapshot: EditorSnapshot
     event: TBehaviorEvent
+    dom: EditorDom
   },
   guardResponse: TGuardResponse,
 ) => Array<BehaviorAction>
@@ -289,6 +290,7 @@ declare type BehaviorEventTypeNamespace =
 declare type BehaviorGuard<TBehaviorEvent, TGuardResponse> = (payload: {
   snapshot: EditorSnapshot
   event: TBehaviorEvent
+  dom: EditorDom
 }) => TGuardResponse | false
 
 /**
@@ -423,6 +425,8 @@ declare type DragBehaviorEvent =
   | {
       type: StrictExtract<NativeBehaviorEventType, 'drag.dragstart'>
       originEvent: {
+        clientX: number
+        clientY: number
         dataTransfer: DataTransfer
       }
       position: Pick<EventPosition, 'selection'>
@@ -451,6 +455,7 @@ declare type DragBehaviorEvent =
       originEvent: {
         dataTransfer: DataTransfer
       }
+      dragOrigin?: Pick<EventPosition, 'selection'>
       position: EventPosition
     }
   | {
@@ -458,6 +463,7 @@ declare type DragBehaviorEvent =
       originEvent: {
         dataTransfer: DataTransfer
       }
+      dragOrigin?: Pick<EventPosition, 'selection'>
       position: EventPosition
     }
   | {
@@ -492,6 +498,26 @@ declare type EditorContext = {
   value: Array<PortableTextBlock>
 }
 
+declare 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
+}
+
 /**
  * @public
  */
@@ -648,11 +674,6 @@ declare type EditorSnapshot = {
   beta: {
     activeAnnotations: Array<string>
     activeDecorators: Array<string>
-    internalDrag:
-      | {
-          origin: Pick<EventPosition, 'selection'>
-        }
-      | undefined
   }
 }
 

package/lib/plugins/index.d.ts

@@ -266,6 +266,7 @@ declare type BehaviorActionSet<TBehaviorEvent, TGuardResponse> = (
   payload: {
     snapshot: EditorSnapshot
     event: TBehaviorEvent
+    dom: EditorDom
   },
   guardResponse: TGuardResponse,
 ) => Array<BehaviorAction>
@@ -289,6 +290,7 @@ declare type BehaviorEventTypeNamespace =
 declare type BehaviorGuard<TBehaviorEvent, TGuardResponse> = (payload: {
   snapshot: EditorSnapshot
   event: TBehaviorEvent
+  dom: EditorDom
 }) => TGuardResponse | false
 
 /**
@@ -423,6 +425,8 @@ declare type DragBehaviorEvent =
   | {
       type: StrictExtract<NativeBehaviorEventType, 'drag.dragstart'>
       originEvent: {
+        clientX: number
+        clientY: number
         dataTransfer: DataTransfer
       }
       position: Pick<EventPosition, 'selection'>
@@ -451,6 +455,7 @@ declare type DragBehaviorEvent =
       originEvent: {
         dataTransfer: DataTransfer
       }
+      dragOrigin?: Pick<EventPosition, 'selection'>
       position: EventPosition
     }
   | {
@@ -458,6 +463,7 @@ declare type DragBehaviorEvent =
       originEvent: {
         dataTransfer: DataTransfer
       }
+      dragOrigin?: Pick<EventPosition, 'selection'>
       position: EventPosition
     }
   | {
@@ -492,6 +498,26 @@ declare type EditorContext = {
   value: Array<PortableTextBlock>
 }
 
+declare 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
+}
+
 /**
  * @public
  */
@@ -648,11 +674,6 @@ declare type EditorSnapshot = {
   beta: {
     activeAnnotations: Array<string>
     activeDecorators: Array<string>
-    internalDrag:
-      | {
-          origin: Pick<EventPosition, 'selection'>
-        }
-      | undefined
   }
 }
 

package/lib/selectors/index.d.cts

@@ -184,23 +184,9 @@ declare type EditorSnapshot = {
   beta: {
     activeAnnotations: Array<string>
     activeDecorators: Array<string>
-    internalDrag:
-      | {
-          origin: Pick<EventPosition, 'selection'>
-        }
-      | undefined
   }
 }
 
-declare type EventPosition = {
-  block: 'start' | 'end'
-  /**
-   * Did the event origin from the editor DOM node itself or from a child node?
-   */
-  isEditor: boolean
-  selection: NonNullable<EditorSelection>
-}
-
 /**
  * @public
  */

package/lib/selectors/index.d.ts

@@ -184,23 +184,9 @@ declare type EditorSnapshot = {
   beta: {
     activeAnnotations: Array<string>
     activeDecorators: Array<string>
-    internalDrag:
-      | {
-          origin: Pick<EventPosition, 'selection'>
-        }
-      | undefined
   }
 }
 
-declare type EventPosition = {
-  block: 'start' | 'end'
-  /**
-   * Did the event origin from the editor DOM node itself or from a child node?
-   */
-  isEditor: boolean
-  selection: NonNullable<EditorSelection>
-}
-
 /**
  * @public
  */

package/lib/utils/index.d.cts

@@ -242,23 +242,9 @@ declare type EditorSnapshot = {
   beta: {
     activeAnnotations: Array<string>
     activeDecorators: Array<string>
-    internalDrag:
-      | {
-          origin: Pick<EventPosition, 'selection'>
-        }
-      | undefined
   }
 }
 
-declare type EventPosition = {
-  block: 'start' | 'end'
-  /**
-   * Did the event origin from the editor DOM node itself or from a child node?
-   */
-  isEditor: boolean
-  selection: NonNullable<EditorSelection>
-}
-
 /**
  * @public
  */

package/lib/utils/index.d.ts

@@ -242,23 +242,9 @@ declare type EditorSnapshot = {
   beta: {
     activeAnnotations: Array<string>
     activeDecorators: Array<string>
-    internalDrag:
-      | {
-          origin: Pick<EventPosition, 'selection'>
-        }
-      | undefined
   }
 }
 
-declare type EventPosition = {
-  block: 'start' | 'end'
-  /**
-   * Did the event origin from the editor DOM node itself or from a child node?
-   */
-  isEditor: boolean
-  selection: NonNullable<EditorSelection>
-}
-
 /**
  * @public
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.51.0",
+  "version": "1.52.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -80,8 +80,8 @@
     "slate-react": "0.114.2",
     "use-effect-event": "^2.0.0",
     "xstate": "^5.19.4",
-    "@portabletext/patches": "1.1.4",
-    "@portabletext/block-tools": "1.1.29"
+    "@portabletext/block-tools": "1.1.29",
+    "@portabletext/patches": "1.1.4"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",

package/src/behaviors/behavior.abstract.delete.ts

@@ -80,7 +80,6 @@ export const abstractDeleteBehaviors = [
         beta: {
           activeAnnotations: [],
           activeDecorators: [],
-          internalDrag: undefined,
         },
         context: {
           converters: [],

package/src/behaviors/behavior.abstract.ts

@@ -198,120 +198,7 @@ export const abstractBehaviors = [
       ],
     ],
   }),
-  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: [],
-  }),
-  defineBehavior({
-    on: 'drag.drop',
-    actions: [
-      ({event}) => [
-        raise({
-          type: 'select',
-          at: event.position.selection,
-        }),
-        raise({
-          type: 'deserialize',
-          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,
-          originEvent: event.originEvent,
-        }
-      }
-
-      return false
-    },
-    actions: [
-      (
-        {event},
-        {draggingEntireBlocks, draggedBlocks, dragOrigin, originEvent},
-      ) => [
-        ...(draggingEntireBlocks
-          ? draggedBlocks.map((block) =>
-              raise({
-                type: 'delete.block',
-                at: block.path,
-              }),
-            )
-          : [
-              raise({
-                type: 'delete',
-                at: dragOrigin.selection,
-              }),
-            ]),
-        raise({
-          type: 'insert.blocks',
-          blocks: event.data,
-          placement: draggingEntireBlocks
-            ? originEvent.position.block === 'start'
-              ? 'before'
-              : originEvent.position.block === 'end'
-                ? 'after'
-                : 'auto'
-            : 'auto',
-        }),
-      ],
-    ],
-  }),
   /**
    * If we are pasting text/plain into a text block then we can probably
    * assume that the intended behavior is that the pasted text inherits

package/src/behaviors/behavior.core.block-element.ts

@@ -1,3 +1,4 @@
+import {getDragSelection} from '../internal-utils/drag-selection'
 import type {EventPositionBlock} from '../internal-utils/event-position'
 import {corePriority} from '../priority/priority.core'
 import {createEditorPriority} from '../priority/priority.types'
@@ -31,17 +32,22 @@ export function createCoreBlockElementBehaviorsConfig({
             return false
           }
 
-          const dragOrigin = snapshot.beta.internalDrag?.origin
+          const dragOrigin = event.dragOrigin
 
           if (!dragOrigin) {
             return false
           }
 
+          const dragSelection = getDragSelection({
+            eventSelection: dragOrigin.selection,
+            snapshot,
+          })
+
           const draggedBlocks = selectors.getSelectedBlocks({
             ...snapshot,
             context: {
               ...snapshot.context,
-              selection: dragOrigin.selection,
+              selection: dragSelection,
             },
           })
 
@@ -55,7 +61,7 @@ export function createCoreBlockElementBehaviorsConfig({
             ...snapshot,
             context: {
               ...snapshot.context,
-              selection: dragOrigin.selection,
+              selection: dragSelection,
             },
           })