@agent-native/toolkit 0.6.0 → 0.8.0

package/src/editor/DragHandle.ts

@@ -0,0 +1,1437 @@
+import { Extension } from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import {
+  Plugin,
+  PluginKey,
+  NodeSelection,
+  TextSelection,
+  type Transaction,
+} from "@tiptap/pm/state";
+import { type EditorView } from "@tiptap/pm/view";
+
+/**
+ * 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";
+
+export interface DragHandleOptions {
+  /**
+   * CSS selector for the editor wrapper element the handle is anchored to.
+   *
+   * Must match an ancestor of the ProseMirror editor DOM. The wrapper gets
+   * `position: relative` so the absolutely-positioned grip and drop indicator
+   * can be placed relative to it. Defaults to
+   * {@link DEFAULT_DRAG_HANDLE_WRAPPER_SELECTOR} so Content keeps working
+   * unchanged.
+   */
+  wrapperSelector: string;
+  /**
+   * Optional source-side payload for a cross-editor block move. The editor doc
+   * carries ProseMirror node content, but app-owned side-map data (for example a
+   * plan `diagram` block's HTML/CSS) can live outside the doc; this lets the
+   * host carry that data to the receiving editor before the node is inserted.
+   */
+  getDragTransferData?: (context: {
+    view: EditorView;
+    node: ProseMirrorNode;
+    pos: number;
+  }) => unknown;
+  /**
+   * Optional target-side receiver for cross-editor transfer data. Called before
+   * the node is inserted into the target editor so the target's serializer can
+   * resolve app-owned data during the synchronous ProseMirror update.
+   */
+  receiveDragTransferData?: (
+    data: unknown,
+    context: {
+      view: EditorView;
+      node: ProseMirrorNode;
+      pos: number;
+      sourceView: EditorView;
+    },
+  ) => void;
+  /**
+   * Optional host-level drop handler for document-specific structure changes.
+   * Returning true tells the shared drag handle that the host fully handled the
+   * move and no ProseMirror insert/delete should run. This is used for
+   * Notion-style side drops where dropping a block to the left/right creates or
+   * inserts into a column layout rather than inserting into the target editor.
+   */
+  handleDrop?: (data: unknown, context: DragHandleDropContext) => boolean;
+}
+
+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: string): string =>
+  `<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" />',
+);
+
+type DropTarget = {
+  registration: DragHandleRegistration;
+  view: EditorView;
+  block: HTMLElement;
+  placement: DragHandleDropPlacement;
+  pos: number;
+  targetPos: number;
+  targetNodeSize: number;
+  rect: DOMRect;
+};
+
+export type DragHandleDropPlacement = "before" | "after" | "left" | "right";
+
+export type DragHandleDropContext = {
+  view: EditorView;
+  sourceView: EditorView;
+  sourceNode: ProseMirrorNode;
+  sourcePos: number;
+  sourceNodeSize: number;
+  targetNode: ProseMirrorNode;
+  targetPos: number;
+  targetNodeSize: number;
+  insertPos: number;
+  placement: DragHandleDropPlacement;
+};
+
+type DragSession = {
+  view: EditorView;
+  sourceBlock: HTMLElement;
+  sourcePos: number;
+  sourceNodeSize: number;
+  startX: number;
+  startY: number;
+  dragging: boolean;
+  preview: HTMLElement | null;
+  dropLine: HTMLElement | null;
+  dropTarget: DropTarget | null;
+};
+
+type HoverBlock = {
+  node: HTMLElement;
+  pmPos: number;
+  rect: DOMRect;
+};
+
+type DragHandleMenuContext = {
+  view: EditorView;
+  sourceBlock: HTMLElement;
+  sourcePos: number;
+  sourceNodeSize: number;
+};
+
+type DragHandleRegistration = {
+  view: EditorView;
+  wrapperSelector: string;
+  getDragTransferData?: DragHandleOptions["getDragTransferData"];
+  receiveDragTransferData?: DragHandleOptions["receiveDragTransferData"];
+  handleDrop?: DragHandleOptions["handleDrop"];
+  canHover?: () => boolean;
+  findHoverBlock?: (clientX: number, clientY: number) => HoverBlock | null;
+  showHoverBlock?: (block: HoverBlock) => void;
+  hideHover?: () => void;
+  /** The currently displayed grip's bounding rect, or null when hidden. */
+  gripRect?: () => DOMRect | null;
+};
+
+const dragHandleRegistrations = new Set<DragHandleRegistration>();
+let dragHandleGlobalHoverListeners = 0;
+let activeDragRegistration: DragHandleRegistration | null = 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: DragHandleRegistration | null = null;
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+const editorArea = (registration: DragHandleRegistration) => {
+  const rect = registration.view.dom.getBoundingClientRect();
+  return rect.width * rect.height;
+};
+
+const updateRegisteredHover = (clientX: number, clientY: number) => {
+  if (activeDragRegistration) {
+    for (const registration of dragHandleRegistrations) {
+      registration.hideHover?.();
+    }
+    activeHoverRegistration = null;
+    return;
+  }
+
+  const candidates: Array<{
+    registration: DragHandleRegistration;
+    block: HoverBlock;
+  }> = [];
+
+  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: {
+    registration: DragHandleRegistration;
+    block: HoverBlock;
+  } | null;
+  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: MouseEvent) => {
+  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<DragHandleOptions>({
+  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: HTMLElement | null = null;
+    let menu: HTMLElement | null = null;
+    let menuContext: DragHandleMenuContext | null = null;
+    let currentBlock: HTMLElement | null = null;
+    let dragStartPos: number | null = null;
+    let dragSession: DragSession | null = null;
+    let currentRegistration: DragHandleRegistration | null = null;
+
+    const getHoverSideOutset = () => {
+      const rootFontSize = Number.parseFloat(
+        getComputedStyle(document.documentElement).fontSize,
+      );
+      return (
+        (Number.isFinite(rootFontSize) ? rootFontSize : 16) *
+        HOVER_SIDE_OUTSET_REM
+      );
+    };
+
+    const getTopLevelBlocks = (editorView: EditorView): HoverBlock[] => {
+      const blocks: HoverBlock[] = [];
+
+      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: EditorView,
+    ): DragHandleRegistration | null => {
+      for (const registration of dragHandleRegistrations) {
+        if (registration.view === editorView) return registration;
+      }
+      return null;
+    };
+
+    const findForgivingBlock = (
+      editorView: EditorView,
+      clientX: number,
+      clientY: number,
+    ): HoverBlock | null => {
+      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: EditorView, block: HoverBlock) => {
+      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 as HTMLElement).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: EditorView, pos: number) => {
+      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: HTMLElement): HTMLElement => {
+      const blockRect = block.getBoundingClientRect();
+      const preview = document.createElement("div");
+      const clone = block.cloneNode(true) as HTMLElement;
+
+      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<HTMLElement>("*").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: DragHandleRegistration,
+    ): HTMLElement | null => {
+      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 }: { hideGrip?: boolean } = {}) => {
+      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: DragHandleMenuContext) => {
+      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: EditorView,
+      tr: Transaction,
+      pos: number,
+      bias: -1 | 1,
+    ) => {
+      tr.setSelection(
+        TextSelection.near(
+          tr.doc.resolve(clamp(pos, 0, tr.doc.content.size)),
+          bias,
+        ),
+      );
+      view.dispatch(tr.scrollIntoView());
+      view.focus();
+    };
+
+    const duplicateBlock = (context: DragHandleMenuContext) => {
+      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: DragHandleMenuContext) => {
+      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: DragHandleMenuContext) => {
+      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: DOMRect) => {
+      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: string,
+      iconSvg: string,
+      action: (context: DragHandleMenuContext) => void,
+      options: { danger?: boolean } = {},
+    ) => {
+      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: DragHandleMenuContext, anchorRect: DOMRect) => {
+      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<HTMLButtonElement>("button")?.focus({
+        preventScroll: true,
+      });
+    };
+
+    const findDropTarget = (
+      registration: DragHandleRegistration,
+      clientX: number,
+      clientY: number,
+    ): DropTarget | null => {
+      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: DragHandleDropPlacement;
+      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: DragSession,
+      clientX: number,
+      clientY: number,
+    ): DropTarget | null => {
+      const candidates: DropTarget[] = [];
+
+      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: DragSession,
+      clientX: number,
+      clientY: number,
+    ) => {
+      if (!session.preview) return;
+
+      session.preview.style.transform = `translate3d(${clientX + 12}px, ${clientY + 10}px, 0)`;
+    };
+
+    const updateDropLine = (
+      session: DragSession,
+      target: DropTarget | null,
+    ) => {
+      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: MouseEvent) {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (menu?.contains(target) || handle?.contains(target)) return;
+      closeMenu({ hideGrip: true });
+    }
+
+    function handleMenuKeyDown(event: KeyboardEvent) {
+      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<HTMLButtonElement>("button"),
+      );
+      if (buttons.length === 0) return;
+
+      event.preventDefault();
+      const activeIndex = buttons.indexOf(
+        document.activeElement as HTMLButtonElement,
+      );
+      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: boolean, event?: MouseEvent) => {
+      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: DragSession, event: MouseEvent) => {
+      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: MouseEvent) {
+      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: MouseEvent) {
+      event.preventDefault();
+      finishDragSession(true, event);
+    }
+
+    function handleDocumentKeyDown(event: KeyboardEvent) {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      finishDragSession(false);
+    }
+
+    return [
+      new Plugin({
+        key: dragHandleKey,
+        view(editorView) {
+          const registration: DragHandleRegistration = {
+            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 as HTMLElement).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;
+            },
+          },
+        },
+      }),
+    ];
+  },
+});