@portabletext/editor 1.40.4 → 1.41.0

package/lib/index.js

@@ -1,4 +1,4 @@
-import { getNodeBlock, toPortableTextRange, fromSlateValue, toSlateRange, debugWithName, EditorActorContext, KEY_TO_VALUE_ELEMENT, usePortableTextEditor, PortableTextEditor, moveRangeByOperation, isEqualToEmptyEditor, getEditorSnapshot, useEditor } from "./_chunks-es/editor-provider.js";
+import { getNodeBlock, getFirstBlock, getLastBlock, toPortableTextRange, fromSlateValue, toSlateRange, debugWithName, EditorActorContext, KEY_TO_VALUE_ELEMENT, usePortableTextEditor, PortableTextEditor, moveRangeByOperation, isEqualToEmptyEditor, getEditorSnapshot, useEditor } from "./_chunks-es/editor-provider.js";
 import { EditorProvider, defineSchema, defaultKeyGenerator, useEditorSelector, usePortableTextEditorSelection } from "./_chunks-es/editor-provider.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useSelector } from "@xstate/react";
@@ -11,7 +11,7 @@ import { getBlockEndPoint, getBlockStartPoint, isKeyedSegment } from "./_chunks-
 import { isSelectionCollapsed, getFocusTextBlock, getFocusSpan, getSelectedBlocks, isSelectionExpanded, getSelectionStartBlock, getSelectionEndBlock, getFocusBlock } from "./_chunks-es/selector.is-at-the-start-of-block.js";
 import { isOverlappingSelection, isSelectingEntireBlocks } from "./_chunks-es/selector.is-overlapping-selection.js";
 import { DOMEditor, isDOMNode } from "slate-dom";
-import { isSelectionCollapsed as isSelectionCollapsed$1 } from "./_chunks-es/util.is-selection-collapsed.js";
+import { isSelectionCollapsed as isSelectionCollapsed$1, getSelectionEndPoint } from "./_chunks-es/util.is-selection-collapsed.js";
 import { parseBlocks } from "./_chunks-es/util.selection-point-to-block-offset.js";
 import { defineBehavior, isHotkey } from "./_chunks-es/behavior.core.js";
 import { c } from "react-compiler-runtime";
@@ -77,6 +77,19 @@ function getDragSelection({
   }
   return dragSelection;
 }
+function draggingOnDragOrigin({
+  snapshot,
+  position
+}) {
+  const dragOrigin = snapshot.beta.internalDrag?.origin;
+  return dragOrigin ? isOverlappingSelection(position.selection)({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection: dragOrigin.selection
+    }
+  }) : !1;
+}
 function getEventPosition({
   schema,
   slateEditor,
@@ -158,6 +171,22 @@ function getEventPositionBlock({
   slateEditor,
   event
 }) {
+  const [firstBlock] = getFirstBlock({
+    editor: slateEditor
+  });
+  if (!firstBlock)
+    return;
+  const firstBlockRect = DOMEditor.toDOMNode(slateEditor, firstBlock).getBoundingClientRect();
+  if (event.pageY < firstBlockRect.top)
+    return "start";
+  const [lastBlock] = getLastBlock({
+    editor: slateEditor
+  });
+  if (!lastBlock)
+    return;
+  const lastBlockRef = DOMEditor.toDOMNode(slateEditor, lastBlock).getBoundingClientRect();
+  if (event.pageY > lastBlockRef.bottom)
+    return "end";
   const elementRect = DOMEditor.toDOMNode(slateEditor, node).getBoundingClientRect(), top = elementRect.top, height = elementRect.height;
   return Math.abs(top - event.pageY) < height / 2 ? "start" : "end";
 }
@@ -176,7 +205,11 @@ function getSlateRangeFromEvent(editor, event) {
   let domRange;
   if (window2.document.caretPositionFromPoint !== void 0) {
     const position = window2.document.caretPositionFromPoint(event.clientX, event.clientY);
-    position && (domRange = window2.document.createRange(), domRange.setStart(position.offsetNode, position.offset), domRange.setEnd(position.offsetNode, position.offset));
+    if (position)
+      try {
+        domRange = window2.document.createRange(), domRange.setStart(position.offsetNode, position.offset), domRange.setEnd(position.offsetNode, position.offset);
+      } catch {
+      }
   } else if (window2.document.caretRangeFromPoint !== void 0)
     domRange = window2.document.caretRangeFromPoint(event.clientX, event.clientY) ?? void 0;
   else {
@@ -304,13 +337,13 @@ function DefaultInlineObject(props) {
 function DropIndicator() {
   const $ = c(1);
   let t0;
-  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx("div", { className: "pt-drop-indicator", style: {
+  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx("div", { contentEditable: !1, className: "pt-drop-indicator", style: {
     position: "absolute",
     width: "100%",
     height: 1,
     borderBottom: "1px solid currentColor",
     zIndex: 5
-  } }), $[0] = t0) : t0 = $[0], t0;
+  }, children: /* @__PURE__ */ jsx("span", {}) }), $[0] = t0) : t0 = $[0], t0;
 }
 debugWithName("components:Element");
 const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
@@ -1123,78 +1156,111 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
     };
   }, [slateEditor, editorActor]);
   const handleDragStart = useCallback((event_8) => {
-    if (onDragStart?.(event_8), !event_8.isDefaultPrevented() && !event_8.isPropagationStopped()) {
-      const position_4 = getEventPosition({
-        schema: editorActor.getSnapshot().context.schema,
-        slateEditor,
-        event: event_8.nativeEvent
-      });
-      if (!position_4) {
-        console.warn("Could not find position for dragstart event");
-        return;
+    if (onDragStart?.(event_8), event_8.isDefaultPrevented() || event_8.isPropagationStopped())
+      return;
+    event_8.stopPropagation();
+    const position_4 = getEventPosition({
+      schema: editorActor.getSnapshot().context.schema,
+      slateEditor,
+      event: event_8.nativeEvent
+    });
+    if (!position_4) {
+      console.warn("Could not find position for dragstart event");
+      return;
+    }
+    const snapshot = getEditorSnapshot({
+      editorActorSnapshot: editorActor.getSnapshot(),
+      slateEditorInstance: slateEditor
+    }), dragSelection = getDragSelection({
+      eventSelection: position_4.selection,
+      snapshot
+    }), selectingEntireBlocks = isSelectingEntireBlocks({
+      context: {
+        ...snapshot.context,
+        selection: dragSelection
       }
-      const snapshot = getEditorSnapshot({
-        editorActorSnapshot: editorActor.getSnapshot(),
-        slateEditorInstance: slateEditor
-      }), dragSelection = getDragSelection({
-        eventSelection: position_4.selection,
-        snapshot
-      }), selectingEntireBlocks = isSelectingEntireBlocks({
+    }), dragGhost = document.createElement("div"), draggedDomNodes = getSelectionDomNodes({
+      snapshot: {
         context: {
           ...snapshot.context,
           selection: dragSelection
         }
-      }), dragGhost = document.createElement("div"), draggedDomNodes = getSelectionDomNodes({
-        snapshot: {
-          context: {
-            ...snapshot.context,
-            selection: dragSelection
-          }
-        },
-        slateEditor
-      });
-      if (selectingEntireBlocks) {
-        const clonedBlockNodes = draggedDomNodes.blockNodes.map((node) => node.cloneNode(!0));
-        for (const block of clonedBlockNodes)
-          block instanceof HTMLElement && (block.style.position = "relative"), dragGhost.appendChild(block);
-        const customGhost = dragGhost.querySelector("[data-pt-drag-ghost-element]");
-        if (customGhost && dragGhost.replaceChildren(customGhost), dragGhost.setAttribute("data-dragged", ""), dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost), customGhost) {
-          const customGhostRect = customGhost.getBoundingClientRect(), x = event_8.clientX - customGhostRect.left, y = event_8.clientY - customGhostRect.top;
-          dragGhost.style.width = `${customGhostRect.width}px`, dragGhost.style.height = `${customGhostRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x, y);
-        } else {
-          const blocksDomRect = getCompoundClientRect(draggedDomNodes.blockNodes), x_0 = event_8.clientX - blocksDomRect.left, y_0 = event_8.clientY - blocksDomRect.top;
-          dragGhost.style.width = `${blocksDomRect.width}px`, dragGhost.style.height = `${blocksDomRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x_0, y_0);
-        }
+      },
+      slateEditor
+    });
+    if (selectingEntireBlocks) {
+      const clonedBlockNodes = draggedDomNodes.blockNodes.map((node) => node.cloneNode(!0));
+      for (const block of clonedBlockNodes)
+        block instanceof HTMLElement && (block.style.position = "relative"), dragGhost.appendChild(block);
+      const customGhost = dragGhost.querySelector("[data-pt-drag-ghost-element]");
+      if (customGhost && dragGhost.replaceChildren(customGhost), dragGhost.setAttribute("data-dragged", ""), dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost), customGhost) {
+        const customGhostRect = customGhost.getBoundingClientRect(), x = event_8.clientX - customGhostRect.left, y = event_8.clientY - customGhostRect.top;
+        dragGhost.style.width = `${customGhostRect.width}px`, dragGhost.style.height = `${customGhostRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x, y);
       } else {
-        const clonedChildNodes = draggedDomNodes.childNodes.map((node_0) => node_0.cloneNode(!0));
-        for (const child of clonedChildNodes)
-          dragGhost.appendChild(child);
-        dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost);
-        const childrenDomRect = getCompoundClientRect(draggedDomNodes.childNodes), x_1 = event_8.clientX - childrenDomRect.left, y_1 = event_8.clientY - childrenDomRect.top;
-        dragGhost.style.width = `${childrenDomRect.width}px`, dragGhost.style.height = `${childrenDomRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x_1, y_1);
+        const blocksDomRect = getCompoundClientRect(draggedDomNodes.blockNodes), x_0 = event_8.clientX - blocksDomRect.left, y_0 = event_8.clientY - blocksDomRect.top;
+        dragGhost.style.width = `${blocksDomRect.width}px`, dragGhost.style.height = `${blocksDomRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x_0, y_0);
       }
-      editorActor.send({
-        type: "dragstart",
-        origin: {
-          selection: dragSelection
-        },
-        ghost: dragGhost
-      }), editorActor.send({
-        type: "behavior event",
-        behaviorEvent: {
-          type: "drag.dragstart",
-          originEvent: {
-            dataTransfer: event_8.dataTransfer
-          },
-          position: {
-            selection: dragSelection
-          }
-        },
-        editor: slateEditor
-      }), event_8.stopPropagation();
+    } else {
+      const clonedChildNodes = draggedDomNodes.childNodes.map((node_0) => node_0.cloneNode(!0));
+      for (const child of clonedChildNodes)
+        dragGhost.appendChild(child);
+      dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost);
+      const childrenDomRect = getCompoundClientRect(draggedDomNodes.childNodes), x_1 = event_8.clientX - childrenDomRect.left, y_1 = event_8.clientY - childrenDomRect.top;
+      dragGhost.style.width = `${childrenDomRect.width}px`, dragGhost.style.height = `${childrenDomRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x_1, y_1);
     }
+    editorActor.send({
+      type: "behavior event",
+      behaviorEvent: {
+        type: "select",
+        selection: isSelectionCollapsed$1(dragSelection) ? dragSelection : {
+          anchor: getSelectionEndPoint(dragSelection),
+          focus: getSelectionEndPoint(dragSelection),
+          backward: !1
+        }
+      },
+      editor: slateEditor
+    }), editorActor.send({
+      type: "dragstart",
+      origin: {
+        selection: dragSelection
+      },
+      ghost: dragGhost
+    }), editorActor.send({
+      type: "behavior event",
+      behaviorEvent: {
+        type: "drag.dragstart",
+        originEvent: {
+          dataTransfer: event_8.dataTransfer
+        },
+        position: {
+          selection: dragSelection
+        }
+      },
+      editor: slateEditor
+    });
   }, [onDragStart, editorActor, slateEditor]), handleDrag = useCallback((event_9) => {
-    onDrag?.(event_9), !event_9.isDefaultPrevented() && !event_9.isPropagationStopped() && (editorActor.send({
+    if (onDrag?.(event_9), event_9.isDefaultPrevented() || event_9.isPropagationStopped())
+      return;
+    event_9.stopPropagation();
+    const position_5 = getEventPosition({
+      schema: editorActor.getSnapshot().context.schema,
+      slateEditor,
+      event: event_9.nativeEvent
+    });
+    if (!position_5)
+      return;
+    const snapshot_0 = getEditorSnapshot({
+      editorActorSnapshot: editorActor.getSnapshot(),
+      slateEditorInstance: slateEditor
+    });
+    if (draggingOnDragOrigin({
+      snapshot: snapshot_0,
+      position: position_5
+    })) {
+      event_9.preventDefault();
+      return;
+    }
+    editorActor.send({
       type: "behavior event",
       behaviorEvent: {
         type: "drag.drag",
@@ -1203,9 +1269,9 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
         }
       },
       editor: slateEditor
-    }), event_9.stopPropagation());
+    });
   }, [onDrag, editorActor, slateEditor]), handleDragEnd = useCallback((event_10) => {
-    onDragEnd?.(event_10), !event_10.isDefaultPrevented() && !event_10.isPropagationStopped() && (editorActor.send({
+    onDragEnd?.(event_10), !(event_10.isDefaultPrevented() || event_10.isPropagationStopped()) && (event_10.stopPropagation(), editorActor.send({
       type: "behavior event",
       behaviorEvent: {
         type: "drag.dragend",
@@ -1214,76 +1280,139 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
         }
       },
       editor: slateEditor
-    }), event_10.stopPropagation());
+    }));
   }, [onDragEnd, editorActor, slateEditor]), handleDragEnter = useCallback((event_11) => {
-    if (onDragEnter?.(event_11), !event_11.isDefaultPrevented() && !event_11.isPropagationStopped()) {
-      const position_5 = getEventPosition({
-        schema: editorActor.getSnapshot().context.schema,
-        slateEditor,
-        event: event_11.nativeEvent
-      });
-      if (!position_5)
-        return;
-      editorActor.send({
-        type: "behavior event",
-        behaviorEvent: {
-          type: "drag.dragenter",
-          originEvent: {
-            dataTransfer: event_11.dataTransfer
-          },
-          position: position_5
-        },
-        editor: slateEditor
-      }), event_11.stopPropagation();
+    if (onDragEnter?.(event_11), event_11.isDefaultPrevented() || event_11.isPropagationStopped())
+      return;
+    event_11.stopPropagation();
+    const position_6 = getEventPosition({
+      schema: editorActor.getSnapshot().context.schema,
+      slateEditor,
+      event: event_11.nativeEvent
+    });
+    if (!position_6)
+      return;
+    const snapshot_1 = getEditorSnapshot({
+      editorActorSnapshot: editorActor.getSnapshot(),
+      slateEditorInstance: slateEditor
+    });
+    if (draggingOnDragOrigin({
+      snapshot: snapshot_1,
+      position: position_6
+    })) {
+      event_11.preventDefault();
+      return;
     }
-  }, [onDragEnter, editorActor, slateEditor]), handleDragOver = useCallback((event_12) => {
-    if (onDragOver?.(event_12), !event_12.isDefaultPrevented() && !event_12.isPropagationStopped()) {
-      const position_6 = getEventPosition({
-        schema: editorActor.getSnapshot().context.schema,
-        slateEditor,
-        event: event_12.nativeEvent
-      });
-      if (!position_6)
-        return;
-      editorActor.send({
-        type: "behavior event",
-        behaviorEvent: {
-          type: "drag.dragover",
-          originEvent: {
-            dataTransfer: event_12.dataTransfer
-          },
-          position: position_6
+    editorActor.send({
+      type: "behavior event",
+      behaviorEvent: {
+        type: "drag.dragenter",
+        originEvent: {
+          dataTransfer: event_11.dataTransfer
         },
-        editor: slateEditor,
-        nativeEvent: event_12
-      }), event_12.stopPropagation();
+        position: position_6
+      },
+      editor: slateEditor
+    });
+  }, [onDragEnter, editorActor, slateEditor]), handleDragOver = useCallback((event_12) => {
+    if (onDragOver?.(event_12), event_12.isDefaultPrevented() || event_12.isPropagationStopped())
+      return;
+    event_12.stopPropagation();
+    const position_7 = getEventPosition({
+      schema: editorActor.getSnapshot().context.schema,
+      slateEditor,
+      event: event_12.nativeEvent
+    });
+    if (!position_7)
+      return;
+    const snapshot_2 = getEditorSnapshot({
+      editorActorSnapshot: editorActor.getSnapshot(),
+      slateEditorInstance: slateEditor
+    });
+    if (draggingOnDragOrigin({
+      snapshot: snapshot_2,
+      position: position_7
+    })) {
+      event_12.preventDefault();
+      return;
     }
-  }, [onDragOver, editorActor, slateEditor]), handleDrop = useCallback((event_13) => {
-    if (onDrop?.(event_13), !event_13.isDefaultPrevented() && !event_13.isPropagationStopped()) {
-      const position_7 = getEventPosition({
-        schema: editorActor.getSnapshot().context.schema,
-        slateEditor,
-        event: event_13.nativeEvent
-      });
-      if (!position_7) {
-        console.warn("Could not find position for drop event");
-        return;
-      }
-      const range = ReactEditor.findEventRange(slateEditor, event_13);
-      slateEditor.select(range), editorActor.send({
-        type: "behavior event",
-        behaviorEvent: {
-          type: "drag.drop",
-          originEvent: {
-            dataTransfer: event_13.dataTransfer
-          },
-          position: position_7
+    editorActor.send({
+      type: "behavior event",
+      behaviorEvent: {
+        type: "drag.dragover",
+        originEvent: {
+          dataTransfer: event_12.dataTransfer
         },
-        editor: slateEditor
-      }), event_13.preventDefault();
+        position: position_7
+      },
+      editor: slateEditor,
+      nativeEvent: event_12
+    });
+  }, [onDragOver, editorActor, slateEditor]), handleDrop = useCallback((event_13) => {
+    if (onDrop?.(event_13), event_13.isDefaultPrevented() || event_13.isPropagationStopped())
+      return;
+    event_13.preventDefault();
+    const position_8 = getEventPosition({
+      schema: editorActor.getSnapshot().context.schema,
+      slateEditor,
+      event: event_13.nativeEvent
+    });
+    if (!position_8) {
+      console.warn("Could not find position for drop event");
+      return;
     }
+    const snapshot_3 = getEditorSnapshot({
+      editorActorSnapshot: editorActor.getSnapshot(),
+      slateEditorInstance: slateEditor
+    });
+    if (draggingOnDragOrigin({
+      snapshot: snapshot_3,
+      position: position_8
+    })) {
+      event_13.preventDefault();
+      return;
+    }
+    editorActor.send({
+      type: "behavior event",
+      behaviorEvent: {
+        type: "select",
+        selection: position_8.selection
+      },
+      editor: slateEditor
+    }), editorActor.send({
+      type: "behavior event",
+      behaviorEvent: {
+        type: "drag.drop",
+        originEvent: {
+          dataTransfer: event_13.dataTransfer
+        },
+        position: position_8
+      },
+      editor: slateEditor
+    });
   }, [onDrop, editorActor, slateEditor]), handleDragLeave = useCallback((event_14) => {
-    onDragLeave?.(event_14), !event_14.isDefaultPrevented() && !event_14.isPropagationStopped() && editorActor.send({
+    if (onDragLeave?.(event_14), event_14.isDefaultPrevented() || event_14.isPropagationStopped())
+      return;
+    event_14.stopPropagation();
+    const position_9 = getEventPosition({
+      schema: editorActor.getSnapshot().context.schema,
+      slateEditor,
+      event: event_14.nativeEvent
+    });
+    if (!position_9)
+      return;
+    const snapshot_4 = getEditorSnapshot({
+      editorActorSnapshot: editorActor.getSnapshot(),
+      slateEditorInstance: slateEditor
+    });
+    if (draggingOnDragOrigin({
+      snapshot: snapshot_4,
+      position: position_9
+    })) {
+      event_14.preventDefault();
+      return;
+    }
+    editorActor.send({
       type: "behavior event",
       behaviorEvent: {
         type: "drag.dragleave",