@portabletext/editor 1.39.0 → 1.39.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.39.0",
+  "version": "1.39.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -79,13 +79,13 @@
     "slate-react": "0.112.1",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.2",
-    "@portabletext/block-tools": "1.1.13",
-    "@portabletext/patches": "1.1.3"
+    "@portabletext/patches": "1.1.3",
+    "@portabletext/block-tools": "1.1.13"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",
     "@sanity/diff-match-patch": "^3.2.0",
-    "@sanity/pkg-utils": "^7.0.4",
+    "@sanity/pkg-utils": "^7.1.0",
     "@sanity/schema": "^3.79.0",
     "@sanity/types": "^3.79.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -108,7 +108,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "rxjs": "^7.8.2",
-    "typescript": "5.7.3",
+    "typescript": "5.8.2",
     "vite": "^6.2.0",
     "vitest": "^3.0.8",
     "vitest-browser-react": "^0.1.1",

package/src/behaviors/behavior.default.ts

@@ -316,20 +316,28 @@ export const defaultBehaviors = [
       })
 
       if (!droppingOnDragOrigin) {
-        return {draggingEntireBlocks, draggedBlocks, dragOrigin}
+        return {
+          draggingEntireBlocks,
+          draggedBlocks,
+          dragOrigin,
+          originEvent: event.originEvent,
+        }
       }
 
       return false
     },
     actions: [
-      ({event}, {draggingEntireBlocks, draggedBlocks, dragOrigin}) => [
+      (
+        {event},
+        {draggingEntireBlocks, draggedBlocks, dragOrigin, originEvent},
+      ) => [
         raise({
           type: 'insert.blocks',
           blocks: event.data,
           placement: draggingEntireBlocks
-            ? event.originEvent.position.block === 'start'
+            ? originEvent.position.block === 'start'
               ? 'before'
-              : event.originEvent.position.block === 'end'
+              : originEvent.position.block === 'end'
                 ? 'after'
                 : 'auto'
             : 'auto',
@@ -394,6 +402,17 @@ export const defaultBehaviors = [
       ],
     ],
   }),
+  defineBehavior({
+    on: 'input.*',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'deserialize',
+          originEvent: event,
+        }),
+      ],
+    ],
+  }),
   toggleAnnotationOff,
   toggleAnnotationOn,
   toggleDecoratorOff,

package/src/behaviors/behavior.types.ts

@@ -206,11 +206,13 @@ export type SyntheticBehaviorEvent =
       'type',
       'deserialization.failure' | 'deserialization.success'
     > & {
-      originEvent: PickFromUnion<
-        NativeBehaviorEvent,
-        'type',
-        'drag.drop' | 'clipboard.paste'
-      >
+      originEvent:
+        | PickFromUnion<
+            NativeBehaviorEvent,
+            'type',
+            'drag.drop' | 'clipboard.paste'
+          >
+        | InputBehaviorEvent
     })
   | {
       type: 'serialization.success'
@@ -318,6 +320,30 @@ export function isDragBehaviorEvent(
   return event.type.startsWith('drag.')
 }
 
+/**
+ * Used to represent native InputEvents that hold a DataTransfer object.
+ *
+ * These can either be one of:
+ *
+ * - insertFromPaste
+ * - insertFromPasteAsQuotation
+ * - insertFromDrop
+ * - insertReplacementText
+ * - insertFromYank
+ */
+export type InputBehaviorEvent = {
+  type: 'input.*'
+  originEvent: {
+    dataTransfer: DataTransfer
+  }
+}
+
+export function isInputBehaviorEvent(
+  event: BehaviorEvent,
+): event is InputBehaviorEvent {
+  return event.type.startsWith('input.')
+}
+
 export type KeyboardBehaviorEvent =
   | {
       type: 'keyboard.keydown'
@@ -343,11 +369,13 @@ export function isKeyboardBehaviorEvent(
 export type DataBehaviorEvent =
   | {
       type: 'deserialize'
-      originEvent: PickFromUnion<
-        NativeBehaviorEvent,
-        'type',
-        'drag.drop' | 'clipboard.paste'
-      >
+      originEvent:
+        | PickFromUnion<
+            NativeBehaviorEvent,
+            'type',
+            'drag.drop' | 'clipboard.paste'
+          >
+        | InputBehaviorEvent
     }
   | {
       type: 'serialize'
@@ -374,9 +402,10 @@ export function isMouseBehaviorEvent(
  */
 export type NativeBehaviorEvent =
   | ClipboardBehaviorEvent
+  | DragBehaviorEvent
+  | InputBehaviorEvent
   | KeyboardBehaviorEvent
   | MouseBehaviorEvent
-  | DragBehaviorEvent
 
 /**
  * @beta
@@ -440,6 +469,7 @@ export type BehaviorEvent =
   | {type: '*'}
   | {type: 'clipboard.*'}
   | {type: 'drag.*'}
+  | {type: 'input.*'}
   | {type: 'keyboard.*'}
   | {type: 'mouse.*'}
 
@@ -455,11 +485,13 @@ export type Behavior<
       ? ClipboardBehaviorEvent
       : TBehaviorEventType extends 'drag.*'
         ? DragBehaviorEvent
-        : TBehaviorEventType extends 'keyboard.*'
-          ? KeyboardBehaviorEvent
-          : TBehaviorEventType extends 'mouse.*'
-            ? MouseBehaviorEvent
-            : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
+        : TBehaviorEventType extends 'input.*'
+          ? InputBehaviorEvent
+          : TBehaviorEventType extends 'keyboard.*'
+            ? KeyboardBehaviorEvent
+            : TBehaviorEventType extends 'mouse.*'
+              ? MouseBehaviorEvent
+              : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
 > = {
   /**
    * The internal editor event that triggers this behavior.
@@ -541,11 +573,13 @@ export function defineBehavior<
           ? ClipboardBehaviorEvent
           : TBehaviorEventType extends `drag.*`
             ? DragBehaviorEvent
-            : TBehaviorEventType extends 'keyboard.*'
-              ? KeyboardBehaviorEvent
-              : TBehaviorEventType extends 'mouse.*'
-                ? MouseBehaviorEvent
-                : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>
+            : TBehaviorEventType extends 'input.*'
+              ? InputBehaviorEvent
+              : TBehaviorEventType extends 'keyboard.*'
+                ? KeyboardBehaviorEvent
+                : TBehaviorEventType extends 'mouse.*'
+                  ? MouseBehaviorEvent
+                  : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>
   >,
 ): Behavior
 export function defineBehavior<
@@ -561,11 +595,13 @@ export function defineBehavior<
         ? ClipboardBehaviorEvent
         : TBehaviorEventType extends `drag.*`
           ? DragBehaviorEvent
-          : TBehaviorEventType extends 'keyboard.*'
-            ? KeyboardBehaviorEvent
-            : TBehaviorEventType extends 'mouse.*'
-              ? MouseBehaviorEvent
-              : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
+          : TBehaviorEventType extends 'input.*'
+            ? InputBehaviorEvent
+            : TBehaviorEventType extends 'keyboard.*'
+              ? KeyboardBehaviorEvent
+              : TBehaviorEventType extends 'mouse.*'
+                ? MouseBehaviorEvent
+                : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
 >(
   behavior: Behavior<TBehaviorEventType, TGuardResponse, TBehaviorEvent>,
 ): Behavior {

package/src/editor/editor-machine.ts

@@ -16,6 +16,7 @@ import {
   isClipboardBehaviorEvent,
   isCustomBehaviorEvent,
   isDragBehaviorEvent,
+  isInputBehaviorEvent,
   isKeyboardBehaviorEvent,
   isMouseBehaviorEvent,
   type Behavior,
@@ -328,9 +329,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 +366,10 @@ export const editorMachine = setup({
             )
           }
 
+          if (isInputBehaviorEvent(event.behaviorEvent)) {
+            return behavior.on === 'input.*'
+          }
+
           if (isKeyboardBehaviorEvent(event.behaviorEvent)) {
             return (
               behavior.on === 'keyboard.*' ||

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 = () => {