@agent-native/core 0.39.2 → 0.40.0

package/dist/client/rich-markdown-editor/DragHandle.js

@@ -1,5 +1,5 @@
 import { Extension } from "@tiptap/core";
-import { Plugin, PluginKey, NodeSelection } from "@tiptap/pm/state";
+import { Plugin, PluginKey, NodeSelection, TextSelection, } from "@tiptap/pm/state";
 /**
  * Default editor-wrapper CSS selector the drag handle scopes itself to.
  *
@@ -12,6 +12,206 @@ import { Plugin, PluginKey, NodeSelection } from "@tiptap/pm/state";
 export const DEFAULT_DRAG_HANDLE_WRAPPER_SELECTOR = ".visual-editor-wrapper";
 const dragHandleKey = new PluginKey("dragHandle");
 const HOVER_SIDE_OUTSET_REM = 8;
+const SIDE_DROP_ZONE_RATIO = 0.28;
+const SIDE_DROP_ZONE_MIN_PX = 48;
+const SIDE_DROP_ZONE_MAX_PX = 140;
+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;
+const dragHandleRegistrations = new Set();
+let dragHandleGlobalHoverListeners = 0;
+let activeDragRegistration = 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?.();
+        }
+        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?.();
+        }
+    }
+    candidates.sort((a, b) => editorArea(a.registration) - editorArea(b.registration));
+    const active = candidates[0] ?? null;
+    for (const registration of dragHandleRegistrations) {
+        if (registration !== active?.registration)
+            registration.hideHover?.();
+    }
+    active?.registration.showHoverBlock?.(active.block);
+};
+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 {
+  position: relative;
+  flex: 0 0 auto;
+  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::before,
+.an-rich-md-drag-menu__icon::after {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+}
+
+.an-rich-md-drag-menu__icon--duplicate::before,
+.an-rich-md-drag-menu__icon--duplicate::after {
+  width: 11px;
+  height: 11px;
+  border: 1.5px solid currentColor;
+  border-radius: 2px;
+}
+
+.an-rich-md-drag-menu__icon--duplicate::before {
+  left: 6px;
+  top: 2px;
+  opacity: 0.55;
+}
+
+.an-rich-md-drag-menu__icon--duplicate::after {
+  left: 2px;
+  top: 6px;
+  background: hsl(var(--popover, 0 0% 100%));
+}
+
+.an-rich-md-drag-menu__icon--insert::before {
+  left: 3px;
+  top: 8px;
+  width: 12px;
+  height: 1.5px;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+.an-rich-md-drag-menu__icon--insert::after {
+  left: 8px;
+  top: 3px;
+  width: 1.5px;
+  height: 12px;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+.an-rich-md-drag-menu__icon--delete::before {
+  left: 4px;
+  top: 7px;
+  width: 10px;
+  height: 11px;
+  border: 1.5px solid currentColor;
+  border-top: 0;
+  border-radius: 0 0 2px 2px;
+}
+
+.an-rich-md-drag-menu__icon--delete::after {
+  left: 3px;
+  top: 4px;
+  width: 12px;
+  height: 1.5px;
+  border-radius: 999px;
+  background: currentColor;
+  box-shadow: 3px -2.5px 0 -0.4px currentColor;
+}
+
+.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
@@ -21,10 +221,10 @@ const HOVER_SIDE_OUTSET_REM = 8;
  * - 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).
- * - `mousedown` on the grip selects the block as a `NodeSelection`; dragging past
- *   a small threshold starts a reorder, showing a floating clone preview
- *   (`.notion-drag-preview`) and a `.notion-drop-indicator` line. `Escape`
- *   cancels.
+ * - 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.
@@ -44,15 +244,23 @@ export const DragHandle = Extension.create({
     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) *
@@ -72,6 +280,13 @@ export const DragHandle = Extension.create({
             });
             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)
@@ -122,11 +337,9 @@ export const DragHandle = Extension.create({
             handle.style.top = `${block.rect.top - wrapperRect.top + 2}px`;
             handle.style.left = "-24px";
         };
-        const selectCurrentBlock = (editorView) => {
-            if (dragStartPos === null)
-                return null;
+        const selectBlockAt = (editorView, pos) => {
             try {
-                const sel = NodeSelection.create(editorView.state.doc, dragStartPos);
+                const sel = NodeSelection.create(editorView.state.doc, pos);
                 editorView.dispatch(editorView.state.tr.setSelection(sel));
                 editorView.focus();
                 return sel;
@@ -162,8 +375,8 @@ export const DragHandle = Extension.create({
             document.body.appendChild(preview);
             return preview;
         };
-        const createDropLine = (view) => {
-            const wrapper = view.dom.closest(wrapperSelector);
+        const createDropLine = (registration) => {
+            const wrapper = registration.view.dom.closest(registration.wrapperSelector);
             if (!wrapper)
                 return null;
             const line = document.createElement("div");
@@ -171,23 +384,244 @@ export const DragHandle = Extension.create({
             wrapper.appendChild(line);
             return line;
         };
-        const findDropTarget = (view, clientX, clientY) => {
+        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, iconModifier, 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 an-rich-md-drag-menu__icon--${iconModifier}`;
+            icon.setAttribute("aria-hidden", "true");
+            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", "duplicate", duplicateBlock), createMenuItem("Delete", "delete", deleteBlock, { danger: true }), createMenuItem("Insert block below", "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;
-            const dropBefore = clientY < block.rect.top ||
-                (clientY <= block.rect.bottom &&
-                    clientY < block.rect.top + block.rect.height / 2);
+            let placement;
+            const withinBlockY = clientY >= block.rect.top && clientY <= block.rect.bottom;
+            const withinSideDropBand = clientY >= block.rect.top + block.rect.height * 0.2 &&
+                clientY <= block.rect.bottom - block.rect.height * 0.2;
+            const sideZoneWidth = clamp(block.rect.width * SIDE_DROP_ZONE_RATIO, SIDE_DROP_ZONE_MIN_PX, SIDE_DROP_ZONE_MAX_PX);
+            if (registration.handleDrop &&
+                withinBlockY &&
+                withinSideDropBand &&
+                clientX <= block.rect.left + sideZoneWidth) {
+                placement = "left";
+            }
+            else if (registration.handleDrop &&
+                withinBlockY &&
+                withinSideDropBand &&
+                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,
-                before: dropBefore,
-                pos: dropBefore ? block.pmPos : block.pmPos + node.nodeSize,
+                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;
@@ -196,34 +630,52 @@ export const DragHandle = Extension.create({
         const updateDropLine = (session, target) => {
             const sourceEnd = session.sourcePos + session.sourceNodeSize;
             if (!target ||
-                target.pos === session.sourcePos ||
-                target.pos === sourceEnd ||
-                (target.pos > session.sourcePos && target.pos < sourceEnd)) {
-                session.dropPos = null;
+                (target.view === session.view &&
+                    (target.pos === session.sourcePos ||
+                        target.pos === sourceEnd ||
+                        (target.pos > session.sourcePos && target.pos < sourceEnd)))) {
+                session.dropTarget = null;
                 session.dropLine?.remove();
                 session.dropLine = null;
                 return;
             }
-            if (!session.dropLine)
-                session.dropLine = createDropLine(session.view);
-            if (!session.dropLine)
-                return;
-            const wrapper = session.view.dom.closest(wrapperSelector);
+            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 = session.view.dom.getBoundingClientRect();
-            const top = target.before ? target.rect.top : target.rect.bottom;
-            session.dropPos = target.pos;
+            const editorRect = target.view.dom.getBoundingClientRect();
+            session.dropTarget = target;
+            if (target.placement === "left" || target.placement === "right") {
+                const left = target.placement === "left" ? target.rect.left : target.rect.right;
+                session.dropLine.style.left = `${left - wrapperRect.left}px`;
+                session.dropLine.style.top = `${target.rect.top - wrapperRect.top}px`;
+                session.dropLine.style.width = "3px";
+                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";
             el.innerHTML = `<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
         <circle cx="5.5" cy="3" r="1.5"/><circle cx="10.5" cy="3" r="1.5"/>
         <circle cx="5.5" cy="8" r="1.5"/><circle cx="10.5" cy="8" r="1.5"/>
@@ -232,61 +684,149 @@ export const DragHandle = Extension.create({
             return el;
         };
         const hideHandle = () => {
-            if (handle)
-                handle.style.display = "none";
-            currentBlock = null;
+            if (menu)
+                return;
+            forceHideHandle();
         };
         const removeDragListeners = () => {
             document.removeEventListener("mousemove", handleDocumentMouseMove);
             document.removeEventListener("mouseup", handleDocumentMouseUp);
             document.removeEventListener("keydown", handleDocumentKeyDown);
         };
-        const createDocumentHoverMove = (editorView) => {
-            return (event) => {
-                if (!handle || dragSession)
-                    return;
-                if (!editor.isEditable) {
-                    hideHandle();
-                    return;
-                }
-                const block = findForgivingBlock(editorView, event.clientX, event.clientY);
-                if (!block) {
-                    hideHandle();
-                    return;
-                }
-                showHandleForBlock(editorView, block);
-            };
-        };
-        const finishDragSession = (commit) => {
+        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.dropPos !== null) {
+            if (commit && session.dragging && session.dropTarget) {
                 const sourceStart = session.sourcePos;
                 const sourceEnd = session.sourcePos + session.sourceNodeSize;
-                const dropPos = session.dropPos;
-                if (dropPos !== sourceStart &&
-                    dropPos !== sourceEnd &&
-                    !(dropPos > sourceStart && dropPos < sourceEnd)) {
+                const target = session.dropTarget;
+                const dropPos = target.pos;
+                if (target.view !== session.view ||
+                    (dropPos !== sourceStart &&
+                        dropPos !== sourceEnd &&
+                        !(dropPos > sourceStart && dropPos < sourceEnd))) {
                     const sourceNode = session.view.state.doc.nodeAt(sourceStart);
                     if (sourceNode) {
-                        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();
+                        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 (!session.dragging) {
-                selectCurrentBlock(session.view);
+            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;
-            hideHandle();
+            if (activeDragRegistration === currentRegistration) {
+                activeDragRegistration = null;
+            }
+            if (session.dragging || !commit)
+                hideHandle();
         };
         const beginDragSession = (session, event) => {
             session.dragging = true;
@@ -294,7 +834,7 @@ export const DragHandle = Extension.create({
             session.sourceBlock.classList.add("notion-block--dragging");
             document.documentElement.classList.add("notion-editor-is-dragging");
             positionDragPreview(session, event.clientX, event.clientY);
-            updateDropLine(session, findDropTarget(session.view, event.clientX, event.clientY));
+            updateDropLine(session, findAnyDropTarget(session, event.clientX, event.clientY));
         };
         function handleDocumentMouseMove(event) {
             if (!dragSession)
@@ -307,11 +847,11 @@ export const DragHandle = Extension.create({
             if (!dragSession.dragging)
                 return;
             positionDragPreview(dragSession, event.clientX, event.clientY);
-            updateDropLine(dragSession, findDropTarget(dragSession.view, event.clientX, event.clientY));
+            updateDropLine(dragSession, findAnyDropTarget(dragSession, event.clientX, event.clientY));
         }
         function handleDocumentMouseUp(event) {
             event.preventDefault();
-            finishDragSession(true);
+            finishDragSession(true, event);
         }
         function handleDocumentKeyDown(event) {
             if (event.key !== "Escape")
@@ -323,16 +863,31 @@ export const DragHandle = Extension.create({
             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(),
+                    };
+                    currentRegistration = registration;
+                    dragHandleRegistrations.add(registration);
+                    retainGlobalHoverListener();
                     handle = createHandle();
-                    const handleDocumentHoverMove = createDocumentHoverMove(editorView);
                     const wrapper = editorView.dom.closest(wrapperSelector);
                     if (wrapper) {
                         wrapper.style.position = "relative";
                         wrapper.appendChild(handle);
                     }
-                    document.addEventListener("mousemove", handleDocumentHoverMove);
                     handle.addEventListener("mousedown", (e) => {
                         e.stopPropagation();
+                        if (e.button !== 0)
+                            return;
+                        closeMenu();
                         if (!editor.isEditable) {
                             e.preventDefault();
                             return;
@@ -353,43 +908,56 @@ export const DragHandle = Extension.create({
                             dragging: false,
                             preview: null,
                             dropLine: null,
-                            dropPos: 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() {
-                            document.removeEventListener("mousemove", handleDocumentHoverMove);
+                            closeMenu({ hideGrip: true });
                             finishDragSession(false);
+                            releaseGlobalHoverListener();
+                            dragHandleRegistrations.delete(registration);
+                            if (activeDragRegistration === registration) {
+                                activeDragRegistration = null;
+                            }
                             handle?.remove();
                             handle = null;
+                            currentRegistration = null;
                         },
                     };
                 },
                 props: {
                     handleDOMEvents: {
-                        mousemove(view, event) {
-                            if (!handle)
-                                return false;
-                            if (!editor.isEditable) {
-                                hideHandle();
-                                return false;
-                            }
-                            if (dragSession)
-                                return false;
-                            const block = findForgivingBlock(view, event.clientX, event.clientY);
-                            if (!block) {
-                                hideHandle();
-                                return false;
-                            }
-                            if (block.node === currentBlock)
-                                return false;
-                            showHandleForBlock(view, block);
+                        mousemove(_view, event) {
+                            updateRegisteredHover(event.clientX, event.clientY);
                             return false;
                         },
                         drop() {
+                            closeMenu({ hideGrip: true });
                             finishDragSession(false);
                             hideHandle();
                             return false;