@tiptap/extension-drag-handle 3.27.0 → 3.27.2

package/dist/index.cjs

@@ -48,7 +48,7 @@ var import_state = require("@tiptap/pm/state");
 function getCSSText(element, properties) {
   const style = getComputedStyle(element);
   if (properties) {
-    return properties.filter((p) => p.trim().length > 0).map((p) => `${p}:${style.getPropertyValue(p)};`).join("");
+    return properties.map((property) => property.trim()).filter((property) => property.length > 0).map((property) => `${property}:${style.getPropertyValue(property)};`).join("");
   }
   let value = "";
   for (let i = 0; i < style.length; i += 1) {
@@ -306,28 +306,41 @@ function findBestDragTarget(view, coords, options) {
 
 // src/helpers/findNextElementFromCursor.ts
 function findClosestTopLevelBlock(element, view) {
+  var _a;
   let current = element;
   while ((current == null ? void 0 : current.parentElement) && current.parentElement !== view.dom) {
     current = current.parentElement;
   }
-  return (current == null ? void 0 : current.parentElement) === view.dom ? current : void 0;
+  if ((current == null ? void 0 : current.parentElement) !== view.dom) {
+    return void 0;
+  }
+  if (!((_a = current.pmViewDesc) == null ? void 0 : _a.node)) {
+    return void 0;
+  }
+  return current;
 }
 function isValidRect(rect) {
   return Number.isFinite(rect.top) && Number.isFinite(rect.bottom) && Number.isFinite(rect.left) && Number.isFinite(rect.right) && rect.width > 0 && rect.height > 0;
 }
+function edgeBlockRect(container, edge) {
+  let current = edge === "first" ? container.firstElementChild : container.lastElementChild;
+  while (current) {
+    const rect = current.getBoundingClientRect();
+    if (isValidRect(rect)) {
+      return rect;
+    }
+    current = edge === "first" ? current.nextElementSibling : current.previousElementSibling;
+  }
+  return null;
+}
 function clampToContent(view, x, y, inset = 5) {
   if (!Number.isFinite(x) || !Number.isFinite(y)) {
     return null;
   }
   const container = view.dom;
-  const firstBlock = container.firstElementChild;
-  const lastBlock = container.lastElementChild;
-  if (!firstBlock || !lastBlock) {
-    return null;
-  }
-  const topRect = firstBlock.getBoundingClientRect();
-  const botRect = lastBlock.getBoundingClientRect();
-  if (!isValidRect(topRect) || !isValidRect(botRect)) {
+  const topRect = edgeBlockRect(container, "first");
+  const botRect = edgeBlockRect(container, "last");
+  if (!topRect || !botRect) {
     return null;
   }
   const clampedY = Math.min(Math.max(topRect.top + inset, y), botRect.bottom - inset);
@@ -453,6 +466,15 @@ function removeNode(node) {
 function getDragImageOffset(direction, wrapperWidth) {
   return direction === "rtl" ? wrapperWidth : 0;
 }
+function shouldResetMargin(dragImageProperties) {
+  if (!dragImageProperties) {
+    return true;
+  }
+  return !dragImageProperties.some((property) => {
+    const p = property.trim().toLowerCase();
+    return p === "margin" || p.startsWith("margin-");
+  });
+}
 function getDragHandleRanges(event, editor, nestedOptions, dragContext) {
   const { doc } = editor.view.state;
   if ((nestedOptions == null ? void 0 : nestedOptions.enabled) && (dragContext == null ? void 0 : dragContext.node) && dragContext.pos >= 0) {
@@ -514,13 +536,16 @@ function dragHandler(event, editor, nestedOptions, dragContext, dragImagePropert
     selection = import_extension_node_range.NodeRangeSelection.create(view.state.doc, from, to);
     slice = selection.content();
   }
+  const resetMargin = shouldResetMargin(dragImageProperties);
   ranges.forEach((range) => {
     const element = getDraggedBlockElement(view, range.$from.pos);
     if (!element) {
       return;
     }
     const clonedElement = cloneElement(element, dragImageProperties);
-    clonedElement.style.margin = "0";
+    if (resetMargin) {
+      clonedElement.style.margin = "0";
+    }
     wrapper.append(clonedElement);
   });
   wrapper.style.position = "absolute";
@@ -548,8 +573,56 @@ function dragHandler(event, editor, nestedOptions, dragContext, dragImagePropert
   document.addEventListener("dragend", cleanupDragPreview);
 }
 
+// src/helpers/getOuterNode.ts
+var getOuterNodePos = (doc, pos) => {
+  const resolvedPos = doc.resolve(pos);
+  const { depth } = resolvedPos;
+  if (depth === 0) {
+    return pos;
+  }
+  const a = resolvedPos.pos - resolvedPos.parentOffset;
+  return a - 1;
+};
+var getOuterNode = (doc, pos) => {
+  const node = doc.nodeAt(pos);
+  const resolvedPos = doc.resolve(pos);
+  let { depth } = resolvedPos;
+  let parent = node;
+  while (depth > 0) {
+    const currentNode = resolvedPos.node(depth);
+    depth -= 1;
+    if (depth === 0) {
+      parent = currentNode;
+    }
+  }
+  return parent;
+};
+
 // src/helpers/nodeRangeDrop.ts
 var import_extension_node_range2 = require("@tiptap/extension-node-range");
+function mapPendingRestoreAnchor(pendingRestore, tr, options) {
+  if (!tr.docChanged) {
+    return pendingRestore;
+  }
+  if (options.isChangeOrigin && pendingRestore.relativeAnchorPos != null) {
+    const newPos = options.getAbsolutePos(pendingRestore.relativeAnchorPos);
+    if (!Number.isFinite(newPos) || newPos <= 0) {
+      return null;
+    }
+    return {
+      ...pendingRestore,
+      anchorPos: newPos
+    };
+  }
+  const mappedResult = tr.mapping.mapResult(pendingRestore.anchorPos, 1);
+  if (mappedResult.deleted) {
+    return null;
+  }
+  return {
+    ...pendingRestore,
+    anchorPos: mappedResult.pos
+  };
+}
 function sumNodeSizes(parent, from, to) {
   let size = 0;
   for (let i = from; i < to; i += 1) {
@@ -596,31 +669,6 @@ function createDroppedNodeRangeSelection(doc, anchorPos, nodeCount, depth) {
   }
 }
 
-// src/helpers/getOuterNode.ts
-var getOuterNodePos = (doc, pos) => {
-  const resolvedPos = doc.resolve(pos);
-  const { depth } = resolvedPos;
-  if (depth === 0) {
-    return pos;
-  }
-  const a = resolvedPos.pos - resolvedPos.parentOffset;
-  return a - 1;
-};
-var getOuterNode = (doc, pos) => {
-  const node = doc.nodeAt(pos);
-  const resolvedPos = doc.resolve(pos);
-  let { depth } = resolvedPos;
-  let parent = node;
-  while (depth > 0) {
-    const currentNode = resolvedPos.node(depth);
-    depth -= 1;
-    if (depth === 0) {
-      parent = currentNode;
-    }
-  }
-  return parent;
-};
-
 // src/drag-handle-plugin.ts
 var getRelativePos = (state, absolutePos) => {
   const ystate = import_y_tiptap.ySyncPluginKey.getState(state);
@@ -670,10 +718,40 @@ var DragHandlePlugin = ({
   let currentNodePos = -1;
   let currentNodeRelPos;
   let rafId = null;
-  let restoreRafId = null;
   let pendingMouseCoords = null;
   let activeDragRange = null;
   let pendingRestore = null;
+  function clearDragRangeState() {
+    activeDragRange = null;
+    pendingRestore = null;
+  }
+  function remapPendingRestore(tr, state) {
+    if (!pendingRestore) {
+      return;
+    }
+    pendingRestore = mapPendingRestoreAnchor(pendingRestore, tr, {
+      isChangeOrigin: (0, import_extension_collaboration.isChangeOrigin)(tr),
+      getAbsolutePos: (relativePos) => getAbsolutePos(state, relativePos)
+    });
+  }
+  function buildRestoreTransaction(state) {
+    if (!pendingRestore) {
+      return null;
+    }
+    const nodeRangeSelection = createDroppedNodeRangeSelection(
+      state.doc,
+      pendingRestore.anchorPos,
+      pendingRestore.nodeCount,
+      pendingRestore.depth
+    );
+    if (!nodeRangeSelection) {
+      pendingRestore = null;
+      activeDragRange = null;
+      return null;
+    }
+    clearDragRangeState();
+    return state.tr.setSelection(nodeRangeSelection);
+  }
   function hideHandle() {
     if (!element) {
       return;
@@ -732,17 +810,6 @@ var DragHandlePlugin = ({
       element.dataset.dragging = "false";
     }
   }
-  function restoreNodeRangeSelection({ nodeCount, depth, anchorPos }) {
-    const nodeRangeSelection = createDroppedNodeRangeSelection(
-      editor.state.doc,
-      anchorPos,
-      nodeCount,
-      depth
-    );
-    if (nodeRangeSelection) {
-      editor.view.dispatch(editor.state.tr.setSelection(nodeRangeSelection));
-    }
-  }
   function onDrop(e) {
     if (!e.target || !editor.view.dom.contains(e.target)) {
       return;
@@ -759,17 +826,14 @@ var DragHandlePlugin = ({
     if (!activeDragRange || editor.view.state.selection.empty) {
       return;
     }
+    const anchorPos = editor.state.selection.from;
+    const relativeAnchorPos = getRelativePos(editor.state, anchorPos);
     pendingRestore = {
       ...activeDragRange,
-      anchorPos: editor.state.selection.from
+      anchorPos,
+      relativeAnchorPos: relativeAnchorPos != null ? relativeAnchorPos : void 0
     };
-    restoreRafId = requestAnimationFrame(() => {
-      restoreRafId = null;
-      if (pendingRestore) {
-        restoreNodeRangeSelection(pendingRestore);
-        pendingRestore = null;
-      }
-    });
+    editor.view.dispatch(editor.state.tr.setMeta("addToHistory", false));
   }
   function cleanup() {
     element.removeEventListener("dragstart", onDragStart);
@@ -780,10 +844,7 @@ var DragHandlePlugin = ({
       rafId = null;
       pendingMouseCoords = null;
     }
-    if (restoreRafId) {
-      cancelAnimationFrame(restoreRafId);
-      restoreRafId = null;
-    }
+    clearDragRangeState();
   }
   wrapper.appendChild(element);
   return {
@@ -797,14 +858,7 @@ var DragHandlePlugin = ({
           return { locked: false };
         },
         apply(tr, value, _oldState, state) {
-          if (pendingRestore && tr.docChanged) {
-            const mappedResult = tr.mapping.mapResult(pendingRestore.anchorPos, 1);
-            if (mappedResult.deleted) {
-              pendingRestore = null;
-            } else {
-              pendingRestore.anchorPos = mappedResult.pos;
-            }
-          }
+          remapPendingRestore(tr, state);
           const isLocked = tr.getMeta("lockDragHandle");
           const hideDragHandle = tr.getMeta("hideDragHandle");
           if (isLocked !== void 0) {
@@ -835,6 +889,9 @@ var DragHandlePlugin = ({
           return value;
         }
       },
+      appendTransaction(_transactions, _oldState, newState) {
+        return buildRestoreTransaction(newState);
+      },
       view: (view) => {
         var _a;
         element.draggable = true;
@@ -845,6 +902,7 @@ var DragHandlePlugin = ({
         wrapper.style.position = "absolute";
         wrapper.style.top = "0";
         wrapper.style.left = "0";
+        wrapper.style.zIndex = "10";
         element.addEventListener("dragstart", onDragStart);
         element.addEventListener("dragend", onDragEnd);
         document.addEventListener("drop", onDrop);