@tiptap/extension-drag-handle 2.24.2 → 3.0.0-beta.10

package/dist/index.js

@@ -1,493 +1,484 @@
-import { Extension } from '@tiptap/core';
-import { isChangeOrigin } from '@tiptap/extension-collaboration';
-import { PluginKey, Plugin } from '@tiptap/pm/state';
-import tippy from 'tippy.js';
-import { ySyncPluginKey, absolutePositionToRelativePosition, relativePositionToAbsolutePosition } from 'y-prosemirror';
-import { getSelectionRanges, NodeRangeSelection } from '@tiptap/extension-node-range';
+// src/drag-handle.ts
+import { Extension } from "@tiptap/core";
 
+// src/drag-handle-plugin.ts
+import { computePosition } from "@floating-ui/dom";
+import { isChangeOrigin } from "@tiptap/extension-collaboration";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import {
+  absolutePositionToRelativePosition,
+  relativePositionToAbsolutePosition,
+  ySyncPluginKey
+} from "@tiptap/y-tiptap";
+
+// src/helpers/dragHandler.ts
+import { getSelectionRanges, NodeRangeSelection } from "@tiptap/extension-node-range";
+
+// src/helpers/cloneElement.ts
 function getCSSText(element) {
-    let value = '';
-    const style = getComputedStyle(element);
-    for (let i = 0; i < style.length; i += 1) {
-        value += `${style[i]}:${style.getPropertyValue(style[i])};`;
-    }
-    return value;
+  let value = "";
+  const style = getComputedStyle(element);
+  for (let i = 0; i < style.length; i += 1) {
+    value += `${style[i]}:${style.getPropertyValue(style[i])};`;
+  }
+  return value;
 }
 function cloneElement(node) {
-    const clonedNode = node.cloneNode(true);
-    const sourceElements = [node, ...Array.from(node.getElementsByTagName('*'))];
-    const targetElements = [clonedNode, ...Array.from(clonedNode.getElementsByTagName('*'))];
-    sourceElements.forEach((sourceElement, index) => {
-        targetElements[index].style.cssText = getCSSText(sourceElement);
-    });
-    return clonedNode;
+  const clonedNode = node.cloneNode(true);
+  const sourceElements = [node, ...Array.from(node.getElementsByTagName("*"))];
+  const targetElements = [clonedNode, ...Array.from(clonedNode.getElementsByTagName("*"))];
+  sourceElements.forEach((sourceElement, index) => {
+    targetElements[index].style.cssText = getCSSText(sourceElement);
+  });
+  return clonedNode;
 }
 
-const findElementNextToCoords = (options) => {
-    const { x, y, direction, editor, } = options;
-    let resultElement = null;
-    let resultNode = null;
-    let pos = null;
-    let currentX = x;
-    while (resultNode === null && currentX < window.innerWidth && currentX > 0) {
-        const allElements = document.elementsFromPoint(currentX, y);
-        const prosemirrorIndex = allElements.findIndex(element => element.classList.contains('ProseMirror'));
-        const filteredElements = allElements.slice(0, prosemirrorIndex);
-        if (filteredElements.length > 0) {
-            const target = filteredElements[0];
-            resultElement = target;
-            pos = editor.view.posAtDOM(target, 0);
-            if (pos >= 0) {
-                resultNode = editor.state.doc.nodeAt(Math.max(pos - 1, 0));
-                if (resultNode === null || resultNode === void 0 ? void 0 : resultNode.isText) {
-                    resultNode = editor.state.doc.nodeAt(Math.max(pos - 1, 0));
-                }
-                if (!resultNode) {
-                    resultNode = editor.state.doc.nodeAt(Math.max(pos, 0));
-                }
-                break;
-            }
+// src/helpers/findNextElementFromCursor.ts
+var findElementNextToCoords = (options) => {
+  const { x, y, direction, editor } = options;
+  let resultElement = null;
+  let resultNode = null;
+  let pos = null;
+  let currentX = x;
+  while (resultNode === null && currentX < window.innerWidth && currentX > 0) {
+    const allElements = document.elementsFromPoint(currentX, y);
+    const prosemirrorIndex = allElements.findIndex((element) => element.classList.contains("ProseMirror"));
+    const filteredElements = allElements.slice(0, prosemirrorIndex);
+    if (filteredElements.length > 0) {
+      const target = filteredElements[0];
+      resultElement = target;
+      pos = editor.view.posAtDOM(target, 0);
+      if (pos >= 0) {
+        resultNode = editor.state.doc.nodeAt(Math.max(pos - 1, 0));
+        if (resultNode == null ? void 0 : resultNode.isText) {
+          resultNode = editor.state.doc.nodeAt(Math.max(pos - 1, 0));
         }
-        if (direction === 'left') {
-            currentX -= 1;
-        }
-        else {
-            currentX += 1;
+        if (!resultNode) {
+          resultNode = editor.state.doc.nodeAt(Math.max(pos, 0));
         }
+        break;
+      }
+    }
+    if (direction === "left") {
+      currentX -= 1;
+    } else {
+      currentX += 1;
     }
-    return { resultElement, resultNode, pos: pos !== null && pos !== void 0 ? pos : null };
+  }
+  return { resultElement, resultNode, pos: pos != null ? pos : null };
 };
 
-function getComputedStyle$1(node, property) {
-    const style = window.getComputedStyle(node);
-    return style[property];
+// 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);
+  return Math.min(Math.max(value, min), max);
 }
 
+// src/helpers/getInnerCoords.ts
 function getInnerCoords(view, x, y) {
-    const paddingLeft = parseInt(getComputedStyle$1(view.dom, 'paddingLeft'), 10);
-    const paddingRight = parseInt(getComputedStyle$1(view.dom, 'paddingRight'), 10);
-    const borderLeft = parseInt(getComputedStyle$1(view.dom, 'borderLeftWidth'), 10);
-    const borderRight = parseInt(getComputedStyle$1(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;
+  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;
-    (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+  var _a;
+  (_a = node.parentNode) == null ? void 0 : _a.removeChild(node);
 }
 
+// src/helpers/dragHandler.ts
 function getDragHandleRanges(event, editor) {
-    const { doc } = editor.view.state;
-    const result = findElementNextToCoords({
-        editor, x: event.clientX, y: event.clientY, direction: 'right',
-    });
-    if (!result.resultNode || result.pos === null) {
-        return [];
-    }
-    const x = event.clientX;
-    // @ts-ignore
-    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);
-    return getSelectionRanges($from, $to, 0);
+  const { doc } = editor.view.state;
+  const result = findElementNextToCoords({
+    editor,
+    x: event.clientX,
+    y: event.clientY,
+    direction: "right"
+  });
+  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);
+  return getSelectionRanges($from, $to, 0);
 }
 function dragHandler(event, editor) {
-    const { view } = editor;
-    if (!event.dataTransfer) {
-        return;
-    }
-    const { empty, $from, $to } = view.state.selection;
-    const dragHandleRanges = getDragHandleRanges(event, editor);
-    const selectionRanges = getSelectionRanges($from, $to, 0);
-    const isDragHandleWithinSelection = selectionRanges.some(range => {
-        return dragHandleRanges.find(dragHandleRange => {
-            return dragHandleRange.$from === range.$from
-                && dragHandleRange.$to === range.$to;
-        });
+  const { view } = editor;
+  if (!event.dataTransfer) {
+    return;
+  }
+  const { empty, $from, $to } = view.state.selection;
+  const dragHandleRanges = getDragHandleRanges(event, editor);
+  const selectionRanges = getSelectionRanges($from, $to, 0);
+  const isDragHandleWithinSelection = selectionRanges.some((range) => {
+    return dragHandleRanges.find((dragHandleRange) => {
+      return dragHandleRange.$from === range.$from && dragHandleRange.$to === range.$to;
     });
-    const ranges = empty || !isDragHandleWithinSelection
-        ? dragHandleRanges
-        : selectionRanges;
-    if (!ranges.length) {
-        return;
-    }
-    const { tr } = view.state;
-    const wrapper = document.createElement('div');
-    const from = ranges[0].$from.pos;
-    const to = ranges[ranges.length - 1].$to.pos;
-    const selection = NodeRangeSelection.create(view.state.doc, from, to);
-    const slice = selection.content();
-    ranges.forEach(range => {
-        const element = view.nodeDOM(range.$from.pos);
-        const clonedElement = cloneElement(element);
-        wrapper.append(clonedElement);
-    });
-    wrapper.style.position = 'absolute';
-    wrapper.style.top = '-10000px';
-    document.body.append(wrapper);
-    event.dataTransfer.clearData();
-    event.dataTransfer.setDragImage(wrapper, 0, 0);
-    // tell ProseMirror the dragged content
-    view.dragging = { slice, move: true };
-    tr.setSelection(selection);
-    view.dispatch(tr);
-    // clean up
-    document.addEventListener('drop', () => removeNode(wrapper), { once: true });
+  });
+  const ranges = empty || !isDragHandleWithinSelection ? dragHandleRanges : selectionRanges;
+  if (!ranges.length) {
+    return;
+  }
+  const { tr } = view.state;
+  const wrapper = document.createElement("div");
+  const from = ranges[0].$from.pos;
+  const to = ranges[ranges.length - 1].$to.pos;
+  const selection = NodeRangeSelection.create(view.state.doc, from, to);
+  const slice = selection.content();
+  ranges.forEach((range) => {
+    const element = view.nodeDOM(range.$from.pos);
+    const clonedElement = cloneElement(element);
+    wrapper.append(clonedElement);
+  });
+  wrapper.style.position = "absolute";
+  wrapper.style.top = "-10000px";
+  document.body.append(wrapper);
+  event.dataTransfer.clearData();
+  event.dataTransfer.setDragImage(wrapper, 0, 0);
+  view.dragging = { slice, move: true };
+  tr.setSelection(selection);
+  view.dispatch(tr);
+  document.addEventListener("drop", () => removeNode(wrapper), { once: true });
 }
 
-const 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;
+// 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;
 };
-const 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;
-        }
+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;
+  }
+  return parent;
 };
 
-const getRelativePos = (state, absolutePos) => {
-    const ystate = ySyncPluginKey.getState(state);
-    if (!ystate) {
-        return null;
-    }
-    return absolutePositionToRelativePosition(absolutePos, ystate.type, ystate.binding.mapping);
+// src/drag-handle-plugin.ts
+var getRelativePos = (state, absolutePos) => {
+  const ystate = ySyncPluginKey.getState(state);
+  if (!ystate) {
+    return null;
+  }
+  return absolutePositionToRelativePosition(absolutePos, ystate.type, ystate.binding.mapping);
 };
-const getAbsolutePos = (state, relativePos) => {
-    const ystate = ySyncPluginKey.getState(state);
-    if (!ystate) {
-        return -1;
-    }
-    return relativePositionToAbsolutePosition(ystate.doc, ystate.type, relativePos, ystate.binding.mapping) || 0;
+var getAbsolutePos = (state, relativePos) => {
+  const ystate = ySyncPluginKey.getState(state);
+  if (!ystate) {
+    return -1;
+  }
+  return relativePositionToAbsolutePosition(ystate.doc, ystate.type, relativePos, ystate.binding.mapping) || 0;
 };
-const getOuterDomNode = (view, domNode) => {
-    let tmpDomNode = domNode;
-    // Traverse to top level node.
-    while (tmpDomNode && tmpDomNode.parentNode) {
-        if (tmpDomNode.parentNode === view.dom) {
-            break;
-        }
-        tmpDomNode = tmpDomNode.parentNode;
+var getOuterDomNode = (view, domNode) => {
+  let tmpDomNode = domNode;
+  while (tmpDomNode == null ? void 0 : tmpDomNode.parentNode) {
+    if (tmpDomNode.parentNode === view.dom) {
+      break;
     }
-    return tmpDomNode;
+    tmpDomNode = tmpDomNode.parentNode;
+  }
+  return tmpDomNode;
 };
-const dragHandlePluginDefaultKey = new PluginKey('dragHandle');
-const DragHandlePlugin = ({ pluginKey = dragHandlePluginDefaultKey, element, editor, tippyOptions, onNodeChange, }) => {
-    const wrapper = document.createElement('div');
-    let popup = null;
-    let locked = false;
-    let currentNode = null;
-    let currentNodePos = -1;
-    let currentNodeRelPos;
-    element.addEventListener('dragstart', e => {
-        // Push this to the end of the event cue
-        // Fixes bug where incorrect drag pos is returned if drag handle has position: absolute
-        // @ts-ignore
-        dragHandler(e, editor);
-        setTimeout(() => {
+var dragHandlePluginDefaultKey = new PluginKey("dragHandle");
+var DragHandlePlugin = ({
+  pluginKey = dragHandlePluginDefaultKey,
+  element,
+  editor,
+  computePositionConfig,
+  onNodeChange
+}) => {
+  const wrapper = document.createElement("div");
+  let locked = false;
+  let currentNode = null;
+  let currentNodePos = -1;
+  let currentNodeRelPos;
+  function hideHandle() {
+    if (!element) {
+      return;
+    }
+    element.style.visibility = "hidden";
+    element.style.pointerEvents = "none";
+  }
+  function showHandle() {
+    if (!element) {
+      return;
+    }
+    if (!editor.isEditable) {
+      hideHandle();
+      return;
+    }
+    element.style.visibility = "";
+    element.style.pointerEvents = "auto";
+  }
+  function repositionDragHandle(dom) {
+    const virtualElement = {
+      getBoundingClientRect: () => dom.getBoundingClientRect()
+    };
+    computePosition(virtualElement, element, computePositionConfig).then((val) => {
+      Object.assign(element.style, {
+        position: val.strategy,
+        left: `${val.x}px`,
+        top: `${val.y}px`
+      });
+    });
+  }
+  function onDragStart(e) {
+    dragHandler(e, editor);
+    setTimeout(() => {
+      if (element) {
+        element.style.pointerEvents = "none";
+      }
+    }, 0);
+  }
+  function onDragEnd() {
+    hideHandle();
+    if (element) {
+      element.style.pointerEvents = "auto";
+    }
+  }
+  element.addEventListener("dragstart", onDragStart);
+  element.addEventListener("dragend", onDragEnd);
+  wrapper.appendChild(element);
+  return {
+    unbind() {
+      element.removeEventListener("dragstart", onDragStart);
+      element.removeEventListener("dragend", onDragEnd);
+    },
+    plugin: new Plugin({
+      key: typeof pluginKey === "string" ? new PluginKey(pluginKey) : pluginKey,
+      state: {
+        init() {
+          return { locked: false };
+        },
+        apply(tr, value, _oldState, state) {
+          const isLocked = tr.getMeta("lockDragHandle");
+          const hideDragHandle = tr.getMeta("hideDragHandle");
+          if (isLocked !== void 0) {
+            locked = isLocked;
+          }
+          if (hideDragHandle) {
+            hideHandle();
+            locked = false;
+            currentNode = null;
+            currentNodePos = -1;
+            onNodeChange == null ? void 0 : onNodeChange({ editor, node: null, pos: -1 });
+            return value;
+          }
+          if (tr.docChanged && currentNodePos !== -1 && element) {
+            if (isChangeOrigin(tr)) {
+              const newPos = getAbsolutePos(state, currentNodeRelPos);
+              if (newPos !== currentNodePos) {
+                currentNodePos = newPos;
+              }
+            } else {
+              const newPos = tr.mapping.map(currentNodePos);
+              if (newPos !== currentNodePos) {
+                currentNodePos = newPos;
+                currentNodeRelPos = getRelativePos(state, currentNodePos);
+              }
+            }
+          }
+          return value;
+        }
+      },
+      view: (view) => {
+        var _a;
+        element.draggable = true;
+        element.style.pointerEvents = "auto";
+        (_a = editor.view.dom.parentElement) == null ? void 0 : _a.appendChild(wrapper);
+        wrapper.style.pointerEvents = "none";
+        wrapper.style.position = "absolute";
+        wrapper.style.top = "0";
+        wrapper.style.left = "0";
+        return {
+          update(_, oldState) {
+            if (!element) {
+              return;
+            }
+            if (!editor.isEditable) {
+              hideHandle();
+              return;
+            }
+            if (locked) {
+              element.draggable = false;
+            } else {
+              element.draggable = true;
+            }
+            if (view.state.doc.eq(oldState.doc) || currentNodePos === -1) {
+              return;
+            }
+            let domNode = view.nodeDOM(currentNodePos);
+            domNode = getOuterDomNode(view, domNode);
+            if (domNode === view.dom) {
+              return;
+            }
+            if ((domNode == null ? void 0 : domNode.nodeType) !== 1) {
+              return;
+            }
+            const domNodePos = view.posAtDOM(domNode, 0);
+            const outerNode = getOuterNode(editor.state.doc, domNodePos);
+            const outerNodePos = getOuterNodePos(editor.state.doc, domNodePos);
+            currentNode = outerNode;
+            currentNodePos = outerNodePos;
+            currentNodeRelPos = getRelativePos(view.state, currentNodePos);
+            onNodeChange == null ? void 0 : onNodeChange({ editor, node: currentNode, pos: currentNodePos });
+            repositionDragHandle(domNode);
+          },
+          // TODO: Kills even on hot reload
+          destroy() {
             if (element) {
-                element.style.pointerEvents = 'none';
+              removeNode(wrapper);
             }
-        }, 0);
-    });
-    element.addEventListener('dragend', () => {
-        if (element) {
-            element.style.pointerEvents = 'auto';
+          }
+        };
+      },
+      props: {
+        handleDOMEvents: {
+          mouseleave(_view, e) {
+            if (locked) {
+              return false;
+            }
+            if (e.target && !wrapper.contains(e.relatedTarget)) {
+              hideHandle();
+              currentNode = null;
+              currentNodePos = -1;
+              onNodeChange == null ? void 0 : onNodeChange({ editor, node: null, pos: -1 });
+            }
+            return false;
+          },
+          mousemove(view, e) {
+            if (!element || locked) {
+              return false;
+            }
+            const nodeData = findElementNextToCoords({
+              x: e.clientX,
+              y: e.clientY,
+              direction: "right",
+              editor
+            });
+            if (!nodeData.resultElement) {
+              return false;
+            }
+            let domNode = nodeData.resultElement;
+            domNode = getOuterDomNode(view, domNode);
+            if (domNode === view.dom) {
+              return false;
+            }
+            if ((domNode == null ? void 0 : domNode.nodeType) !== 1) {
+              return false;
+            }
+            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;
+              currentNodeRelPos = getRelativePos(view.state, currentNodePos);
+              onNodeChange == null ? void 0 : onNodeChange({ editor, node: currentNode, pos: currentNodePos });
+              repositionDragHandle(domNode);
+              showHandle();
+            }
+            return false;
+          }
         }
-    });
-    return new Plugin({
-        key: typeof pluginKey === 'string' ? new PluginKey(pluginKey) : pluginKey,
-        state: {
-            init() {
-                return { locked: false };
-            },
-            apply(tr, value, oldState, state) {
-                const isLocked = tr.getMeta('lockDragHandle');
-                const hideDragHandle = tr.getMeta('hideDragHandle');
-                if (isLocked !== undefined) {
-                    locked = isLocked;
-                }
-                if (hideDragHandle && popup) {
-                    popup.hide();
-                    locked = false;
-                    currentNode = null;
-                    currentNodePos = -1;
-                    onNodeChange === null || onNodeChange === void 0 ? void 0 : onNodeChange({ editor, node: null, pos: -1 });
-                    return value;
-                }
-                // Something has changed and drag handler is visible…
-                if (tr.docChanged && currentNodePos !== -1 && element && popup) {
-                    // Yjs replaces the entire document on every incoming change and needs a special handling.
-                    // If change comes from another user …
-                    if (isChangeOrigin(tr)) {
-                        // https://discuss.yjs.dev/t/y-prosemirror-mapping-a-single-relative-position-when-doc-changes/851/3
-                        const newPos = getAbsolutePos(state, currentNodeRelPos);
-                        if (newPos !== currentNodePos) {
-                            // Set the new position for our current node.
-                            currentNodePos = newPos;
-                            // We will get the outer node with data and position in views update method.
-                        }
-                    }
-                    else {
-                        // … otherwise use ProseMirror mapping to update the position.
-                        const newPos = tr.mapping.map(currentNodePos);
-                        if (newPos !== currentNodePos) {
-                            // TODO: Remove
-                            // console.log('Position has changed …', { old: currentNodePos, new: newPos }, tr);
-                            // Set the new position for our current node.
-                            currentNodePos = newPos;
-                            // Memorize relative position to retrieve absolute position in case of collaboration
-                            currentNodeRelPos = getRelativePos(state, currentNodePos);
-                            // We will get the outer node with data and position in views update method.
-                        }
-                    }
-                }
-                return value;
-            },
-        },
-        view: view => {
-            var _a;
-            element.draggable = true;
-            element.style.pointerEvents = 'auto';
-            (_a = editor.view.dom.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(wrapper);
-            wrapper.appendChild(element);
-            wrapper.style.pointerEvents = 'none';
-            wrapper.style.position = 'absolute';
-            wrapper.style.top = '0';
-            wrapper.style.left = '0';
-            return {
-                update(_, oldState) {
-                    if (!element) {
-                        return;
-                    }
-                    if (!editor.isEditable) {
-                        popup === null || popup === void 0 ? void 0 : popup.destroy();
-                        popup = null;
-                        return;
-                    }
-                    if (!popup) {
-                        popup = tippy(view.dom, {
-                            getReferenceClientRect: null,
-                            interactive: true,
-                            trigger: 'manual',
-                            placement: 'left-start',
-                            hideOnClick: false,
-                            duration: 100,
-                            popperOptions: {
-                                modifiers: [
-                                    { name: 'flip', enabled: false },
-                                    {
-                                        name: 'preventOverflow',
-                                        options: {
-                                            rootBoundary: 'document',
-                                            mainAxis: false,
-                                        },
-                                    },
-                                ],
-                            },
-                            ...tippyOptions,
-                            appendTo: wrapper,
-                            content: element,
-                        });
-                    }
-                    // Prevent element being draggend while being open.
-                    if (locked) {
-                        element.draggable = false;
-                    }
-                    else {
-                        element.draggable = true;
-                    }
-                    // Do not close on updates (e.g. changing padding of a section or collaboration events)
-                    // popup?.hide();
-                    // Recalculate popup position if doc has changend and drag handler is visible.
-                    if (view.state.doc.eq(oldState.doc) || currentNodePos === -1) {
-                        return;
-                    }
-                    // Get domNode from (new) position.
-                    let domNode = view.nodeDOM(currentNodePos);
-                    // Since old element could have been wrapped, we need to find
-                    // the outer node and take its position and node data.
-                    domNode = getOuterDomNode(view, domNode);
-                    // Skip if domNode is editor dom.
-                    if (domNode === view.dom) {
-                        return;
-                    }
-                    // We only want `Element`.
-                    if ((domNode === null || domNode === void 0 ? void 0 : domNode.nodeType) !== 1) {
-                        return;
-                    }
-                    const domNodePos = view.posAtDOM(domNode, 0);
-                    const outerNode = getOuterNode(editor.state.doc, domNodePos);
-                    const outerNodePos = getOuterNodePos(editor.state.doc, domNodePos); // TODO: needed?
-                    currentNode = outerNode;
-                    currentNodePos = outerNodePos;
-                    // Memorize relative position to retrieve absolute position in case of collaboration
-                    currentNodeRelPos = getRelativePos(view.state, currentNodePos);
-                    // TODO: Remove
-                    // console.log('View has updated: callback with new data and repositioning of popup …', {
-                    //   domNode,
-                    //   currentNodePos,
-                    //   currentNode,
-                    //   rect: (domNode as Element).getBoundingClientRect(),
-                    // });
-                    onNodeChange === null || onNodeChange === void 0 ? void 0 : onNodeChange({ editor, node: currentNode, pos: currentNodePos });
-                    // Update Tippys getReferenceClientRect since domNode might have changed.
-                    popup.setProps({
-                        getReferenceClientRect: () => domNode.getBoundingClientRect(),
-                    });
-                },
-                // TODO: Kills even on hot reload
-                destroy() {
-                    popup === null || popup === void 0 ? void 0 : popup.destroy();
-                    if (element) {
-                        removeNode(wrapper);
-                    }
-                },
-            };
-        },
-        props: {
-            handleDOMEvents: {
-                mouseleave(_view, e) {
-                    // Do not hide open popup on mouseleave.
-                    if (locked) {
-                        return false;
-                    }
-                    // If e.target is not inside the wrapper, hide.
-                    if (e.target && !wrapper.contains(e.relatedTarget)) {
-                        popup === null || popup === void 0 ? void 0 : popup.hide();
-                        currentNode = null;
-                        currentNodePos = -1;
-                        onNodeChange === null || onNodeChange === void 0 ? void 0 : onNodeChange({ editor, node: null, pos: -1 });
-                    }
-                    return false;
-                },
-                mousemove(view, e) {
-                    // Do not continue if popup is not initialized or open.
-                    if (!element || !popup || locked) {
-                        return false;
-                    }
-                    const nodeData = findElementNextToCoords({
-                        x: e.clientX,
-                        y: e.clientY,
-                        direction: 'right',
-                        editor,
-                    });
-                    // Skip if there is no node next to coords
-                    if (!nodeData.resultElement) {
-                        return false;
-                    }
-                    let domNode = nodeData.resultElement;
-                    domNode = getOuterDomNode(view, domNode);
-                    // Skip if domNode is editor dom.
-                    if (domNode === view.dom) {
-                        return false;
-                    }
-                    // We only want `Element`.
-                    if ((domNode === null || domNode === void 0 ? void 0 : domNode.nodeType) !== 1) {
-                        return false;
-                    }
-                    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;
-                        // Memorize relative position to retrieve absolute position in case of collaboration
-                        currentNodeRelPos = getRelativePos(view.state, currentNodePos);
-                        // TODO: Remove
-                        // console.log('Mousemove with changed node / node data …', {
-                        //   domNode,
-                        //   currentNodePos,
-                        //   currentNode,
-                        //   rect: (domNode as Element).getBoundingClientRect(),
-                        // });
-                        onNodeChange === null || onNodeChange === void 0 ? void 0 : onNodeChange({ editor, node: currentNode, pos: currentNodePos });
-                        // Set nodes clientRect.
-                        popup.setProps({
-                            getReferenceClientRect: () => domNode.getBoundingClientRect(),
-                        });
-                        popup.show();
-                    }
-                    return false;
-                },
-            },
-        },
-    });
+      }
+    })
+  };
 };
 
-const DragHandle = Extension.create({
-    name: 'dragHandle',
-    addOptions() {
-        return {
-            render() {
-                const element = document.createElement('div');
-                element.classList.add('drag-handle');
-                return element;
-            },
-            tippyOptions: {},
-            locked: false,
-            onNodeChange: () => { return null; },
-        };
-    },
-    addCommands() {
-        return {
-            lockDragHandle: () => ({ editor }) => {
-                this.options.locked = true;
-                return editor.commands.setMeta('lockDragHandle', this.options.locked);
-            },
-            unlockDragHandle: () => ({ editor }) => {
-                this.options.locked = false;
-                return editor.commands.setMeta('lockDragHandle', this.options.locked);
-            },
-            toggleDragHandle: () => ({ editor }) => {
-                this.options.locked = !this.options.locked;
-                return editor.commands.setMeta('lockDragHandle', this.options.locked);
-            },
-        };
-    },
-    addProseMirrorPlugins() {
-        const element = this.options.render();
-        return [
-            DragHandlePlugin({
-                tippyOptions: this.options.tippyOptions,
-                element,
-                editor: this.editor,
-                onNodeChange: this.options.onNodeChange,
-            }),
-        ];
-    },
+// src/drag-handle.ts
+var defaultComputePositionConfig = {
+  placement: "left-start",
+  strategy: "absolute"
+};
+var DragHandle = Extension.create({
+  name: "dragHandle",
+  addOptions() {
+    return {
+      render() {
+        const element = document.createElement("div");
+        element.classList.add("drag-handle");
+        return element;
+      },
+      computePositionConfig: {},
+      locked: false,
+      onNodeChange: () => {
+        return null;
+      }
+    };
+  },
+  addCommands() {
+    return {
+      lockDragHandle: () => ({ editor }) => {
+        this.options.locked = true;
+        return editor.commands.setMeta("lockDragHandle", this.options.locked);
+      },
+      unlockDragHandle: () => ({ editor }) => {
+        this.options.locked = false;
+        return editor.commands.setMeta("lockDragHandle", this.options.locked);
+      },
+      toggleDragHandle: () => ({ editor }) => {
+        this.options.locked = !this.options.locked;
+        return editor.commands.setMeta("lockDragHandle", this.options.locked);
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const element = this.options.render();
+    return [
+      DragHandlePlugin({
+        computePositionConfig: { ...defaultComputePositionConfig, ...this.options.computePositionConfig },
+        element,
+        editor: this.editor,
+        onNodeChange: this.options.onNodeChange
+      }).plugin
+    ];
+  }
 });
 
-export { DragHandle, DragHandlePlugin, DragHandle as default, dragHandlePluginDefaultKey };
-//# sourceMappingURL=index.js.map
+// src/index.ts
+var index_default = DragHandle;
+export {
+  DragHandle,
+  DragHandlePlugin,
+  index_default as default,
+  defaultComputePositionConfig,
+  dragHandlePluginDefaultKey
+};
+//# sourceMappingURL=index.js.map