@blockslides/extension-drag-handle 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,84 @@
+import { ComputePositionConfig, VirtualElement } from '@floating-ui/dom';
+import { Extension, Editor } from '@blockslides/core';
+import { Node } from '@blockslides/pm/model';
+import { PluginKey, Plugin } from '@blockslides/pm/state';
+
+declare const defaultComputePositionConfig: ComputePositionConfig;
+interface DragHandleOptions {
+    /**
+     * Renders an element that is positioned with the floating-ui/dom package
+     */
+    render(): HTMLElement;
+    /**
+     * Configuration for position computation of the drag handle
+     * using the floating-ui/dom package
+     */
+    computePositionConfig?: ComputePositionConfig;
+    /**
+     * A function that returns the virtual element for the drag handle.
+     * This is useful when the menu needs to be positioned relative to a specific DOM element.
+     */
+    getReferencedVirtualElement?: () => VirtualElement | null;
+    /**
+     * Locks the draghandle in place and visibility
+     */
+    locked?: boolean;
+    /**
+     * Returns a node or null when a node is hovered over
+     */
+    onNodeChange?: (options: {
+        node: Node | null;
+        editor: Editor;
+    }) => void;
+    /**
+     * The callback function that will be called when drag start.
+     */
+    onElementDragStart?: (e: DragEvent) => void;
+    /**
+     * The callback function that will be called when drag end.
+     */
+    onElementDragEnd?: (e: DragEvent) => void;
+}
+declare module '@blockslides/core' {
+    interface Commands<ReturnType> {
+        dragHandle: {
+            /**
+             * Locks the draghandle in place and visibility
+             */
+            lockDragHandle: () => ReturnType;
+            /**
+             * Unlocks the draghandle
+             */
+            unlockDragHandle: () => ReturnType;
+            /**
+             * Toggle draghandle lock state
+             */
+            toggleDragHandle: () => ReturnType;
+        };
+    }
+}
+declare const DragHandle: Extension<DragHandleOptions, any>;
+
+interface DragHandlePluginProps {
+    pluginKey?: PluginKey | string;
+    editor: Editor;
+    element: HTMLElement;
+    onNodeChange?: (data: {
+        editor: Editor;
+        node: Node | null;
+        pos: number;
+    }) => void;
+    onElementDragStart?: (e: DragEvent) => void;
+    onElementDragEnd?: (e: DragEvent) => void;
+    computePositionConfig?: ComputePositionConfig;
+    getReferencedVirtualElement?: () => VirtualElement | null;
+}
+declare const dragHandlePluginDefaultKey: PluginKey<any>;
+declare const DragHandlePlugin: ({ pluginKey, element, editor, computePositionConfig, getReferencedVirtualElement, onNodeChange, onElementDragStart, onElementDragEnd, }: DragHandlePluginProps) => {
+    unbind(): void;
+    plugin: Plugin<{
+        locked: boolean;
+    }>;
+};
+
+export { DragHandle, type DragHandleOptions, DragHandlePlugin, type DragHandlePluginProps, DragHandle as default, defaultComputePositionConfig, dragHandlePluginDefaultKey };

package/dist/index.d.ts

@@ -0,0 +1,84 @@
+import { ComputePositionConfig, VirtualElement } from '@floating-ui/dom';
+import { Extension, Editor } from '@blockslides/core';
+import { Node } from '@blockslides/pm/model';
+import { PluginKey, Plugin } from '@blockslides/pm/state';
+
+declare const defaultComputePositionConfig: ComputePositionConfig;
+interface DragHandleOptions {
+    /**
+     * Renders an element that is positioned with the floating-ui/dom package
+     */
+    render(): HTMLElement;
+    /**
+     * Configuration for position computation of the drag handle
+     * using the floating-ui/dom package
+     */
+    computePositionConfig?: ComputePositionConfig;
+    /**
+     * A function that returns the virtual element for the drag handle.
+     * This is useful when the menu needs to be positioned relative to a specific DOM element.
+     */
+    getReferencedVirtualElement?: () => VirtualElement | null;
+    /**
+     * Locks the draghandle in place and visibility
+     */
+    locked?: boolean;
+    /**
+     * Returns a node or null when a node is hovered over
+     */
+    onNodeChange?: (options: {
+        node: Node | null;
+        editor: Editor;
+    }) => void;
+    /**
+     * The callback function that will be called when drag start.
+     */
+    onElementDragStart?: (e: DragEvent) => void;
+    /**
+     * The callback function that will be called when drag end.
+     */
+    onElementDragEnd?: (e: DragEvent) => void;
+}
+declare module '@blockslides/core' {
+    interface Commands<ReturnType> {
+        dragHandle: {
+            /**
+             * Locks the draghandle in place and visibility
+             */
+            lockDragHandle: () => ReturnType;
+            /**
+             * Unlocks the draghandle
+             */
+            unlockDragHandle: () => ReturnType;
+            /**
+             * Toggle draghandle lock state
+             */
+            toggleDragHandle: () => ReturnType;
+        };
+    }
+}
+declare const DragHandle: Extension<DragHandleOptions, any>;
+
+interface DragHandlePluginProps {
+    pluginKey?: PluginKey | string;
+    editor: Editor;
+    element: HTMLElement;
+    onNodeChange?: (data: {
+        editor: Editor;
+        node: Node | null;
+        pos: number;
+    }) => void;
+    onElementDragStart?: (e: DragEvent) => void;
+    onElementDragEnd?: (e: DragEvent) => void;
+    computePositionConfig?: ComputePositionConfig;
+    getReferencedVirtualElement?: () => VirtualElement | null;
+}
+declare const dragHandlePluginDefaultKey: PluginKey<any>;
+declare const DragHandlePlugin: ({ pluginKey, element, editor, computePositionConfig, getReferencedVirtualElement, onNodeChange, onElementDragStart, onElementDragEnd, }: DragHandlePluginProps) => {
+    unbind(): void;
+    plugin: Plugin<{
+        locked: boolean;
+    }>;
+};
+
+export { DragHandle, type DragHandleOptions, DragHandlePlugin, type DragHandlePluginProps, DragHandle as default, defaultComputePositionConfig, dragHandlePluginDefaultKey };

package/dist/index.js

@@ -0,0 +1,542 @@
+// src/drag-handle.ts
+import { Extension } from "@blockslides/core";
+
+// src/drag-handle-plugin.ts
+import { computePosition } from "@floating-ui/dom";
+import { Plugin, PluginKey } from "@blockslides/pm/state";
+
+// src/helpers/dragHandler.ts
+import { getSelectionRanges, NodeRangeSelection } from "@blockslides/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;
+}
+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;
+}
+
+// src/helpers/findNextElementFromCursor.ts
+function findClosestTopLevelBlock(element, view) {
+  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;
+}
+function clampToContent(view, x, y, inset = 5) {
+  const container = view.dom;
+  const firstBlock = container.firstElementChild;
+  const lastBlock = container.lastElementChild;
+  if (!firstBlock || !lastBlock) {
+    return { x, y };
+  }
+  const topRect = firstBlock.getBoundingClientRect();
+  const botRect = lastBlock.getBoundingClientRect();
+  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;
+  const sameRight = Math.abs(topRect.right - botRect.right) < epsilon;
+  let rowRect = topRect;
+  if (sameLeft && sameRight) {
+    rowRect = topRect;
+  } else {
+  }
+  const clampedX = Math.min(Math.max(rowRect.left + inset, x), rowRect.right - inset);
+  return { x: clampedX, y: clampedY };
+}
+var findElementNextToCoords = (options) => {
+  const { x, y, editor } = options;
+  const { view, state } = editor;
+  const { x: clampedX, y: clampedY } = clampToContent(view, x, y, 5);
+  const elements = view.root.elementsFromPoint(clampedX, clampedY);
+  let block;
+  Array.prototype.some.call(elements, (el) => {
+    if (!view.dom.contains(el)) {
+      return false;
+    }
+    const candidate = findClosestTopLevelBlock(el, view);
+    if (candidate) {
+      block = candidate;
+      return true;
+    }
+    return false;
+  });
+  if (!block) {
+    return { resultElement: null, resultNode: null, pos: null };
+  }
+  let pos;
+  try {
+    pos = view.posAtDOM(block, 0);
+  } catch {
+    return { resultElement: null, resultNode: null, pos: null };
+  }
+  const node = state.doc.nodeAt(pos);
+  if (!node) {
+    const resolvedPos = state.doc.resolve(pos);
+    const parent = resolvedPos.parent;
+    return {
+      resultElement: block,
+      resultNode: parent,
+      pos: resolvedPos.start()
+    };
+  }
+  return {
+    resultElement: block,
+    resultNode: node,
+    pos
+  };
+};
+
+// 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;
+  (_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;
+  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 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 });
+}
+
+// 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 getOuterDomNode = (view, domNode) => {
+  let tmpDomNode = domNode;
+  while (tmpDomNode == null ? void 0 : tmpDomNode.parentNode) {
+    if (tmpDomNode.parentNode === view.dom) {
+      break;
+    }
+    tmpDomNode = tmpDomNode.parentNode;
+  }
+  return tmpDomNode;
+};
+var dragHandlePluginDefaultKey = new PluginKey("dragHandle");
+var DragHandlePlugin = ({
+  pluginKey = dragHandlePluginDefaultKey,
+  element,
+  editor,
+  computePositionConfig,
+  getReferencedVirtualElement,
+  onNodeChange,
+  onElementDragStart,
+  onElementDragEnd
+}) => {
+  const wrapper = document.createElement("div");
+  let locked = false;
+  let currentNode = null;
+  let currentNodePos = -1;
+  let rafId = null;
+  let pendingMouseCoords = null;
+  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 = (getReferencedVirtualElement == null ? void 0 : getReferencedVirtualElement()) || {
+      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) {
+    onElementDragStart == null ? void 0 : onElementDragStart(e);
+    dragHandler(e, editor);
+    if (element) {
+      element.dataset.dragging = "true";
+    }
+    setTimeout(() => {
+      if (element) {
+        element.style.pointerEvents = "none";
+      }
+    }, 0);
+  }
+  function onDragEnd(e) {
+    onElementDragEnd == null ? void 0 : onElementDragEnd(e);
+    hideHandle();
+    if (element) {
+      element.style.pointerEvents = "auto";
+      element.dataset.dragging = "false";
+    }
+  }
+  element.addEventListener("dragstart", onDragStart);
+  element.addEventListener("dragend", onDragEnd);
+  wrapper.appendChild(element);
+  return {
+    unbind() {
+      element.removeEventListener("dragstart", onDragStart);
+      element.removeEventListener("dragend", onDragEnd);
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+        pendingMouseCoords = null;
+      }
+    },
+    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) {
+            const newPos = tr.mapping.map(currentNodePos);
+            if (newPos !== currentNodePos) {
+              currentNodePos = newPos;
+            }
+          }
+          return value;
+        }
+      },
+      view: (view) => {
+        var _a;
+        element.draggable = true;
+        element.style.pointerEvents = "auto";
+        element.dataset.dragging = "false";
+        (_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;
+            onNodeChange == null ? void 0 : onNodeChange({ editor, node: currentNode, pos: currentNodePos });
+            repositionDragHandle(domNode);
+          },
+          // TODO: Kills even on hot reload
+          destroy() {
+            if (rafId) {
+              cancelAnimationFrame(rafId);
+              rafId = null;
+              pendingMouseCoords = null;
+            }
+            if (element) {
+              removeNode(wrapper);
+            }
+          }
+        };
+      },
+      props: {
+        handleDOMEvents: {
+          keydown(view) {
+            if (!element || locked) {
+              return false;
+            }
+            if (view.hasFocus()) {
+              hideHandle();
+              currentNode = null;
+              currentNodePos = -1;
+              onNodeChange == null ? void 0 : onNodeChange({ editor, node: null, pos: -1 });
+              return false;
+            }
+            return false;
+          },
+          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;
+            }
+            pendingMouseCoords = { x: e.clientX, y: e.clientY };
+            if (rafId) {
+              return false;
+            }
+            rafId = requestAnimationFrame(() => {
+              rafId = null;
+              if (!pendingMouseCoords) {
+                return;
+              }
+              const { x, y } = pendingMouseCoords;
+              pendingMouseCoords = null;
+              const nodeData = findElementNextToCoords({
+                x,
+                y,
+                direction: "right",
+                editor
+              });
+              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;
+              }
+              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;
+                onNodeChange == null ? void 0 : onNodeChange({ editor, node: currentNode, pos: currentNodePos });
+                repositionDragHandle(domNode);
+                showHandle();
+              }
+            });
+            return false;
+          }
+        }
+      }
+    })
+  };
+};
+
+// 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;
+      },
+      onElementDragStart: void 0,
+      onElementDragEnd: void 0
+    };
+  },
+  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 },
+        getReferencedVirtualElement: this.options.getReferencedVirtualElement,
+        element,
+        editor: this.editor,
+        onNodeChange: this.options.onNodeChange,
+        onElementDragStart: this.options.onElementDragStart,
+        onElementDragEnd: this.options.onElementDragEnd
+      }).plugin
+    ];
+  }
+});
+
+// src/index.ts
+var index_default = DragHandle;
+export {
+  DragHandle,
+  DragHandlePlugin,
+  index_default as default,
+  defaultComputePositionConfig,
+  dragHandlePluginDefaultKey
+};
+//# sourceMappingURL=index.js.map