@portabletext/editor 1.40.4 → 1.41.0

package/lib/_chunks-es/util.is-selection-collapsed.js

@@ -1,7 +1,11 @@
+function getSelectionEndPoint(selection) {
+  return selection ? selection.backward ? selection.anchor : selection.focus : null;
+}
 function isSelectionCollapsed(selection) {
   return selection ? selection.anchor.path.join() === selection.focus.path.join() && selection.anchor.offset === selection.focus.offset : !1;
 }
 export {
+  getSelectionEndPoint,
   isSelectionCollapsed
 };
 //# sourceMappingURL=util.is-selection-collapsed.js.map

package/lib/_chunks-es/util.is-selection-collapsed.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.is-selection-collapsed.js","sources":["../../src/utils/util.is-selection-collapsed.ts"],"sourcesContent":["import type {EditorSelection} from '../types/editor'\n\n/**\n * @public\n */\nexport function isSelectionCollapsed(selection: EditorSelection) {\n  if (!selection) {\n    return false\n  }\n\n  return (\n    selection.anchor.path.join() === selection.focus.path.join() &&\n    selection.anchor.offset === selection.focus.offset\n  )\n}\n"],"names":["isSelectionCollapsed","selection","anchor","path","join","focus","offset"],"mappings":"AAKO,SAASA,qBAAqBC,WAA4B;AAC/D,SAAKA,YAKHA,UAAUC,OAAOC,KAAKC,KAAAA,MAAWH,UAAUI,MAAMF,KAAKC,KAAAA,KACtDH,UAAUC,OAAOI,WAAWL,UAAUI,MAAMC,SALrC;AAOX;"}
+{"version":3,"file":"util.is-selection-collapsed.js","sources":["../../src/utils/util.get-selection-end-point.ts","../../src/utils/util.is-selection-collapsed.ts"],"sourcesContent":["import type {EditorSelection, EditorSelectionPoint} from '..'\n\n/**\n * @public\n */\nexport function getSelectionEndPoint<\n  TEditorSelection extends NonNullable<EditorSelection> | null,\n  TEditorSelectionPoint extends\n    EditorSelectionPoint | null = TEditorSelection extends NonNullable<EditorSelection>\n    ? EditorSelectionPoint\n    : null,\n>(selection: TEditorSelection): TEditorSelectionPoint {\n  if (!selection) {\n    return null as TEditorSelectionPoint\n  }\n\n  return (\n    selection.backward ? selection.anchor : selection.focus\n  ) as TEditorSelectionPoint\n}\n","import type {EditorSelection} from '../types/editor'\n\n/**\n * @public\n */\nexport function isSelectionCollapsed(selection: EditorSelection) {\n  if (!selection) {\n    return false\n  }\n\n  return (\n    selection.anchor.path.join() === selection.focus.path.join() &&\n    selection.anchor.offset === selection.focus.offset\n  )\n}\n"],"names":["getSelectionEndPoint","selection","backward","anchor","focus","isSelectionCollapsed","path","join","offset"],"mappings":"AAKO,SAASA,qBAMdC,WAAoD;AACpD,SAAKA,YAKHA,UAAUC,WAAWD,UAAUE,SAASF,UAAUG,QAJ3C;AAMX;ACdO,SAASC,qBAAqBJ,WAA4B;AAC/D,SAAKA,YAKHA,UAAUE,OAAOG,KAAKC,KAAAA,MAAWN,UAAUG,MAAME,KAAKC,KAAAA,KACtDN,UAAUE,OAAOK,WAAWP,UAAUG,MAAMI,SALrC;AAOX;"}

package/lib/index.cjs

@@ -65,6 +65,19 @@ function getDragSelection({
   }
   return dragSelection;
 }
+function draggingOnDragOrigin({
+  snapshot,
+  position
+}) {
+  const dragOrigin = snapshot.beta.internalDrag?.origin;
+  return dragOrigin ? selector_isOverlappingSelection.isOverlappingSelection(position.selection)({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection: dragOrigin.selection
+    }
+  }) : !1;
+}
 function getEventPosition({
   schema,
   slateEditor,
@@ -146,6 +159,22 @@ function getEventPositionBlock({
   slateEditor,
   event
 }) {
+  const [firstBlock] = editorProvider.getFirstBlock({
+    editor: slateEditor
+  });
+  if (!firstBlock)
+    return;
+  const firstBlockRect = slateDom.DOMEditor.toDOMNode(slateEditor, firstBlock).getBoundingClientRect();
+  if (event.pageY < firstBlockRect.top)
+    return "start";
+  const [lastBlock] = editorProvider.getLastBlock({
+    editor: slateEditor
+  });
+  if (!lastBlock)
+    return;
+  const lastBlockRef = slateDom.DOMEditor.toDOMNode(slateEditor, lastBlock).getBoundingClientRect();
+  if (event.pageY > lastBlockRef.bottom)
+    return "end";
   const elementRect = slateDom.DOMEditor.toDOMNode(slateEditor, node).getBoundingClientRect(), top = elementRect.top, height = elementRect.height;
   return Math.abs(top - event.pageY) < height / 2 ? "start" : "end";
 }
@@ -164,7 +193,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 {
@@ -292,13 +325,13 @@ function DefaultInlineObject(props) {
 function DropIndicator() {
   const $ = reactCompilerRuntime.c(1);
   let t0;
-  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-drop-indicator", style: {
+  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", {}) }), $[0] = t0) : t0 = $[0], t0;
 }
 editorProvider.debugWithName("components:Element");
 const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
@@ -1111,78 +1144,111 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
     };
   }, [slateEditor, editorActor]);
   const handleDragStart = React.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 = editorProvider.getEditorSnapshot({
+      editorActorSnapshot: editorActor.getSnapshot(),
+      slateEditorInstance: slateEditor
+    }), dragSelection = getDragSelection({
+      eventSelection: position_4.selection,
+      snapshot
+    }), selectingEntireBlocks = selector_isOverlappingSelection.isSelectingEntireBlocks({
+      context: {
+        ...snapshot.context,
+        selection: dragSelection
       }
-      const snapshot = editorProvider.getEditorSnapshot({
-        editorActorSnapshot: editorActor.getSnapshot(),
-        slateEditorInstance: slateEditor
-      }), dragSelection = getDragSelection({
-        eventSelection: position_4.selection,
-        snapshot
-      }), selectingEntireBlocks = selector_isOverlappingSelection.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: util_isSelectionCollapsed.isSelectionCollapsed(dragSelection) ? dragSelection : {
+          anchor: util_isSelectionCollapsed.getSelectionEndPoint(dragSelection),
+          focus: util_isSelectionCollapsed.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 = React.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 = editorProvider.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",
@@ -1191,9 +1257,9 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
         }
       },
       editor: slateEditor
-    }), event_9.stopPropagation());
+    });
   }, [onDrag, editorActor, slateEditor]), handleDragEnd = React.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",
@@ -1202,76 +1268,139 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
         }
       },
       editor: slateEditor
-    }), event_10.stopPropagation());
+    }));
   }, [onDragEnd, editorActor, slateEditor]), handleDragEnter = React.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 = editorProvider.getEditorSnapshot({
+      editorActorSnapshot: editorActor.getSnapshot(),
+      slateEditorInstance: slateEditor
+    });
+    if (draggingOnDragOrigin({
+      snapshot: snapshot_1,
+      position: position_6
+    })) {
+      event_11.preventDefault();
+      return;
     }
-  }, [onDragEnter, editorActor, slateEditor]), handleDragOver = React.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 = React.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 = editorProvider.getEditorSnapshot({
+      editorActorSnapshot: editorActor.getSnapshot(),
+      slateEditorInstance: slateEditor
+    });
+    if (draggingOnDragOrigin({
+      snapshot: snapshot_2,
+      position: position_7
+    })) {
+      event_12.preventDefault();
+      return;
     }
-  }, [onDragOver, editorActor, slateEditor]), handleDrop = React.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 = slateReact.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 = React.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 = editorProvider.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 = React.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 = editorProvider.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",