@portabletext/editor 2.3.7 → 2.4.0

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

@@ -15,6 +15,8 @@ import {
   isNativeBehaviorEvent,
   isSyntheticBehaviorEvent,
   type BehaviorEvent,
+  type CustomBehaviorEvent,
+  type SyntheticBehaviorEvent,
 } from './behavior.types.event'
 
 const debug = debugWithName('behaviors:event')
@@ -54,7 +56,12 @@ export function performEvent({
         preventDefault: () => void
       }
     | undefined
-  sendBack: (event: {type: 'set drag ghost'; ghost: HTMLElement}) => void
+  sendBack: (
+    event:
+      | {type: 'set drag ghost'; ghost: HTMLElement}
+      | SyntheticBehaviorEvent
+      | CustomBehaviorEvent,
+  ) => void
 }) {
   debug(`(${mode}:${eventCategory(event)})`, JSON.stringify(event, null, 2))
 
@@ -196,7 +203,9 @@ export function performEvent({
           for (const action of actions) {
             if (action.type === 'effect') {
               try {
-                action.effect()
+                action.effect({
+                  send: sendBack,
+                })
               } catch (error) {
                 console.error(
                   new Error(
@@ -267,7 +276,9 @@ export function performEvent({
       for (const action of actions) {
         if (action.type === 'effect') {
           try {
-            action.effect()
+            action.effect({
+              send: sendBack,
+            })
           } catch (error) {
             console.error(
               new Error(
@@ -304,7 +315,8 @@ export function performEvent({
           performEvent({
             mode: 'raise',
             behaviors,
-            remainingEventBehaviors: behaviors,
+            remainingEventBehaviors:
+              mode === 'execute' ? remainingEventBehaviors : behaviors,
             event: action.event,
             editor,
             keyGenerator,

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

@@ -25,7 +25,31 @@ export type BehaviorAction =
     }
   | {
       type: 'effect'
-      effect: () => void
+      effect: (payload: {
+        /**
+         * Send a Behavior Event back into the Editor.
+         *
+         * @example
+         * ```ts
+         * defineBehavior({
+         *   on: '...',
+         *   actions: [
+         *     () => [
+         *       effect(({send}) => {
+         *         doSomethingAsync()
+         *           .then(() => {
+         *             send({
+         *               type: '...',
+         *             })
+         *           })
+         *       })
+         *     ],
+         *   ],
+         * })
+         * ```
+         */
+        send: (event: SyntheticBehaviorEvent | CustomBehaviorEvent) => void
+      }) => void
     }
 
 /**
@@ -59,7 +83,7 @@ export function raise(
  * @beta
  */
 export function effect(
-  effect: () => void,
+  effect: PickFromUnion<BehaviorAction, 'type', 'effect'>['effect'],
 ): PickFromUnion<BehaviorAction, 'type', 'effect'> {
   return {type: 'effect', effect}
 }

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

@@ -233,6 +233,7 @@ const abstractBehaviorEventTypes = [
   'delete.forward',
   'delete.text',
   'deserialize',
+  'deserialize.data',
   'deserialization.success',
   'deserialization.failure',
   'insert.blocks',
@@ -246,6 +247,7 @@ const abstractBehaviorEventTypes = [
   'select.previous block',
   'select.next block',
   'serialize',
+  'serialize.data',
   'serialization.success',
   'serialization.failure',
   'split',
@@ -308,6 +310,18 @@ type AbstractBehaviorEvent =
           >
         | InputBehaviorEvent
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'deserialize.data'>
+      mimeType: MIMEType
+      data: string
+      originEvent:
+        | PickFromUnion<
+            NativeBehaviorEvent,
+            'type',
+            'drag.drop' | 'clipboard.paste'
+          >
+        | InputBehaviorEvent
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'serialize'>
       originEvent: PickFromUnion<
@@ -316,6 +330,15 @@ type AbstractBehaviorEvent =
         'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart'
       >
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'serialize.data'>
+      mimeType: MIMEType
+      originEvent: PickFromUnion<
+        NativeBehaviorEvent,
+        'type',
+        'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart'
+      >
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'deserialization.success'>
       mimeType: MIMEType

package/src/editor/editor-machine.ts

@@ -279,7 +279,18 @@ export const editorMachine = setup({
               schema: context.schema,
             }),
           nativeEvent: event.nativeEvent,
-          sendBack: (event) => self.send(event),
+          sendBack: (eventSentBack) => {
+            if (eventSentBack.type === 'set drag ghost') {
+              self.send(eventSentBack)
+              return
+            }
+
+            self.send({
+              type: 'behavior event',
+              behaviorEvent: eventSentBack,
+              editor: event.editor,
+            })
+          },
         })
       } catch (error) {
         console.error(

package/src/internal-utils/test-editor.tsx

@@ -51,6 +51,20 @@ export async function createTestEditor(
 
   await vi.waitFor(() => expect.element(locator).toBeInTheDocument())
 
+  function paste(dataTransfer: DataTransfer) {
+    editorActorRef.current?.send({
+      type: 'behavior event',
+      behaviorEvent: {
+        type: 'clipboard.paste',
+        originEvent: {dataTransfer},
+        position: {
+          selection: editorRef.current?.getSnapshot().context.selection!,
+        },
+      },
+      editor: slateRef.current!,
+    })
+  }
+
   return {
     editorActorRef,
     editorRef,
@@ -58,5 +72,6 @@ export async function createTestEditor(
     locator,
     onEvent,
     slateRef,
+    paste,
   }
 }