@portabletext/editor 1.51.0 → 1.52.0

package/lib/index.d.cts

@@ -341,6 +341,7 @@ declare type BehaviorActionSet<TBehaviorEvent, TGuardResponse> = (
   payload: {
     snapshot: EditorSnapshot
     event: TBehaviorEvent
+    dom: EditorDom
   },
   guardResponse: TGuardResponse,
 ) => Array<BehaviorAction>
@@ -369,6 +370,7 @@ declare type BehaviorEventTypeNamespace =
 declare type BehaviorGuard<TBehaviorEvent, TGuardResponse> = (payload: {
   snapshot: EditorSnapshot
   event: TBehaviorEvent
+  dom: EditorDom
 }) => TGuardResponse | false
 
 /** @beta */
@@ -618,6 +620,8 @@ declare type DragBehaviorEvent =
   | {
       type: StrictExtract<NativeBehaviorEventType, 'drag.dragstart'>
       originEvent: {
+        clientX: number
+        clientY: number
         dataTransfer: DataTransfer
       }
       position: Pick<EventPosition, 'selection'>
@@ -646,6 +650,7 @@ declare type DragBehaviorEvent =
       originEvent: {
         dataTransfer: DataTransfer
       }
+      dragOrigin?: Pick<EventPosition, 'selection'>
       position: EventPosition
     }
   | {
@@ -653,6 +658,7 @@ declare type DragBehaviorEvent =
       originEvent: {
         dataTransfer: DataTransfer
       }
+      dragOrigin?: Pick<EventPosition, 'selection'>
       position: EventPosition
     }
   | {
@@ -830,6 +836,26 @@ export 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
  */
@@ -921,9 +947,9 @@ declare const editorMachine: StateMachine<
     selection: EditorSelection
     initialValue: Array<PortableTextBlock> | undefined
     internalDrag?: {
-      ghost?: HTMLElement
       origin: Pick<EventPosition, 'selection'>
     }
+    dragGhost?: HTMLElement
     slateEditor?: PortableTextSlateEditor
   },
   | InternalPatchEvent
@@ -977,10 +1003,14 @@ declare const editorMachine: StateMachine<
         preventDefault: () => void
       }
     }
+  | {
+      type: 'set drag ghost'
+      ghost: HTMLElement
+    }
   | {
       type: 'dragstart'
-      origin: Pick<EventPosition, 'selection'>
       ghost?: HTMLElement
+      origin: Pick<EventPosition, 'selection'>
     }
   | {
       type: 'dragend'
@@ -1195,9 +1225,9 @@ declare const editorMachine: StateMachine<
             selection: EditorSelection
             initialValue: Array<PortableTextBlock> | undefined
             internalDrag?: {
-              ghost?: HTMLElement
               origin: Pick<EventPosition, 'selection'>
             }
+            dragGhost?: HTMLElement
             slateEditor?: PortableTextSlateEditor
           },
           | InternalPatchEvent
@@ -1251,10 +1281,14 @@ declare const editorMachine: StateMachine<
                 preventDefault: () => void
               }
             }
+          | {
+              type: 'set drag ghost'
+              ghost: HTMLElement
+            }
           | {
               type: 'dragstart'
-              origin: Pick<EventPosition, 'selection'>
               ghost?: HTMLElement
+              origin: Pick<EventPosition, 'selection'>
             }
           | {
               type: 'dragend'
@@ -1320,10 +1354,14 @@ declare const editorMachine: StateMachine<
               preventDefault: () => void
             }
           }
+        | {
+            type: 'set drag ghost'
+            ghost: HTMLElement
+          }
         | {
             type: 'dragstart'
-            origin: Pick<EventPosition, 'selection'>
             ghost?: HTMLElement
+            origin: Pick<EventPosition, 'selection'>
           }
         | {
             type: 'dragend'
@@ -1368,9 +1406,9 @@ declare const editorMachine: StateMachine<
             selection: EditorSelection
             initialValue: Array<PortableTextBlock> | undefined
             internalDrag?: {
-              ghost?: HTMLElement
               origin: Pick<EventPosition, 'selection'>
             }
+            dragGhost?: HTMLElement
             slateEditor?: PortableTextSlateEditor
           },
           {
@@ -1428,10 +1466,14 @@ declare const editorMachine: StateMachine<
                 preventDefault: () => void
               }
             }
+          | {
+              type: 'set drag ghost'
+              ghost: HTMLElement
+            }
           | {
               type: 'dragstart'
-              origin: Pick<EventPosition, 'selection'>
               ghost?: HTMLElement
+              origin: Pick<EventPosition, 'selection'>
             }
           | {
               type: 'dragend'
@@ -1463,9 +1505,9 @@ declare const editorMachine: StateMachine<
               selection: EditorSelection
               initialValue: Array<PortableTextBlock> | undefined
               internalDrag?: {
-                ghost?: HTMLElement
                 origin: Pick<EventPosition, 'selection'>
               }
+              dragGhost?: HTMLElement
               slateEditor?: PortableTextSlateEditor
             },
             {
@@ -1523,10 +1565,14 @@ declare const editorMachine: StateMachine<
                   preventDefault: () => void
                 }
               }
+            | {
+                type: 'set drag ghost'
+                ghost: HTMLElement
+              }
             | {
                 type: 'dragstart'
-                origin: Pick<EventPosition, 'selection'>
                 ghost?: HTMLElement
+                origin: Pick<EventPosition, 'selection'>
               }
             | {
                 type: 'dragend'
@@ -1555,9 +1601,9 @@ declare const editorMachine: StateMachine<
               selection: EditorSelection
               initialValue: Array<PortableTextBlock> | undefined
               internalDrag?: {
-                ghost?: HTMLElement
                 origin: Pick<EventPosition, 'selection'>
               }
+              dragGhost?: HTMLElement
               slateEditor?: PortableTextSlateEditor
             },
             {
@@ -1615,10 +1661,14 @@ declare const editorMachine: StateMachine<
                   preventDefault: () => void
                 }
               }
+            | {
+                type: 'set drag ghost'
+                ghost: HTMLElement
+              }
             | {
                 type: 'dragstart'
-                origin: Pick<EventPosition, 'selection'>
                 ghost?: HTMLElement
+                origin: Pick<EventPosition, 'selection'>
               }
             | {
                 type: 'dragend'
@@ -1679,6 +1729,104 @@ declare const editorMachine: StateMachine<
           >,
         ]
       }
+      readonly 'set drag ghost': {
+        readonly actions: ActionFunction<
+          {
+            behaviors: Set<BehaviorConfig>
+            converters: Set<Converter>
+            getLegacySchema: () => PortableTextMemberSchemaTypes
+            keyGenerator: () => string
+            pendingEvents: Array<InternalPatchEvent | MutationEvent>
+            pendingIncomingPatchesEvents: Array<PatchesEvent>
+            schema: EditorSchema
+            initialReadOnly: boolean
+            maxBlocks: number | undefined
+            selection: EditorSelection
+            initialValue: Array<PortableTextBlock> | undefined
+            internalDrag?: {
+              origin: Pick<EventPosition, 'selection'>
+            }
+            dragGhost?: HTMLElement
+            slateEditor?: PortableTextSlateEditor
+          },
+          {
+            type: 'set drag ghost'
+            ghost: HTMLElement
+          },
+          | InternalPatchEvent
+          | MutationEvent
+          | PatchesEvent
+          | {
+              type: 'update readOnly'
+              readOnly: boolean
+            }
+          | {
+              type: 'update maxBlocks'
+              maxBlocks: number | undefined
+            }
+          | {
+              type: 'add behavior'
+              behaviorConfig: BehaviorConfig
+            }
+          | {
+              type: 'remove behavior'
+              behaviorConfig: BehaviorConfig
+            }
+          | {
+              type: 'blur'
+              editor: PortableTextSlateEditor
+            }
+          | {
+              type: 'focus'
+              editor: PortableTextSlateEditor
+            }
+          | {
+              type: 'normalizing'
+            }
+          | {
+              type: 'update selection'
+              selection: EditorSelection
+            }
+          | {
+              type: 'done normalizing'
+            }
+          | {
+              type: 'done syncing value'
+            }
+          | {
+              type: 'syncing value'
+            }
+          | {
+              type: 'behavior event'
+              behaviorEvent: BehaviorEvent
+              editor: PortableTextSlateEditor
+              nativeEvent?: {
+                preventDefault: () => void
+              }
+            }
+          | {
+              type: 'set drag ghost'
+              ghost: HTMLElement
+            }
+          | {
+              type: 'dragstart'
+              ghost?: HTMLElement
+              origin: Pick<EventPosition, 'selection'>
+            }
+          | {
+              type: 'dragend'
+            }
+          | {
+              type: 'drop'
+            },
+          undefined,
+          never,
+          never,
+          never,
+          never,
+          never
+        >
+      }
     }
     readonly type: 'parallel'
     readonly states: {
@@ -1706,9 +1854,9 @@ declare const editorMachine: StateMachine<
                     selection: EditorSelection
                     initialValue: Array<PortableTextBlock> | undefined
                     internalDrag?: {
-                      ghost?: HTMLElement
                       origin: Pick<EventPosition, 'selection'>
                     }
+                    dragGhost?: HTMLElement
                     slateEditor?: PortableTextSlateEditor
                   },
                   {
@@ -1748,9 +1896,9 @@ declare const editorMachine: StateMachine<
                           selection: EditorSelection
                           initialValue: Array<PortableTextBlock> | undefined
                           internalDrag?: {
-                            ghost?: HTMLElement
                             origin: Pick<EventPosition, 'selection'>
                           }
+                          dragGhost?: HTMLElement
                           slateEditor?: PortableTextSlateEditor
                         },
                         {
@@ -1785,9 +1933,9 @@ declare const editorMachine: StateMachine<
                         selection: EditorSelection
                         initialValue: Array<PortableTextBlock> | undefined
                         internalDrag?: {
-                          ghost?: HTMLElement
                           origin: Pick<EventPosition, 'selection'>
                         }
+                        dragGhost?: HTMLElement
                         slateEditor?: PortableTextSlateEditor
                       },
                       {
@@ -1821,9 +1969,9 @@ declare const editorMachine: StateMachine<
                     selection: EditorSelection
                     initialValue: Array<PortableTextBlock> | undefined
                     internalDrag?: {
-                      ghost?: HTMLElement
                       origin: Pick<EventPosition, 'selection'>
                     }
+                    dragGhost?: HTMLElement
                     slateEditor?: PortableTextSlateEditor
                   },
                   {
@@ -1857,9 +2005,9 @@ declare const editorMachine: StateMachine<
                       selection: EditorSelection
                       initialValue: Array<PortableTextBlock> | undefined
                       internalDrag?: {
-                        ghost?: HTMLElement
                         origin: Pick<EventPosition, 'selection'>
                       }
+                      dragGhost?: HTMLElement
                       slateEditor?: PortableTextSlateEditor
                     },
                     {
@@ -1917,10 +2065,14 @@ declare const editorMachine: StateMachine<
                           preventDefault: () => void
                         }
                       }
+                    | {
+                        type: 'set drag ghost'
+                        ghost: HTMLElement
+                      }
                     | {
                         type: 'dragstart'
-                        origin: Pick<EventPosition, 'selection'>
                         ghost?: HTMLElement
+                        origin: Pick<EventPosition, 'selection'>
                       }
                     | {
                         type: 'dragend'
@@ -1962,15 +2114,15 @@ declare const editorMachine: StateMachine<
                           selection: EditorSelection
                           initialValue: Array<PortableTextBlock> | undefined
                           internalDrag?: {
-                            ghost?: HTMLElement
                             origin: Pick<EventPosition, 'selection'>
                           }
+                          dragGhost?: HTMLElement
                           slateEditor?: PortableTextSlateEditor
                         },
                         {
                           type: 'dragstart'
-                          origin: Pick<EventPosition, 'selection'>
                           ghost?: HTMLElement
+                          origin: Pick<EventPosition, 'selection'>
                         },
                         | InternalPatchEvent
                         | MutationEvent
@@ -2023,10 +2175,14 @@ declare const editorMachine: StateMachine<
                               preventDefault: () => void
                             }
                           }
+                        | {
+                            type: 'set drag ghost'
+                            ghost: HTMLElement
+                          }
                         | {
                             type: 'dragstart'
-                            origin: Pick<EventPosition, 'selection'>
                             ghost?: HTMLElement
+                            origin: Pick<EventPosition, 'selection'>
                           }
                         | {
                             type: 'dragend'
@@ -2094,9 +2250,9 @@ declare const editorMachine: StateMachine<
                       selection: EditorSelection
                       initialValue: Array<PortableTextBlock> | undefined
                       internalDrag?: {
-                        ghost?: HTMLElement
                         origin: Pick<EventPosition, 'selection'>
                       }
+                      dragGhost?: HTMLElement
                       slateEditor?: PortableTextSlateEditor
                     },
                     | InternalPatchEvent
@@ -2150,10 +2306,14 @@ declare const editorMachine: StateMachine<
                           preventDefault: () => void
                         }
                       }
+                    | {
+                        type: 'set drag ghost'
+                        ghost: HTMLElement
+                      }
                     | {
                         type: 'dragstart'
-                        origin: Pick<EventPosition, 'selection'>
                         ghost?: HTMLElement
+                        origin: Pick<EventPosition, 'selection'>
                       }
                     | {
                         type: 'dragend'
@@ -2212,10 +2372,14 @@ declare const editorMachine: StateMachine<
                           preventDefault: () => void
                         }
                       }
+                    | {
+                        type: 'set drag ghost'
+                        ghost: HTMLElement
+                      }
                     | {
                         type: 'dragstart'
-                        origin: Pick<EventPosition, 'selection'>
                         ghost?: HTMLElement
+                        origin: Pick<EventPosition, 'selection'>
                       }
                     | {
                         type: 'dragend'
@@ -2238,9 +2402,9 @@ declare const editorMachine: StateMachine<
                       selection: EditorSelection
                       initialValue: Array<PortableTextBlock> | undefined
                       internalDrag?: {
-                        ghost?: HTMLElement
                         origin: Pick<EventPosition, 'selection'>
                       }
+                      dragGhost?: HTMLElement
                       slateEditor?: PortableTextSlateEditor
                     },
                     | InternalPatchEvent
@@ -2294,10 +2458,80 @@ declare const editorMachine: StateMachine<
                           preventDefault: () => void
                         }
                       }
+                    | {
+                        type: 'set drag ghost'
+                        ghost: HTMLElement
+                      }
                     | {
                         type: 'dragstart'
+                        ghost?: HTMLElement
                         origin: Pick<EventPosition, 'selection'>
+                      }
+                    | {
+                        type: 'dragend'
+                      }
+                    | {
+                        type: 'drop'
+                      },
+                    | InternalPatchEvent
+                    | MutationEvent
+                    | PatchesEvent
+                    | {
+                        type: 'update readOnly'
+                        readOnly: boolean
+                      }
+                    | {
+                        type: 'update maxBlocks'
+                        maxBlocks: number | undefined
+                      }
+                    | {
+                        type: 'add behavior'
+                        behaviorConfig: BehaviorConfig
+                      }
+                    | {
+                        type: 'remove behavior'
+                        behaviorConfig: BehaviorConfig
+                      }
+                    | {
+                        type: 'blur'
+                        editor: PortableTextSlateEditor
+                      }
+                    | {
+                        type: 'focus'
+                        editor: PortableTextSlateEditor
+                      }
+                    | {
+                        type: 'normalizing'
+                      }
+                    | {
+                        type: 'update selection'
+                        selection: EditorSelection
+                      }
+                    | {
+                        type: 'done normalizing'
+                      }
+                    | {
+                        type: 'done syncing value'
+                      }
+                    | {
+                        type: 'syncing value'
+                      }
+                    | {
+                        type: 'behavior event'
+                        behaviorEvent: BehaviorEvent
+                        editor: PortableTextSlateEditor
+                        nativeEvent?: {
+                          preventDefault: () => void
+                        }
+                      }
+                    | {
+                        type: 'set drag ghost'
+                        ghost: HTMLElement
+                      }
+                    | {
+                        type: 'dragstart'
                         ghost?: HTMLElement
+                        origin: Pick<EventPosition, 'selection'>
                       }
                     | {
                         type: 'dragend'
@@ -2305,6 +2539,32 @@ declare const editorMachine: StateMachine<
                     | {
                         type: 'drop'
                       },
+                    undefined,
+                    never,
+                    never,
+                    never,
+                    never,
+                    never
+                  >,
+                  ActionFunction<
+                    {
+                      behaviors: Set<BehaviorConfig>
+                      converters: Set<Converter>
+                      getLegacySchema: () => PortableTextMemberSchemaTypes
+                      keyGenerator: () => string
+                      pendingEvents: Array<InternalPatchEvent | MutationEvent>
+                      pendingIncomingPatchesEvents: Array<PatchesEvent>
+                      schema: EditorSchema
+                      initialReadOnly: boolean
+                      maxBlocks: number | undefined
+                      selection: EditorSelection
+                      initialValue: Array<PortableTextBlock> | undefined
+                      internalDrag?: {
+                        origin: Pick<EventPosition, 'selection'>
+                      }
+                      dragGhost?: HTMLElement
+                      slateEditor?: PortableTextSlateEditor
+                    },
                     | InternalPatchEvent
                     | MutationEvent
                     | PatchesEvent
@@ -2356,10 +2616,80 @@ declare const editorMachine: StateMachine<
                           preventDefault: () => void
                         }
                       }
+                    | {
+                        type: 'set drag ghost'
+                        ghost: HTMLElement
+                      }
                     | {
                         type: 'dragstart'
+                        ghost?: HTMLElement
                         origin: Pick<EventPosition, 'selection'>
+                      }
+                    | {
+                        type: 'dragend'
+                      }
+                    | {
+                        type: 'drop'
+                      },
+                    | InternalPatchEvent
+                    | MutationEvent
+                    | PatchesEvent
+                    | {
+                        type: 'update readOnly'
+                        readOnly: boolean
+                      }
+                    | {
+                        type: 'update maxBlocks'
+                        maxBlocks: number | undefined
+                      }
+                    | {
+                        type: 'add behavior'
+                        behaviorConfig: BehaviorConfig
+                      }
+                    | {
+                        type: 'remove behavior'
+                        behaviorConfig: BehaviorConfig
+                      }
+                    | {
+                        type: 'blur'
+                        editor: PortableTextSlateEditor
+                      }
+                    | {
+                        type: 'focus'
+                        editor: PortableTextSlateEditor
+                      }
+                    | {
+                        type: 'normalizing'
+                      }
+                    | {
+                        type: 'update selection'
+                        selection: EditorSelection
+                      }
+                    | {
+                        type: 'done normalizing'
+                      }
+                    | {
+                        type: 'done syncing value'
+                      }
+                    | {
+                        type: 'syncing value'
+                      }
+                    | {
+                        type: 'behavior event'
+                        behaviorEvent: BehaviorEvent
+                        editor: PortableTextSlateEditor
+                        nativeEvent?: {
+                          preventDefault: () => void
+                        }
+                      }
+                    | {
+                        type: 'set drag ghost'
+                        ghost: HTMLElement
+                      }
+                    | {
+                        type: 'dragstart'
                         ghost?: HTMLElement
+                        origin: Pick<EventPosition, 'selection'>
                       }
                     | {
                         type: 'dragend'
@@ -2443,9 +2773,9 @@ declare const editorMachine: StateMachine<
                               selection: EditorSelection
                               initialValue: Array<PortableTextBlock> | undefined
                               internalDrag?: {
-                                ghost?: HTMLElement
                                 origin: Pick<EventPosition, 'selection'>
                               }
+                              dragGhost?: HTMLElement
                               slateEditor?: PortableTextSlateEditor
                             },
                             PatchesEvent,
@@ -2500,10 +2830,14 @@ declare const editorMachine: StateMachine<
                                   preventDefault: () => void
                                 }
                               }
+                            | {
+                                type: 'set drag ghost'
+                                ghost: HTMLElement
+                              }
                             | {
                                 type: 'dragstart'
-                                origin: Pick<EventPosition, 'selection'>
                                 ghost?: HTMLElement
+                                origin: Pick<EventPosition, 'selection'>
                               }
                             | {
                                 type: 'dragend'
@@ -2787,11 +3121,6 @@ export declare type EditorSnapshot = {
   beta: {
     activeAnnotations: Array<string>
     activeDecorators: Array<string>
-    internalDrag:
-      | {
-          origin: Pick<EventPosition, 'selection'>
-        }
-      | undefined
   }
 }