@agent-native/toolkit 0.4.9 → 0.5.0

package/dist/editor/DragHandle.js

@@ -0,0 +1,1066 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey, NodeSelection, TextSelection, } from "@tiptap/pm/state";
+/**
+ * Default editor-wrapper CSS selector the drag handle scopes itself to.
+ *
+ * The handle, the drop indicator, and the `position: relative` anchor are all
+ * appended to / measured against the closest ancestor matching this selector.
+ * Content's editor wraps its ProseMirror DOM in a `.visual-editor-wrapper`
+ * element, so that is the historical default. Other apps (e.g. the plan editor)
+ * pass their own wrapper selector via {@link DragHandleOptions.wrapperSelector}.
+ */
+export const DEFAULT_DRAG_HANDLE_WRAPPER_SELECTOR = ".visual-editor-wrapper";
+const dragHandleKey = new PluginKey("dragHandle");
+const HOVER_SIDE_OUTSET_REM = 8;
+// Notion-style side drop: drag a block to a neighbour's LEFT/RIGHT region and it
+// builds (or joins) a column layout instead of reordering. The activation region
+// has to be GENEROUS or the gesture is dead for a real human — a natural drag
+// releases somewhere over the block's body, nowhere near a thin edge sliver. The
+// old values (28% of width, capped at 140px, AND only the vertical middle 60%)
+// left a wide ~820px plan block with two ~17%-of-width edge slivers in a 35px-tall
+// band as the ONLY column targets — ~66% of the block (the whole centre) plus the
+// top/bottom only ever reordered, so "drag side by side" essentially never made
+// columns. Now each side claims ~a third of the width across the FULL block
+// height, with a middle band always preserved for before/after reorder.
+const SIDE_DROP_ZONE_RATIO = 0.33;
+const SIDE_DROP_ZONE_MIN_PX = 56;
+const SIDE_DROP_ZONE_MAX_PX = 320;
+// Never let the two side zones swallow the whole block: keep at least the middle
+// ~10% of the width as the before/after reorder band so dropping over the centre
+// still moves the block above/below the target (Notion keeps reorder reachable).
+const SIDE_DROP_ZONE_MAX_WIDTH_FRACTION = 0.45;
+const DRAG_HANDLE_MENU_STYLE_ID = "an-rich-md-drag-menu-styles";
+const DRAG_HANDLE_MENU_WIDTH = 220;
+const DRAG_HANDLE_MENU_GAP = 6;
+const DRAG_HANDLE_MENU_VIEWPORT_PADDING = 8;
+/**
+ * Wraps Tabler outline icon path data in the standard 24×24 stroke SVG so the
+ * DOM-based block menu renders the same icons the React UI uses (Tabler is the
+ * framework-wide icon set). The editor is plain DOM, not React, so we inline the
+ * markup instead of importing `@tabler/icons-react` components.
+ */
+const tablerIconSvg = (paths) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${paths}</svg>`;
+// Tabler `copy`, `trash`, and `plus` (outline). Path data copied verbatim from
+// @tabler/icons so the glyphs stay pixel-identical to the React icon set.
+const DRAG_HANDLE_MENU_ICON_DUPLICATE = tablerIconSvg('<path d="M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666" /><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />');
+const DRAG_HANDLE_MENU_ICON_DELETE = tablerIconSvg('<path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />');
+const DRAG_HANDLE_MENU_ICON_INSERT = tablerIconSvg('<path d="M12 5l0 14" /><path d="M5 12l14 0" />');
+// Tabler `grip-vertical` (outline) for the left-margin drag grip.
+const DRAG_HANDLE_GRIP_ICON = tablerIconSvg('<path d="M8 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M8 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M8 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M14 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M14 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M14 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />');
+const dragHandleRegistrations = new Set();
+let dragHandleGlobalHoverListeners = 0;
+let activeDragRegistration = null;
+// The registration whose grip is currently shown. Used to keep that grip alive
+// while the cursor travels from a block's body to its grip, even when the grip
+// sits in a contested gap (an inter-column gap or a tab body's left offset)
+// where another editor's wide forgiving zone would otherwise re-win the hover
+// and hide the grip out from under the approaching cursor.
+let activeHoverRegistration = null;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const editorArea = (registration) => {
+    const rect = registration.view.dom.getBoundingClientRect();
+    return rect.width * rect.height;
+};
+const updateRegisteredHover = (clientX, clientY) => {
+    if (activeDragRegistration) {
+        for (const registration of dragHandleRegistrations) {
+            registration.hideHover?.();
+        }
+        activeHoverRegistration = null;
+        return;
+    }
+    const candidates = [];
+    for (const registration of dragHandleRegistrations) {
+        if (!registration.view.dom.isConnected || !registration.canHover?.()) {
+            registration.hideHover?.();
+            continue;
+        }
+        const block = registration.findHoverBlock?.(clientX, clientY);
+        if (block) {
+            candidates.push({ registration, block });
+        }
+        else {
+            registration.hideHover?.();
+        }
+    }
+    // Grip keepalive. Once a block's grip is showing, hold it while the cursor
+    // travels LEFT of that block's content toward its grip glyph — within the
+    // block's own vertical row and no further left than the glyph itself. This is
+    // what makes grips grabbable for blocks that are NOT flush with the page's
+    // left gutter (a right column, a tab body): their grip sits in a gap that the
+    // neighbour's wide forgiving zone also claims, so the normal picker would flip
+    // hover to the neighbour mid-approach and the grip would vanish before the
+    // cursor reaches it. The keepalive only bridges the body→grip gap — it does
+    // NOT fire while the cursor is over content (so the innermost/nested picking
+    // and gutter-grab rules below still decide there) and the row guard stops it
+    // from sticking the grip across vertical moves to another block's row.
+    if (activeHoverRegistration) {
+        const held = candidates.find((candidate) => candidate.registration === activeHoverRegistration);
+        const grip = activeHoverRegistration.gripRect?.();
+        if (held &&
+            grip &&
+            clientY >= held.block.rect.top &&
+            clientY < held.block.rect.bottom &&
+            clientX >= grip.left - 4 &&
+            clientX < held.block.rect.left) {
+            for (const registration of dragHandleRegistrations) {
+                if (registration !== held.registration)
+                    registration.hideHover?.();
+            }
+            held.registration.showHoverBlock?.(held.block);
+            return;
+        }
+    }
+    // Pick which editor owns the grip when several register a hover block at this
+    // point. Nested region editors (e.g. each column inside a `columns` block) tile
+    // their container's whole footprint AND extend a wide forgiving zone
+    // (HOVER_SIDE_OUTSET_REM) into its left-margin gutter, so a pure
+    // "smallest editor wins" rule lets an inner block beat the container everywhere
+    // and leaves the container itself impossible to grab. Split candidates by where
+    // the cursor sits relative to each block:
+    //   - Over a block's body (clientX at/after its left edge) the innermost
+    //     (smallest) editor wins, so nested blocks stay grabbable from their content.
+    //   - In the shared left-margin gutter (clientX left of every candidate's
+    //     content, where the grip lives) the outermost (largest) editor wins, so the
+    //     container block can be picked up and reordered.
+    // Prefer the candidate whose block actually sits UNDER the cursor
+    // horizontally. Without this, a left column's forgiving side zone reaches
+    // across the inter-column gap, ties the right column's editor on area, and
+    // wins — so hovering a right-column block shows the grip for the LEFT block
+    // (and right-column blocks appear to have no grip at all). `overContent`
+    // restricts to blocks the cursor is genuinely within; `rightOfLeftEdge` keeps
+    // the gutter-grab behaviour; fully left of every block → the container wins.
+    const overContent = candidates.filter((candidate) => clientX >= candidate.block.rect.left &&
+        clientX <= candidate.block.rect.right);
+    // The grip renders in a narrow band just LEFT of each block (≈24px). A block
+    // must OWN that band so moving the cursor onto its grip keeps showing (and
+    // lets you press) that block's grip — otherwise, for a column block whose grip
+    // sits in the gutter/inter-column gap, the "gutter → largest editor" rule
+    // below would flip the hover to the columns container and the grip would
+    // vanish out from under the cursor, making inner column blocks impossible to
+    // drag. The band is narrow, so it does not collide with the neighbouring
+    // column's content (the right column's grip lives in the inter-column gap,
+    // left of its own content but right of the left column's content).
+    const GRIP_HOVER_ZONE_PX = 28;
+    const overGrip = candidates.filter((candidate) => clientX >= candidate.block.rect.left - GRIP_HOVER_ZONE_PX &&
+        clientX < candidate.block.rect.left);
+    const rightOfLeftEdge = candidates.filter((candidate) => clientX >= candidate.block.rect.left);
+    let active;
+    const innerPool = overContent.length > 0
+        ? overContent
+        : overGrip.length > 0
+            ? overGrip
+            : rightOfLeftEdge;
+    if (innerPool.length > 0) {
+        innerPool.sort((a, b) => editorArea(a.registration) - editorArea(b.registration));
+        active = innerPool[0];
+    }
+    else {
+        candidates.sort((a, b) => editorArea(b.registration) - editorArea(a.registration));
+        active = candidates[0] ?? null;
+    }
+    for (const registration of dragHandleRegistrations) {
+        if (registration !== active?.registration)
+            registration.hideHover?.();
+    }
+    active?.registration.showHoverBlock?.(active.block);
+    activeHoverRegistration = active?.registration ?? null;
+};
+const handleGlobalHoverMove = (event) => {
+    updateRegisteredHover(event.clientX, event.clientY);
+};
+const retainGlobalHoverListener = () => {
+    dragHandleGlobalHoverListeners += 1;
+    if (dragHandleGlobalHoverListeners === 1) {
+        document.addEventListener("mousemove", handleGlobalHoverMove);
+    }
+};
+const releaseGlobalHoverListener = () => {
+    dragHandleGlobalHoverListeners = Math.max(0, dragHandleGlobalHoverListeners - 1);
+    if (dragHandleGlobalHoverListeners === 0) {
+        document.removeEventListener("mousemove", handleGlobalHoverMove);
+    }
+};
+const ensureDragHandleMenuStyles = () => {
+    if (document.getElementById(DRAG_HANDLE_MENU_STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = DRAG_HANDLE_MENU_STYLE_ID;
+    style.textContent = `
+.an-rich-md-drag-menu {
+  position: fixed;
+  z-index: 9999;
+  width: ${DRAG_HANDLE_MENU_WIDTH}px;
+  padding: 4px;
+  border: 1px solid hsl(var(--border, 214.3 31.8% 91.4%));
+  border-radius: 7px;
+  background: hsl(var(--popover, 0 0% 100%));
+  color: hsl(var(--popover-foreground, var(--foreground, 222.2 84% 4.9%)));
+  box-shadow:
+    0 12px 32px rgb(15 23 42 / 0.16),
+    0 2px 8px rgb(15 23 42 / 0.08);
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.an-rich-md-drag-menu__item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 9px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  letter-spacing: 0;
+  padding: 7px 8px;
+  text-align: left;
+}
+
+.an-rich-md-drag-menu__item:hover,
+.an-rich-md-drag-menu__item:focus-visible {
+  background: hsl(var(--accent, 210 40% 96.1%));
+  color: hsl(var(--accent-foreground, var(--foreground, 222.2 84% 4.9%)));
+  outline: none;
+}
+
+.an-rich-md-drag-menu__item[data-danger="true"] {
+  color: hsl(var(--destructive, 0 84.2% 60.2%));
+}
+
+.an-rich-md-drag-menu__item[data-danger="true"]:hover,
+.an-rich-md-drag-menu__item[data-danger="true"]:focus-visible {
+  background: hsl(var(--destructive, 0 84.2% 60.2%) / 0.1);
+}
+
+.an-rich-md-drag-menu__icon {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  color: hsl(var(--muted-foreground, 215.4 16.3% 46.9%));
+}
+
+.an-rich-md-drag-menu__item[data-danger="true"] .an-rich-md-drag-menu__icon {
+  color: currentColor;
+}
+
+.an-rich-md-drag-menu__icon svg {
+  width: 17px;
+  height: 17px;
+}
+
+.an-rich-md-drag-menu__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+`;
+    document.head.appendChild(style);
+};
+/**
+ * App-agnostic Tiptap extension providing a Notion-style left-margin drag grip
+ * (the `::` handle), block selection, and drag-to-reorder over top-level block
+ * nodes.
+ *
+ * Behavior:
+ * - On hover over any top-level block, a `.drag-handle` grip appears in the left
+ *   margin (forgiving hit zone extends {@link HOVER_SIDE_OUTSET_REM}rem to the
+ *   sides and into the gap above/between blocks).
+ * - Single-clicking the grip selects the block and opens a block action menu.
+ *   Dragging past a small threshold starts a reorder, showing a floating clone
+ *   preview (`.notion-drag-preview`) and a `.notion-drop-indicator` line.
+ *   `Escape` cancels.
+ * - While dragging, the source block carries `.notion-block--dragging` and the
+ *   document element carries `.notion-editor-is-dragging` so apps can style the
+ *   in-flight state. Apps own all of these CSS class names.
+ * - Works for ANY top-level node ProseMirror renders as a direct child of the
+ *   editor — including `group: "block"`, `draggable: true` atoms such as the
+ *   plan editor's `planBlock`.
+ *
+ * The only app-specific coupling — the editor wrapper element the handle and
+ * drop indicator are anchored to — is configurable via
+ * {@link DragHandleOptions.wrapperSelector}, defaulting to
+ * {@link DEFAULT_DRAG_HANDLE_WRAPPER_SELECTOR} (`.visual-editor-wrapper`) so the
+ * Content editor keeps working byte-identically. The plan editor passes its own
+ * wrapper selector via `DragHandle.configure({ wrapperSelector })`.
+ */
+export const DragHandle = Extension.create({
+    name: "dragHandle",
+    addOptions() {
+        return {
+            wrapperSelector: DEFAULT_DRAG_HANDLE_WRAPPER_SELECTOR,
+            getDragTransferData: undefined,
+            receiveDragTransferData: undefined,
+        };
+    },
+    addProseMirrorPlugins() {
+        const editor = this.editor;
+        const wrapperSelector = this.options.wrapperSelector;
+        const getDragTransferData = this.options.getDragTransferData;
+        const receiveDragTransferData = this.options.receiveDragTransferData;
+        const handleDrop = this.options.handleDrop;
+        let handle = null;
+        let menu = null;
+        let menuContext = null;
+        let currentBlock = null;
+        let dragStartPos = null;
+        let dragSession = null;
+        let currentRegistration = null;
+        const getHoverSideOutset = () => {
+            const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+            return ((Number.isFinite(rootFontSize) ? rootFontSize : 16) *
+                HOVER_SIDE_OUTSET_REM);
+        };
+        const getTopLevelBlocks = (editorView) => {
+            const blocks = [];
+            editorView.state.doc.forEach((_node, offset) => {
+                const dom = editorView.nodeDOM(offset);
+                if (!(dom instanceof HTMLElement))
+                    return;
+                blocks.push({
+                    node: dom,
+                    pmPos: offset,
+                    rect: dom.getBoundingClientRect(),
+                });
+            });
+            return blocks;
+        };
+        const registrationForView = (editorView) => {
+            for (const registration of dragHandleRegistrations) {
+                if (registration.view === editorView)
+                    return registration;
+            }
+            return null;
+        };
+        const findForgivingBlock = (editorView, clientX, clientY) => {
+            const blocks = getTopLevelBlocks(editorView);
+            if (blocks.length === 0)
+                return null;
+            const sideOutset = getHoverSideOutset();
+            const pageLeft = 0;
+            const pageRight = window.visualViewport?.width ?? window.innerWidth;
+            for (let index = 0; index < blocks.length; index++) {
+                const block = blocks[index];
+                const nextBlock = blocks[index + 1];
+                const blockBottomGap = nextBlock
+                    ? Math.max(0, nextBlock.rect.top - block.rect.bottom)
+                    : 0;
+                const zoneLeft = Math.max(pageLeft, block.rect.left - sideOutset);
+                const zoneRight = Math.min(pageRight, block.rect.right + sideOutset);
+                const zoneTop = index === 0
+                    ? Math.max(0, block.rect.top - blockBottomGap)
+                    : block.rect.top;
+                const zoneBottom = nextBlock ? nextBlock.rect.top : block.rect.bottom;
+                if (clientX >= zoneLeft &&
+                    clientX <= zoneRight &&
+                    clientY >= zoneTop &&
+                    clientY < zoneBottom) {
+                    return block;
+                }
+            }
+            return null;
+        };
+        const showHandleForBlock = (editorView, block) => {
+            if (!handle)
+                return;
+            currentBlock = block.node;
+            dragStartPos = block.pmPos;
+            const wrapper = editorView.dom.closest(wrapperSelector);
+            if (!wrapper)
+                return;
+            // Lazily (re)attach the grip the first time a wrapper is actually
+            // available. At plugin `view()` init the editor DOM may not yet be mounted
+            // inside the wrapper (React mounts `EditorContent` after the EditorView is
+            // constructed), so the init-time append can silently no-op and leave the
+            // grip orphaned. Re-home it here once the wrapper exists.
+            if (handle.parentElement !== wrapper) {
+                wrapper.style.position = "relative";
+                wrapper.appendChild(handle);
+            }
+            const wrapperRect = wrapper.getBoundingClientRect();
+            const handleLeft = block.rect.left - wrapperRect.left - 24;
+            handle.style.display = "flex";
+            handle.style.top = `${block.rect.top - wrapperRect.top + 2}px`;
+            handle.style.left = `${handleLeft}px`;
+        };
+        const selectBlockAt = (editorView, pos) => {
+            try {
+                const sel = NodeSelection.create(editorView.state.doc, pos);
+                editorView.dispatch(editorView.state.tr.setSelection(sel));
+                editorView.focus();
+                return sel;
+            }
+            catch {
+                return null;
+            }
+        };
+        const cleanupDragVisuals = () => {
+            dragSession?.preview?.remove();
+            dragSession?.dropLine?.remove();
+            dragSession?.sourceBlock.classList.remove("notion-block--dragging");
+            document.documentElement.classList.remove("notion-editor-is-dragging");
+        };
+        const createDragPreview = (block) => {
+            const blockRect = block.getBoundingClientRect();
+            const preview = document.createElement("div");
+            const clone = block.cloneNode(true);
+            clone.classList.remove("ProseMirror-selectednode", "notion-block--dragging");
+            clone.removeAttribute("contenteditable");
+            clone.style.background = "transparent";
+            clone.style.backgroundColor = "transparent";
+            clone.querySelectorAll("[contenteditable]").forEach((node) => {
+                node.removeAttribute("contenteditable");
+            });
+            clone.querySelectorAll("*").forEach((node) => {
+                node.style.background = "transparent";
+                node.style.backgroundColor = "transparent";
+            });
+            preview.className = "notion-drag-preview";
+            preview.style.width = `${blockRect.width}px`;
+            preview.appendChild(clone);
+            document.body.appendChild(preview);
+            return preview;
+        };
+        const createDropLine = (registration) => {
+            const wrapper = registration.view.dom.closest(registration.wrapperSelector);
+            if (!wrapper)
+                return null;
+            const line = document.createElement("div");
+            line.className = "notion-drop-indicator";
+            wrapper.appendChild(line);
+            return line;
+        };
+        const forceHideHandle = () => {
+            if (handle) {
+                handle.style.display = "none";
+                handle.setAttribute("aria-expanded", "false");
+            }
+            currentBlock = null;
+            dragStartPos = null;
+        };
+        const closeMenu = ({ hideGrip = false } = {}) => {
+            menu?.remove();
+            menu = null;
+            menuContext = null;
+            handle?.setAttribute("aria-expanded", "false");
+            document.removeEventListener("mousedown", handleMenuDocumentMouseDown, {
+                capture: true,
+            });
+            document.removeEventListener("keydown", handleMenuKeyDown, {
+                capture: true,
+            });
+            window.removeEventListener("resize", handleMenuViewportChange);
+            window.removeEventListener("scroll", handleMenuViewportChange, {
+                capture: true,
+            });
+            if (hideGrip)
+                forceHideHandle();
+        };
+        const resolveMenuContext = (context) => {
+            const latestBlock = getTopLevelBlocks(context.view).find((block) => block.node === context.sourceBlock);
+            const sourcePos = latestBlock?.pmPos ?? context.sourcePos;
+            const sourceNode = context.view.state.doc.nodeAt(sourcePos);
+            if (!sourceNode)
+                return null;
+            return {
+                ...context,
+                sourcePos,
+                sourceNode,
+                sourceNodeSize: sourceNode.nodeSize,
+            };
+        };
+        const focusSelectionNear = (view, tr, pos, bias) => {
+            tr.setSelection(TextSelection.near(tr.doc.resolve(clamp(pos, 0, tr.doc.content.size)), bias));
+            view.dispatch(tr.scrollIntoView());
+            view.focus();
+        };
+        const duplicateBlock = (context) => {
+            const resolved = resolveMenuContext(context);
+            if (!resolved)
+                return;
+            const insertPos = resolved.sourcePos + resolved.sourceNodeSize;
+            const tr = resolved.view.state.tr.insert(insertPos, resolved.sourceNode);
+            try {
+                tr.setSelection(NodeSelection.create(tr.doc, insertPos));
+                resolved.view.dispatch(tr.scrollIntoView());
+                resolved.view.focus();
+            }
+            catch {
+                focusSelectionNear(resolved.view, tr, insertPos, 1);
+            }
+        };
+        const deleteBlock = (context) => {
+            const resolved = resolveMenuContext(context);
+            if (!resolved)
+                return;
+            const { view, sourcePos, sourceNodeSize } = resolved;
+            const paragraph = view.state.schema.nodes.paragraph;
+            const sourceEnd = sourcePos + sourceNodeSize;
+            if (view.state.doc.childCount <= 1 && paragraph) {
+                const replacement = paragraph.createAndFill() ?? paragraph.create();
+                const tr = view.state.tr.replaceWith(sourcePos, sourceEnd, replacement);
+                focusSelectionNear(view, tr, sourcePos + 1, 1);
+                return;
+            }
+            const tr = view.state.tr.delete(sourcePos, sourceEnd);
+            const selectionBias = sourcePos >= tr.doc.content.size ? -1 : 1;
+            focusSelectionNear(view, tr, sourcePos, selectionBias);
+        };
+        const insertParagraphBelow = (context) => {
+            const resolved = resolveMenuContext(context);
+            const paragraph = resolved?.view.state.schema.nodes.paragraph;
+            if (!resolved || !paragraph)
+                return;
+            const insertPos = resolved.sourcePos + resolved.sourceNodeSize;
+            const paragraphNode = paragraph.createAndFill() ?? paragraph.create();
+            const tr = resolved.view.state.tr.insert(insertPos, paragraphNode);
+            tr.setSelection(TextSelection.create(tr.doc, insertPos + 1));
+            resolved.view.dispatch(tr.scrollIntoView());
+            resolved.view.focus();
+        };
+        const positionMenu = (anchorRect) => {
+            if (!menu)
+                return;
+            const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
+            const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
+            const menuHeight = menu.offsetHeight || 118;
+            const preferredLeft = anchorRect.right + DRAG_HANDLE_MENU_GAP;
+            const alternateLeft = anchorRect.left - DRAG_HANDLE_MENU_WIDTH - DRAG_HANDLE_MENU_GAP;
+            const left = preferredLeft +
+                DRAG_HANDLE_MENU_WIDTH +
+                DRAG_HANDLE_MENU_VIEWPORT_PADDING <=
+                viewportWidth
+                ? preferredLeft
+                : alternateLeft;
+            menu.style.left = `${clamp(left, DRAG_HANDLE_MENU_VIEWPORT_PADDING, viewportWidth -
+                DRAG_HANDLE_MENU_WIDTH -
+                DRAG_HANDLE_MENU_VIEWPORT_PADDING)}px`;
+            menu.style.top = `${clamp(anchorRect.top - 4, DRAG_HANDLE_MENU_VIEWPORT_PADDING, viewportHeight - menuHeight - DRAG_HANDLE_MENU_VIEWPORT_PADDING)}px`;
+        };
+        const createMenuItem = (label, iconSvg, action, options = {}) => {
+            const button = document.createElement("button");
+            button.type = "button";
+            button.className = "an-rich-md-drag-menu__item";
+            button.setAttribute("role", "menuitem");
+            button.setAttribute("data-plan-interactive", "true");
+            if (options.danger)
+                button.setAttribute("data-danger", "true");
+            const icon = document.createElement("span");
+            icon.className = "an-rich-md-drag-menu__icon";
+            icon.setAttribute("aria-hidden", "true");
+            icon.innerHTML = iconSvg;
+            const labelElement = document.createElement("span");
+            labelElement.className = "an-rich-md-drag-menu__label";
+            labelElement.textContent = label;
+            button.append(icon, labelElement);
+            button.addEventListener("mousedown", (event) => {
+                event.preventDefault();
+            });
+            button.addEventListener("click", (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                const context = menuContext;
+                if (!context)
+                    return;
+                closeMenu({ hideGrip: true });
+                action(context);
+            });
+            return button;
+        };
+        const openMenu = (context, anchorRect) => {
+            const resolved = resolveMenuContext(context);
+            if (!resolved)
+                return;
+            closeMenu();
+            selectBlockAt(resolved.view, resolved.sourcePos);
+            ensureDragHandleMenuStyles();
+            const el = document.createElement("div");
+            el.className = "an-rich-md-drag-menu";
+            el.setAttribute("role", "menu");
+            el.setAttribute("aria-label", "Block actions");
+            el.setAttribute("data-plan-interactive", "true");
+            el.append(createMenuItem("Duplicate", DRAG_HANDLE_MENU_ICON_DUPLICATE, duplicateBlock), createMenuItem("Delete", DRAG_HANDLE_MENU_ICON_DELETE, deleteBlock, {
+                danger: true,
+            }), createMenuItem("Insert block below", DRAG_HANDLE_MENU_ICON_INSERT, insertParagraphBelow));
+            menu = el;
+            menuContext = {
+                view: resolved.view,
+                sourceBlock: resolved.sourceBlock,
+                sourcePos: resolved.sourcePos,
+                sourceNodeSize: resolved.sourceNodeSize,
+            };
+            document.body.appendChild(el);
+            positionMenu(anchorRect);
+            handle?.setAttribute("aria-expanded", "true");
+            document.addEventListener("mousedown", handleMenuDocumentMouseDown, {
+                capture: true,
+            });
+            document.addEventListener("keydown", handleMenuKeyDown, {
+                capture: true,
+            });
+            window.addEventListener("resize", handleMenuViewportChange);
+            window.addEventListener("scroll", handleMenuViewportChange, {
+                capture: true,
+            });
+            el.querySelector("button")?.focus({
+                preventScroll: true,
+            });
+        };
+        const findDropTarget = (registration, clientX, clientY) => {
+            const view = registration.view;
+            const block = findForgivingBlock(view, clientX, clientY);
+            if (!block)
+                return null;
+            const node = view.state.doc.nodeAt(block.pmPos);
+            if (!node)
+                return null;
+            let placement;
+            const withinBlockY = clientY >= block.rect.top && clientY <= block.rect.bottom;
+            // Side (column) zones span the FULL block height — only the horizontal
+            // position decides column-vs-reorder. Restricting to the vertical middle
+            // (the old 0.2 band) made the already-tiny edge slivers nearly unhittable.
+            const sideZoneWidth = Math.min(clamp(block.rect.width * SIDE_DROP_ZONE_RATIO, SIDE_DROP_ZONE_MIN_PX, SIDE_DROP_ZONE_MAX_PX), block.rect.width * SIDE_DROP_ZONE_MAX_WIDTH_FRACTION);
+            if (registration.handleDrop &&
+                withinBlockY &&
+                clientX <= block.rect.left + sideZoneWidth) {
+                placement = "left";
+            }
+            else if (registration.handleDrop &&
+                withinBlockY &&
+                clientX >= block.rect.right - sideZoneWidth) {
+                placement = "right";
+            }
+            else {
+                placement =
+                    clientY < block.rect.top ||
+                        (clientY <= block.rect.bottom &&
+                            clientY < block.rect.top + block.rect.height / 2)
+                        ? "before"
+                        : "after";
+            }
+            const before = placement === "before" || placement === "left";
+            return {
+                registration,
+                view,
+                block: block.node,
+                placement,
+                pos: before ? block.pmPos : block.pmPos + node.nodeSize,
+                targetPos: block.pmPos,
+                targetNodeSize: node.nodeSize,
+                rect: block.rect,
+            };
+        };
+        const findAnyDropTarget = (session, clientX, clientY) => {
+            const candidates = [];
+            for (const registration of dragHandleRegistrations) {
+                if (!registration.view.dom.isConnected)
+                    continue;
+                if (registration.view !== session.view &&
+                    session.sourceBlock.contains(registration.view.dom)) {
+                    continue;
+                }
+                const target = findDropTarget(registration, clientX, clientY);
+                if (target)
+                    candidates.push(target);
+            }
+            candidates.sort((a, b) => {
+                const aRect = a.view.dom.getBoundingClientRect();
+                const bRect = b.view.dom.getBoundingClientRect();
+                return aRect.width * aRect.height - bRect.width * bRect.height;
+            });
+            return candidates[0] ?? null;
+        };
+        const positionDragPreview = (session, clientX, clientY) => {
+            if (!session.preview)
+                return;
+            session.preview.style.transform = `translate3d(${clientX + 12}px, ${clientY + 10}px, 0)`;
+        };
+        const updateDropLine = (session, target) => {
+            const sourceEnd = session.sourcePos + session.sourceNodeSize;
+            const isSideDrop = target?.placement === "left" || target?.placement === "right";
+            if (!target ||
+                (target.view === session.view &&
+                    (isSideDrop
+                        ? // A side drop only ever builds columns; the ProseMirror seam
+                            // position is irrelevant. The only no-op is dropping a block on
+                            // ITS OWN side — adjacent *different* blocks must still form
+                            // columns (otherwise dropping onto an immediate neighbour's
+                            // facing edge silently does nothing, which reads as "side drop
+                            // works sometimes").
+                            target.targetPos === session.sourcePos
+                        : target.pos === session.sourcePos ||
+                            target.pos === sourceEnd ||
+                            (target.pos > session.sourcePos && target.pos < sourceEnd)))) {
+                session.dropTarget = null;
+                session.dropLine?.remove();
+                session.dropLine = null;
+                return;
+            }
+            const wrapper = target.view.dom.closest(target.registration.wrapperSelector);
+            if (!wrapper)
+                return;
+            if (!session.dropLine || session.dropLine.parentElement !== wrapper) {
+                session.dropLine?.remove();
+                session.dropLine = createDropLine(target.registration);
+            }
+            if (!session.dropLine)
+                return;
+            const wrapperRect = wrapper.getBoundingClientRect();
+            const editorRect = target.view.dom.getBoundingClientRect();
+            session.dropTarget = target;
+            // A column (side) drop and a reorder (before/after) drop both draw the
+            // `.notion-drop-indicator`, but they mean very different things, so the
+            // column case carries a modifier class apps style distinctly (a bolder,
+            // glowing vertical bar) — without a clear cue a human can't tell they've
+            // entered column-build mode before releasing.
+            const isColumnDrop = target.placement === "left" || target.placement === "right";
+            session.dropLine.classList.toggle("notion-drop-indicator--column", isColumnDrop);
+            if (isColumnDrop) {
+                // A vertical bar centred on the seam at the target's left/right edge,
+                // spanning the block's full height.
+                const SIDE_BAR_WIDTH = 4;
+                const seam = target.placement === "left" ? target.rect.left : target.rect.right;
+                session.dropLine.style.left = `${seam - wrapperRect.left - SIDE_BAR_WIDTH / 2}px`;
+                session.dropLine.style.top = `${target.rect.top - wrapperRect.top}px`;
+                session.dropLine.style.width = `${SIDE_BAR_WIDTH}px`;
+                session.dropLine.style.height = `${target.rect.height}px`;
+                return;
+            }
+            const top = target.placement === "before" ? target.rect.top : target.rect.bottom;
+            session.dropLine.style.left = `${editorRect.left - wrapperRect.left}px`;
+            session.dropLine.style.top = `${top - wrapperRect.top}px`;
+            session.dropLine.style.width = `${editorRect.width}px`;
+            session.dropLine.style.height = "3px";
+        };
+        const createHandle = () => {
+            const el = document.createElement("div");
+            el.className = "drag-handle";
+            el.contentEditable = "false";
+            el.draggable = false;
+            el.tabIndex = 0;
+            el.setAttribute("role", "button");
+            el.setAttribute("aria-label", "Open block menu or drag to reorder");
+            el.setAttribute("aria-haspopup", "menu");
+            el.setAttribute("aria-expanded", "false");
+            el.title = "Open block menu or drag to reorder";
+            // The icon must not be its own hit target: a real mouse-down inside a
+            // nested editor (a column) lands on the SVG, and a container block's
+            // capture-phase block-select handler (RegistryBlockNode) only spares the
+            // grip DIV — so a press on the icon gets swallowed and the block can't be
+            // dragged out of / between columns. `pointer-events:none` makes every
+            // press in the grip area resolve to the DIV instead.
+            // Tabler `grip-vertical` (the framework-wide icon set). `pointer-events:none`
+            // keeps every press in the grip area resolving to the DIV, not the SVG.
+            el.innerHTML = DRAG_HANDLE_GRIP_ICON;
+            const gripSvg = el.querySelector("svg");
+            if (gripSvg) {
+                gripSvg.setAttribute("width", "16");
+                gripSvg.setAttribute("height", "16");
+                gripSvg.style.pointerEvents = "none";
+            }
+            return el;
+        };
+        const hideHandle = () => {
+            if (menu)
+                return;
+            forceHideHandle();
+        };
+        const removeDragListeners = () => {
+            document.removeEventListener("mousemove", handleDocumentMouseMove);
+            document.removeEventListener("mouseup", handleDocumentMouseUp);
+            document.removeEventListener("keydown", handleDocumentKeyDown);
+        };
+        function handleMenuDocumentMouseDown(event) {
+            const target = event.target;
+            if (!(target instanceof Node))
+                return;
+            if (menu?.contains(target) || handle?.contains(target))
+                return;
+            closeMenu({ hideGrip: true });
+        }
+        function handleMenuKeyDown(event) {
+            if (!menu)
+                return;
+            if (event.key === "Escape") {
+                event.preventDefault();
+                closeMenu({ hideGrip: true });
+                return;
+            }
+            if (event.key !== "ArrowDown" &&
+                event.key !== "ArrowUp" &&
+                event.key !== "Home" &&
+                event.key !== "End") {
+                return;
+            }
+            const buttons = Array.from(menu.querySelectorAll("button"));
+            if (buttons.length === 0)
+                return;
+            event.preventDefault();
+            const activeIndex = buttons.indexOf(document.activeElement);
+            let nextIndex = activeIndex < 0 ? 0 : activeIndex;
+            if (event.key === "ArrowDown") {
+                nextIndex = (nextIndex + 1) % buttons.length;
+            }
+            else if (event.key === "ArrowUp") {
+                nextIndex = (nextIndex - 1 + buttons.length) % buttons.length;
+            }
+            else if (event.key === "Home") {
+                nextIndex = 0;
+            }
+            else if (event.key === "End") {
+                nextIndex = buttons.length - 1;
+            }
+            buttons[nextIndex]?.focus({ preventScroll: true });
+        }
+        function handleMenuViewportChange() {
+            closeMenu({ hideGrip: true });
+        }
+        const finishDragSession = (commit, event) => {
+            const session = dragSession;
+            if (!session)
+                return;
+            removeDragListeners();
+            if (commit && session.dragging && session.dropTarget) {
+                const sourceStart = session.sourcePos;
+                const sourceEnd = session.sourcePos + session.sourceNodeSize;
+                const target = session.dropTarget;
+                const dropPos = target.pos;
+                const isSideDrop = target.placement === "left" || target.placement === "right";
+                if (target.view !== session.view ||
+                    (isSideDrop
+                        ? // Side drop (column build): proceed for any block that isn't the
+                            // source itself, including the source's immediate neighbour.
+                            target.targetPos !== sourceStart
+                        : dropPos !== sourceStart &&
+                            dropPos !== sourceEnd &&
+                            !(dropPos > sourceStart && dropPos < sourceEnd))) {
+                    const sourceNode = session.view.state.doc.nodeAt(sourceStart);
+                    if (sourceNode) {
+                        const sourceRegistration = registrationForView(session.view);
+                        const transferData = sourceRegistration?.getDragTransferData?.({
+                            view: session.view,
+                            node: sourceNode,
+                            pos: sourceStart,
+                        });
+                        const targetNode = target.view.state.doc.nodeAt(target.targetPos);
+                        const handled = !!targetNode &&
+                            (target.registration.handleDrop?.(transferData, {
+                                view: target.view,
+                                sourceView: session.view,
+                                sourceNode,
+                                sourcePos: sourceStart,
+                                sourceNodeSize: sourceNode.nodeSize,
+                                targetNode,
+                                targetPos: target.targetPos,
+                                targetNodeSize: target.targetNodeSize,
+                                insertPos: dropPos,
+                                placement: target.placement,
+                            }) ??
+                                false);
+                        if (handled) {
+                            target.view.focus();
+                        }
+                        else if (target.view === session.view) {
+                            const insertPos = dropPos > sourceStart ? dropPos - sourceNode.nodeSize : dropPos;
+                            const tr = session.view.state.tr
+                                .delete(sourceStart, sourceEnd)
+                                .insert(insertPos, sourceNode);
+                            tr.setSelection(NodeSelection.create(tr.doc, insertPos));
+                            session.view.dispatch(tr.scrollIntoView());
+                            session.view.focus();
+                        }
+                        else {
+                            try {
+                                const targetNode = target.view.state.schema.nodeFromJSON(sourceNode.toJSON());
+                                target.registration.receiveDragTransferData?.(transferData, {
+                                    view: target.view,
+                                    node: targetNode,
+                                    pos: dropPos,
+                                    sourceView: session.view,
+                                });
+                                const insertTr = target.view.state.tr.insert(dropPos, targetNode);
+                                insertTr.setSelection(NodeSelection.create(insertTr.doc, dropPos));
+                                target.view.dispatch(insertTr.scrollIntoView());
+                                const deleteTr = session.view.state.tr.delete(sourceStart, sourceEnd);
+                                session.view.dispatch(deleteTr);
+                                target.view.focus();
+                            }
+                            catch {
+                                // If the target schema cannot accept this node, leave the
+                                // source document untouched.
+                            }
+                        }
+                    }
+                }
+            }
+            else if (commit && !session.dragging && event) {
+                openMenu({
+                    view: session.view,
+                    sourceBlock: session.sourceBlock,
+                    sourcePos: session.sourcePos,
+                    sourceNodeSize: session.sourceNodeSize,
+                }, handle?.getBoundingClientRect() ??
+                    session.sourceBlock.getBoundingClientRect());
+            }
+            cleanupDragVisuals();
+            dragSession = null;
+            if (activeDragRegistration === currentRegistration) {
+                activeDragRegistration = null;
+            }
+            if (session.dragging || !commit)
+                hideHandle();
+        };
+        const beginDragSession = (session, event) => {
+            session.dragging = true;
+            session.preview = createDragPreview(session.sourceBlock);
+            session.sourceBlock.classList.add("notion-block--dragging");
+            document.documentElement.classList.add("notion-editor-is-dragging");
+            positionDragPreview(session, event.clientX, event.clientY);
+            updateDropLine(session, findAnyDropTarget(session, event.clientX, event.clientY));
+        };
+        function handleDocumentMouseMove(event) {
+            if (!dragSession)
+                return;
+            event.preventDefault();
+            const movedEnough = Math.hypot(event.clientX - dragSession.startX, event.clientY - dragSession.startY) > 4;
+            if (!dragSession.dragging && movedEnough) {
+                beginDragSession(dragSession, event);
+            }
+            if (!dragSession.dragging)
+                return;
+            positionDragPreview(dragSession, event.clientX, event.clientY);
+            updateDropLine(dragSession, findAnyDropTarget(dragSession, event.clientX, event.clientY));
+        }
+        function handleDocumentMouseUp(event) {
+            event.preventDefault();
+            finishDragSession(true, event);
+        }
+        function handleDocumentKeyDown(event) {
+            if (event.key !== "Escape")
+                return;
+            event.preventDefault();
+            finishDragSession(false);
+        }
+        return [
+            new Plugin({
+                key: dragHandleKey,
+                view(editorView) {
+                    const registration = {
+                        view: editorView,
+                        wrapperSelector,
+                        getDragTransferData,
+                        receiveDragTransferData,
+                        handleDrop,
+                        canHover: () => !!handle && !menu && !dragSession && editor.isEditable,
+                        findHoverBlock: (clientX, clientY) => findForgivingBlock(editorView, clientX, clientY),
+                        showHoverBlock: (block) => showHandleForBlock(editorView, block),
+                        hideHover: () => hideHandle(),
+                        gripRect: () => handle && handle.style.display !== "none"
+                            ? handle.getBoundingClientRect()
+                            : null,
+                    };
+                    currentRegistration = registration;
+                    dragHandleRegistrations.add(registration);
+                    retainGlobalHoverListener();
+                    handle = createHandle();
+                    const wrapper = editorView.dom.closest(wrapperSelector);
+                    if (wrapper) {
+                        wrapper.style.position = "relative";
+                        wrapper.appendChild(handle);
+                    }
+                    handle.addEventListener("mousedown", (e) => {
+                        e.stopPropagation();
+                        if (e.button !== 0)
+                            return;
+                        closeMenu();
+                        if (!editor.isEditable) {
+                            e.preventDefault();
+                            return;
+                        }
+                        if (!currentBlock || dragStartPos === null)
+                            return;
+                        const sourceNode = editorView.state.doc.nodeAt(dragStartPos);
+                        if (!sourceNode)
+                            return;
+                        e.preventDefault();
+                        dragSession = {
+                            view: editorView,
+                            sourceBlock: currentBlock,
+                            sourcePos: dragStartPos,
+                            sourceNodeSize: sourceNode.nodeSize,
+                            startX: e.clientX,
+                            startY: e.clientY,
+                            dragging: false,
+                            preview: null,
+                            dropLine: null,
+                            dropTarget: null,
+                        };
+                        activeDragRegistration = registration;
+                        document.addEventListener("mousemove", handleDocumentMouseMove);
+                        document.addEventListener("mouseup", handleDocumentMouseUp);
+                        document.addEventListener("keydown", handleDocumentKeyDown);
+                    });
+                    handle.addEventListener("keydown", (e) => {
+                        if (e.key !== "Enter" && e.key !== " ")
+                            return;
+                        e.preventDefault();
+                        e.stopPropagation();
+                        closeMenu();
+                        if (!editor.isEditable || !currentBlock || dragStartPos === null) {
+                            return;
+                        }
+                        const sourceNode = editorView.state.doc.nodeAt(dragStartPos);
+                        if (!sourceNode)
+                            return;
+                        openMenu({
+                            view: editorView,
+                            sourceBlock: currentBlock,
+                            sourcePos: dragStartPos,
+                            sourceNodeSize: sourceNode.nodeSize,
+                        }, handle?.getBoundingClientRect() ??
+                            currentBlock.getBoundingClientRect());
+                    });
+                    return {
+                        destroy() {
+                            closeMenu({ hideGrip: true });
+                            finishDragSession(false);
+                            releaseGlobalHoverListener();
+                            dragHandleRegistrations.delete(registration);
+                            if (activeDragRegistration === registration) {
+                                activeDragRegistration = null;
+                            }
+                            if (activeHoverRegistration === registration) {
+                                activeHoverRegistration = null;
+                            }
+                            handle?.remove();
+                            handle = null;
+                            currentRegistration = null;
+                        },
+                    };
+                },
+                props: {
+                    handleDOMEvents: {
+                        mousemove(_view, event) {
+                            updateRegisteredHover(event.clientX, event.clientY);
+                            return false;
+                        },
+                        drop() {
+                            closeMenu({ hideGrip: true });
+                            finishDragSession(false);
+                            hideHandle();
+                            return false;
+                        },
+                    },
+                },
+            }),
+        ];
+    },
+});
+//# sourceMappingURL=DragHandle.js.map