@tiptap/extension-drag-handle 3.16.0 → 3.17.0

package/dist/index.cjs

@@ -24,21 +24,25 @@ __export(index_exports, {
   DragHandlePlugin: () => DragHandlePlugin,
   default: () => index_default,
   defaultComputePositionConfig: () => defaultComputePositionConfig,
-  dragHandlePluginDefaultKey: () => dragHandlePluginDefaultKey
+  defaultRules: () => defaultRules,
+  dragHandlePluginDefaultKey: () => dragHandlePluginDefaultKey,
+  normalizeNestedOptions: () => normalizeNestedOptions
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/drag-handle.ts
-var import_core = require("@tiptap/core");
+var import_core2 = require("@tiptap/core");
 
 // src/drag-handle-plugin.ts
 var import_dom = require("@floating-ui/dom");
+var import_core = require("@tiptap/core");
 var import_extension_collaboration = require("@tiptap/extension-collaboration");
-var import_state = require("@tiptap/pm/state");
+var import_state2 = require("@tiptap/pm/state");
 var import_y_tiptap = require("@tiptap/y-tiptap");
 
 // src/helpers/dragHandler.ts
 var import_extension_node_range = require("@tiptap/extension-node-range");
+var import_state = require("@tiptap/pm/state");
 
 // src/helpers/cloneElement.ts
 function getCSSText(element) {
@@ -59,6 +63,191 @@ function cloneElement(node) {
   return clonedNode;
 }
 
+// src/helpers/defaultRules.ts
+var listItemFirstChild = {
+  id: "listItemFirstChild",
+  evaluate: ({ parent, isFirst }) => {
+    if (!isFirst) {
+      return 0;
+    }
+    const listItemTypes = ["listItem", "taskItem"];
+    if (parent && listItemTypes.includes(parent.type.name)) {
+      return 1e3;
+    }
+    return 0;
+  }
+};
+var listWrapperDeprioritize = {
+  id: "listWrapperDeprioritize",
+  evaluate: ({ node }) => {
+    const listItemTypes = ["listItem", "taskItem"];
+    const firstChild = node.firstChild;
+    if (firstChild && listItemTypes.includes(firstChild.type.name)) {
+      return 1e3;
+    }
+    return 0;
+  }
+};
+var inlineContent = {
+  id: "inlineContent",
+  evaluate: ({ node }) => {
+    if (node.isInline || node.isText) {
+      return 1e3;
+    }
+    return 0;
+  }
+};
+var defaultRules = [listItemFirstChild, listWrapperDeprioritize, inlineContent];
+
+// src/helpers/edgeDetection.ts
+var DEFAULT_EDGE_CONFIG = {
+  edges: ["left", "top"],
+  threshold: 12,
+  strength: 500
+};
+function normalizeEdgeDetection(input) {
+  if (input === void 0 || input === "left") {
+    return { ...DEFAULT_EDGE_CONFIG };
+  }
+  if (input === "right") {
+    return { edges: ["right", "top"], threshold: 12, strength: 500 };
+  }
+  if (input === "both") {
+    return { edges: ["left", "right", "top"], threshold: 12, strength: 500 };
+  }
+  if (input === "none") {
+    return { edges: [], threshold: 0, strength: 0 };
+  }
+  return { ...DEFAULT_EDGE_CONFIG, ...input };
+}
+function isNearEdge(coords, element, config) {
+  if (config.edges.length === 0) {
+    return false;
+  }
+  const rect = element.getBoundingClientRect();
+  const { threshold, edges } = config;
+  return edges.some((edge) => {
+    if (edge === "left") {
+      return coords.x - rect.left < threshold;
+    }
+    if (edge === "right") {
+      return rect.right - coords.x < threshold;
+    }
+    if (edge === "top") {
+      return coords.y - rect.top < threshold;
+    }
+    if (edge === "bottom") {
+      return rect.bottom - coords.y < threshold;
+    }
+    return false;
+  });
+}
+function calculateEdgeDeduction(coords, element, config, depth) {
+  if (!element || config.edges.length === 0) {
+    return 0;
+  }
+  if (isNearEdge(coords, element, config)) {
+    return config.strength * depth;
+  }
+  return 0;
+}
+
+// src/helpers/scoring.ts
+var BASE_SCORE = 1e3;
+function calculateScore(context, rules, edgeConfig, coords) {
+  let score = BASE_SCORE;
+  let excluded = false;
+  rules.every((rule) => {
+    const deduction = rule.evaluate(context);
+    score -= deduction;
+    if (score <= 0) {
+      excluded = true;
+      return false;
+    }
+    return true;
+  });
+  if (excluded) {
+    return -1;
+  }
+  const dom = context.view.nodeDOM(context.pos);
+  score -= calculateEdgeDeduction(coords, dom, edgeConfig, context.depth);
+  if (score <= 0) {
+    return -1;
+  }
+  return score;
+}
+
+// src/helpers/findBestDragTarget.ts
+function hasAncestorOfType($pos, depth, allowedTypes) {
+  const ancestorDepths = Array.from({ length: depth }, (_, i) => depth - 1 - i);
+  return ancestorDepths.some((d) => allowedTypes.includes($pos.node(d).type.name));
+}
+function findBestDragTarget(view, coords, options) {
+  if (!Number.isFinite(coords.x) || !Number.isFinite(coords.y)) {
+    return null;
+  }
+  const posInfo = view.posAtCoords({ left: coords.x, top: coords.y });
+  if (!posInfo) {
+    return null;
+  }
+  const { doc } = view.state;
+  const $pos = doc.resolve(posInfo.pos);
+  const rules = [];
+  if (options.defaultRules) {
+    rules.push(...defaultRules);
+  }
+  rules.push(...options.rules);
+  const depthLevels = Array.from({ length: $pos.depth }, (_, i) => $pos.depth - i);
+  const candidates = depthLevels.map((depth) => {
+    const node = $pos.node(depth);
+    const nodePos = $pos.before(depth);
+    if (options.allowedContainers && depth > 0) {
+      const inAllowedContainer = hasAncestorOfType($pos, depth, options.allowedContainers);
+      if (!inAllowedContainer) {
+        return null;
+      }
+    }
+    const parent = depth > 0 ? $pos.node(depth - 1) : null;
+    const index = depth > 0 ? $pos.index(depth - 1) : 0;
+    const siblingCount = parent ? parent.childCount : 1;
+    const context = {
+      node,
+      pos: nodePos,
+      depth,
+      parent,
+      index,
+      isFirst: index === 0,
+      isLast: index === siblingCount - 1,
+      $pos,
+      view
+    };
+    const score = calculateScore(context, rules, options.edgeDetection, coords);
+    if (score < 0) {
+      return null;
+    }
+    const dom = view.nodeDOM(nodePos);
+    return { node, pos: nodePos, depth, score, dom };
+  }).filter((candidate) => candidate !== null);
+  if (candidates.length === 0) {
+    return null;
+  }
+  candidates.sort((a, b) => {
+    if (b.score !== a.score) {
+      return b.score - a.score;
+    }
+    return b.depth - a.depth;
+  });
+  const winner = candidates[0];
+  if (!winner.dom) {
+    return null;
+  }
+  return {
+    node: winner.node,
+    pos: winner.pos,
+    dom: winner.dom
+  };
+}
+
 // src/helpers/findNextElementFromCursor.ts
 function findClosestTopLevelBlock(element, view) {
   let current = element;
@@ -67,15 +256,24 @@ function findClosestTopLevelBlock(element, view) {
   }
   return (current == null ? void 0 : current.parentElement) === view.dom ? current : void 0;
 }
+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 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 { x, y };
+    return null;
   }
   const topRect = firstBlock.getBoundingClientRect();
   const botRect = lastBlock.getBoundingClientRect();
+  if (!isValidRect(topRect) || !isValidRect(botRect)) {
+    return null;
+  }
   const clampedY = Math.min(Math.max(topRect.top + inset, y), botRect.bottom - inset);
   const epsilon = 0.5;
   const sameLeft = Math.abs(topRect.left - botRect.left) < epsilon;
@@ -86,12 +284,30 @@ function clampToContent(view, x, y, inset = 5) {
   } else {
   }
   const clampedX = Math.min(Math.max(rowRect.left + inset, x), rowRect.right - inset);
+  if (!Number.isFinite(clampedX) || !Number.isFinite(clampedY)) {
+    return null;
+  }
   return { x: clampedX, y: clampedY };
 }
 var findElementNextToCoords = (options) => {
-  const { x, y, editor } = options;
+  const { x, y, editor, nestedOptions } = options;
   const { view, state } = editor;
-  const { x: clampedX, y: clampedY } = clampToContent(view, x, y, 5);
+  const clamped = clampToContent(view, x, y, 5);
+  if (!clamped) {
+    return { resultElement: null, resultNode: null, pos: null };
+  }
+  const { x: clampedX, y: clampedY } = clamped;
+  if (nestedOptions == null ? void 0 : nestedOptions.enabled) {
+    const target = findBestDragTarget(view, { x: clampedX, y: clampedY }, nestedOptions);
+    if (!target) {
+      return { resultElement: null, resultNode: null, pos: null };
+    }
+    return {
+      resultElement: target.dom,
+      resultNode: target.node,
+      pos: target.pos
+    };
+  }
   const elements = view.root.elementsFromPoint(clampedX, clampedY);
   let block;
   Array.prototype.some.call(elements, (el) => {
@@ -131,31 +347,6 @@ var findElementNextToCoords = (options) => {
   };
 };
 
-// src/helpers/getComputedStyle.ts
-function getComputedStyle2(node, property) {
-  const style = window.getComputedStyle(node);
-  return style[property];
-}
-
-// src/helpers/minMax.ts
-function minMax(value = 0, min = 0, max = 0) {
-  return Math.min(Math.max(value, min), max);
-}
-
-// src/helpers/getInnerCoords.ts
-function getInnerCoords(view, x, y) {
-  const paddingLeft = parseInt(getComputedStyle2(view.dom, "paddingLeft"), 10);
-  const paddingRight = parseInt(getComputedStyle2(view.dom, "paddingRight"), 10);
-  const borderLeft = parseInt(getComputedStyle2(view.dom, "borderLeftWidth"), 10);
-  const borderRight = parseInt(getComputedStyle2(view.dom, "borderLeftWidth"), 10);
-  const bounds = view.dom.getBoundingClientRect();
-  const coords = {
-    left: minMax(x, bounds.left + paddingLeft + borderLeft, bounds.right - paddingRight - borderRight),
-    top: y
-  };
-  return coords;
-}
-
 // src/helpers/removeNode.ts
 function removeNode(node) {
   var _a;
@@ -163,39 +354,39 @@ function removeNode(node) {
 }
 
 // src/helpers/dragHandler.ts
-function getDragHandleRanges(event, editor) {
+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) {
+    const nodeStart = dragContext.pos;
+    const nodeEnd = dragContext.pos + dragContext.node.nodeSize;
+    return [
+      {
+        $from: doc.resolve(nodeStart),
+        $to: doc.resolve(nodeEnd)
+      }
+    ];
+  }
   const result = findElementNextToCoords({
     editor,
     x: event.clientX,
     y: event.clientY,
-    direction: "right"
+    direction: "right",
+    nestedOptions
   });
   if (!result.resultNode || result.pos === null) {
     return [];
   }
-  const x = event.clientX;
-  const coords = getInnerCoords(editor.view, x, event.clientY);
-  const posAtCoords = editor.view.posAtCoords(coords);
-  if (!posAtCoords) {
-    return [];
-  }
-  const { pos } = posAtCoords;
-  const nodeAt = doc.resolve(pos).parent;
-  if (!nodeAt) {
-    return [];
-  }
   const $from = doc.resolve(result.pos);
-  const $to = doc.resolve(result.pos + 1);
+  const $to = doc.resolve(result.pos + result.resultNode.nodeSize);
   return (0, import_extension_node_range.getSelectionRanges)($from, $to, 0);
 }
-function dragHandler(event, editor) {
+function dragHandler(event, editor, nestedOptions, dragContext) {
   const { view } = editor;
   if (!event.dataTransfer) {
     return;
   }
   const { empty, $from, $to } = view.state.selection;
-  const dragHandleRanges = getDragHandleRanges(event, editor);
+  const dragHandleRanges = getDragHandleRanges(event, editor, nestedOptions, dragContext);
   const selectionRanges = (0, import_extension_node_range.getSelectionRanges)($from, $to, 0);
   const isDragHandleWithinSelection = selectionRanges.some((range) => {
     return dragHandleRanges.find((dragHandleRange) => {
@@ -210,8 +401,16 @@ function dragHandler(event, editor) {
   const wrapper = document.createElement("div");
   const from = ranges[0].$from.pos;
   const to = ranges[ranges.length - 1].$to.pos;
-  const selection = import_extension_node_range.NodeRangeSelection.create(view.state.doc, from, to);
-  const slice = selection.content();
+  const isNestedDrag = (nestedOptions == null ? void 0 : nestedOptions.enabled) && (dragContext == null ? void 0 : dragContext.node);
+  let slice;
+  let selection;
+  if (isNestedDrag) {
+    slice = view.state.doc.slice(from, to);
+    selection = import_state.NodeSelection.create(view.state.doc, from);
+  } else {
+    selection = import_extension_node_range.NodeRangeSelection.create(view.state.doc, from, to);
+    slice = selection.content();
+  }
   ranges.forEach((range) => {
     const element = view.nodeDOM(range.$from.pos);
     const clonedElement = cloneElement(element);
@@ -278,7 +477,7 @@ var getOuterDomNode = (view, domNode) => {
   }
   return tmpDomNode;
 };
-var dragHandlePluginDefaultKey = new import_state.PluginKey("dragHandle");
+var dragHandlePluginDefaultKey = new import_state2.PluginKey("dragHandle");
 var DragHandlePlugin = ({
   pluginKey = dragHandlePluginDefaultKey,
   element,
@@ -287,7 +486,8 @@ var DragHandlePlugin = ({
   getReferencedVirtualElement,
   onNodeChange,
   onElementDragStart,
-  onElementDragEnd
+  onElementDragEnd,
+  nestedOptions
 }) => {
   const wrapper = document.createElement("div");
   let locked = false;
@@ -328,7 +528,7 @@ var DragHandlePlugin = ({
   }
   function onDragStart(e) {
     onElementDragStart == null ? void 0 : onElementDragStart(e);
-    dragHandler(e, editor);
+    dragHandler(e, editor, nestedOptions, { node: currentNode, pos: currentNodePos });
     if (element) {
       element.dataset.dragging = "true";
     }
@@ -346,21 +546,34 @@ var DragHandlePlugin = ({
       element.dataset.dragging = "false";
     }
   }
+  function onDrop() {
+    if ((0, import_core.isFirefox)()) {
+      const editorElement = editor.view.dom;
+      requestAnimationFrame(() => {
+        if (editorElement.isContentEditable) {
+          editorElement.contentEditable = "false";
+          editorElement.contentEditable = "true";
+        }
+      });
+    }
+  }
   element.addEventListener("dragstart", onDragStart);
   element.addEventListener("dragend", onDragEnd);
+  document.addEventListener("drop", onDrop);
   wrapper.appendChild(element);
   return {
     unbind() {
       element.removeEventListener("dragstart", onDragStart);
       element.removeEventListener("dragend", onDragEnd);
+      document.removeEventListener("drop", onDrop);
       if (rafId) {
         cancelAnimationFrame(rafId);
         rafId = null;
         pendingMouseCoords = null;
       }
     },
-    plugin: new import_state.Plugin({
-      key: typeof pluginKey === "string" ? new import_state.PluginKey(pluginKey) : pluginKey,
+    plugin: new import_state2.Plugin({
+      key: typeof pluginKey === "string" ? new import_state2.PluginKey(pluginKey) : pluginKey,
       state: {
         init() {
           return { locked: false };
@@ -442,6 +655,9 @@ var DragHandlePlugin = ({
           },
           // TODO: Kills even on hot reload
           destroy() {
+            element.removeEventListener("dragstart", onDragStart);
+            element.removeEventListener("dragend", onDragEnd);
+            document.removeEventListener("drop", onDrop);
             if (rafId) {
               cancelAnimationFrame(rafId);
               rafId = null;
@@ -499,25 +715,30 @@ var DragHandlePlugin = ({
                 x,
                 y,
                 direction: "right",
-                editor
+                editor,
+                nestedOptions
               });
               if (!nodeData.resultElement) {
                 return;
               }
               let domNode = nodeData.resultElement;
-              domNode = getOuterDomNode(view, domNode);
-              if (domNode === view.dom) {
-                return;
-              }
-              if ((domNode == null ? void 0 : domNode.nodeType) !== 1) {
-                return;
+              let targetNode = nodeData.resultNode;
+              let targetPos = nodeData.pos;
+              if (!(nestedOptions == null ? void 0 : nestedOptions.enabled)) {
+                domNode = getOuterDomNode(view, domNode);
+                if (domNode === view.dom) {
+                  return;
+                }
+                if ((domNode == null ? void 0 : domNode.nodeType) !== 1) {
+                  return;
+                }
+                const domNodePos = view.posAtDOM(domNode, 0);
+                targetNode = getOuterNode(editor.state.doc, domNodePos);
+                targetPos = getOuterNodePos(editor.state.doc, domNodePos);
               }
-              const domNodePos = view.posAtDOM(domNode, 0);
-              const outerNode = getOuterNode(editor.state.doc, domNodePos);
-              if (outerNode !== currentNode) {
-                const outerNodePos = getOuterNodePos(editor.state.doc, domNodePos);
-                currentNode = outerNode;
-                currentNodePos = outerNodePos;
+              if (targetNode !== currentNode) {
+                currentNode = targetNode;
+                currentNodePos = targetPos != null ? targetPos : -1;
                 currentNodeRelPos = getRelativePos(view.state, currentNodePos);
                 onNodeChange == null ? void 0 : onNodeChange({ editor, node: currentNode, pos: currentNodePos });
                 repositionDragHandle(domNode);
@@ -532,12 +753,42 @@ var DragHandlePlugin = ({
   };
 };
 
+// src/helpers/normalizeOptions.ts
+function normalizeNestedOptions(input) {
+  var _a, _b;
+  if (input === false || input === void 0) {
+    return {
+      enabled: false,
+      rules: [],
+      defaultRules: true,
+      allowedContainers: void 0,
+      edgeDetection: normalizeEdgeDetection("none")
+    };
+  }
+  if (input === true) {
+    return {
+      enabled: true,
+      rules: [],
+      defaultRules: true,
+      allowedContainers: void 0,
+      edgeDetection: normalizeEdgeDetection("left")
+    };
+  }
+  return {
+    enabled: true,
+    rules: (_a = input.rules) != null ? _a : [],
+    defaultRules: (_b = input.defaultRules) != null ? _b : true,
+    allowedContainers: input.allowedContainers,
+    edgeDetection: normalizeEdgeDetection(input.edgeDetection)
+  };
+}
+
 // src/drag-handle.ts
 var defaultComputePositionConfig = {
   placement: "left-start",
   strategy: "absolute"
 };
-var DragHandle = import_core.Extension.create({
+var DragHandle = import_core2.Extension.create({
   name: "dragHandle",
   addOptions() {
     return {
@@ -552,7 +803,8 @@ var DragHandle = import_core.Extension.create({
         return null;
       },
       onElementDragStart: void 0,
-      onElementDragEnd: void 0
+      onElementDragEnd: void 0,
+      nested: false
     };
   },
   addCommands() {
@@ -573,6 +825,7 @@ var DragHandle = import_core.Extension.create({
   },
   addProseMirrorPlugins() {
     const element = this.options.render();
+    const nestedOptions = normalizeNestedOptions(this.options.nested);
     return [
       DragHandlePlugin({
         computePositionConfig: { ...defaultComputePositionConfig, ...this.options.computePositionConfig },
@@ -581,7 +834,8 @@ var DragHandle = import_core.Extension.create({
         editor: this.editor,
         onNodeChange: this.options.onNodeChange,
         onElementDragStart: this.options.onElementDragStart,
-        onElementDragEnd: this.options.onElementDragEnd
+        onElementDragEnd: this.options.onElementDragEnd,
+        nestedOptions
       }).plugin
     ];
   }
@@ -594,6 +848,8 @@ var index_default = DragHandle;
   DragHandle,
   DragHandlePlugin,
   defaultComputePositionConfig,
-  dragHandlePluginDefaultKey
+  defaultRules,
+  dragHandlePluginDefaultKey,
+  normalizeNestedOptions
 });
 //# sourceMappingURL=index.cjs.map