@agent-native/core 0.42.0 → 0.44.0

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

@@ -12,16 +12,50 @@ import { Plugin, PluginKey, NodeSelection, TextSelection, } from "@tiptap/pm/sta
 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;
+// Notion-style side drop: drag a block to a neighbour's LEFT/RIGHT region and it
+// builds (or joins) a column layout instead of reordering. The activation region
+// has to be GENEROUS or the gesture is dead for a real human — a natural drag
+// releases somewhere over the block's body, nowhere near a thin edge sliver. The
+// old values (28% of width, capped at 140px, AND only the vertical middle 60%)
+// left a wide ~820px plan block with two ~17%-of-width edge slivers in a 35px-tall
+// band as the ONLY column targets — ~66% of the block (the whole centre) plus the
+// top/bottom only ever reordered, so "drag side by side" essentially never made
+// columns. Now each side claims ~a third of the width across the FULL block
+// height, with a middle band always preserved for before/after reorder.
+const SIDE_DROP_ZONE_RATIO = 0.33;
+const SIDE_DROP_ZONE_MIN_PX = 56;
+const SIDE_DROP_ZONE_MAX_PX = 320;
+// Never let the two side zones swallow the whole block: keep at least the middle
+// ~10% of the width as the before/after reorder band so dropping over the centre
+// still moves the block above/below the target (Notion keeps reorder reachable).
+const SIDE_DROP_ZONE_MAX_WIDTH_FRACTION = 0.45;
 const DRAG_HANDLE_MENU_STYLE_ID = "an-rich-md-drag-menu-styles";
 const DRAG_HANDLE_MENU_WIDTH = 220;
 const DRAG_HANDLE_MENU_GAP = 6;
 const DRAG_HANDLE_MENU_VIEWPORT_PADDING = 8;
+/**
+ * Wraps Tabler outline icon path data in the standard 24×24 stroke SVG so the
+ * DOM-based block menu renders the same icons the React UI uses (Tabler is the
+ * framework-wide icon set). The editor is plain DOM, not React, so we inline the
+ * markup instead of importing `@tabler/icons-react` components.
+ */
+const tablerIconSvg = (paths) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${paths}</svg>`;
+// Tabler `copy`, `trash`, and `plus` (outline). Path data copied verbatim from
+// @tabler/icons so the glyphs stay pixel-identical to the React icon set.
+const DRAG_HANDLE_MENU_ICON_DUPLICATE = tablerIconSvg('<path d="M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666" /><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />');
+const DRAG_HANDLE_MENU_ICON_DELETE = tablerIconSvg('<path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />');
+const DRAG_HANDLE_MENU_ICON_INSERT = tablerIconSvg('<path d="M12 5l0 14" /><path d="M5 12l14 0" />');
+// Tabler `grip-vertical` (outline) for the left-margin drag grip.
+const DRAG_HANDLE_GRIP_ICON = tablerIconSvg('<path d="M8 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M8 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M8 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M14 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M14 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M14 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />');
 const dragHandleRegistrations = new Set();
 let dragHandleGlobalHoverListeners = 0;
 let activeDragRegistration = null;
+// The registration whose grip is currently shown. Used to keep that grip alive
+// while the cursor travels from a block's body to its grip, even when the grip
+// sits in a contested gap (an inter-column gap or a tab body's left offset)
+// where another editor's wide forgiving zone would otherwise re-win the hover
+// and hide the grip out from under the approaching cursor.
+let activeHoverRegistration = null;
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 const editorArea = (registration) => {
     const rect = registration.view.dom.getBoundingClientRect();
@@ -32,6 +66,7 @@ const updateRegisteredHover = (clientX, clientY) => {
         for (const registration of dragHandleRegistrations) {
             registration.hideHover?.();
         }
+        activeHoverRegistration = null;
         return;
     }
     const candidates = [];
@@ -48,6 +83,34 @@ const updateRegisteredHover = (clientX, clientY) => {
             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
@@ -101,6 +164,7 @@ const updateRegisteredHover = (clientX, clientY) => {
             registration.hideHover?.();
     }
     active?.registration.showHoverBlock?.(active.block);
+    activeHoverRegistration = active?.registration ?? null;
 };
 const handleGlobalHoverMove = (event) => {
     updateRegisteredHover(event.clientX, event.clientY);
@@ -173,8 +237,10 @@ const ensureDragHandleMenuStyles = () => {
 }
 
 .an-rich-md-drag-menu__icon {
-  position: relative;
+  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%));
@@ -184,69 +250,9 @@ const ensureDragHandleMenuStyles = () => {
   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__icon svg {
+  width: 17px;
+  height: 17px;
 }
 
 .an-rich-md-drag-menu__label {
@@ -537,7 +543,7 @@ export const DragHandle = Extension.create({
                 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 createMenuItem = (label, iconSvg, action, options = {}) => {
             const button = document.createElement("button");
             button.type = "button";
             button.className = "an-rich-md-drag-menu__item";
@@ -546,8 +552,9 @@ export const DragHandle = Extension.create({
             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.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;
@@ -578,7 +585,9 @@ export const DragHandle = Extension.create({
             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));
+            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,
@@ -613,18 +622,17 @@ export const DragHandle = Extension.create({
                 return null;
             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);
+            // 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 &&
-                withinSideDropBand &&
                 clientX <= block.rect.left + sideZoneWidth) {
                 placement = "left";
             }
             else if (registration.handleDrop &&
                 withinBlockY &&
-                withinSideDropBand &&
                 clientX >= block.rect.right - sideZoneWidth) {
                 placement = "right";
             }
@@ -706,11 +714,21 @@ export const DragHandle = Extension.create({
             const wrapperRect = wrapper.getBoundingClientRect();
             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`;
+            // 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 = "3px";
+                session.dropLine.style.width = `${SIDE_BAR_WIDTH}px`;
                 session.dropLine.style.height = `${target.rect.height}px`;
                 return;
             }
@@ -737,11 +755,15 @@ export const DragHandle = Extension.create({
             // 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.
-            el.innerHTML = `<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" style="pointer-events:none">
-        <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"/>
-        <circle cx="5.5" cy="13" r="1.5"/><circle cx="10.5" cy="13" r="1.5"/>
-      </svg>`;
+            // 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 = () => {
@@ -939,6 +961,9 @@ export const DragHandle = Extension.create({
                         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);
@@ -1010,6 +1035,9 @@ export const DragHandle = Extension.create({
                             if (activeDragRegistration === registration) {
                                 activeDragRegistration = null;
                             }
+                            if (activeHoverRegistration === registration) {
+                                activeHoverRegistration = null;
+                            }
                             handle?.remove();
                             handle = null;
                             currentRegistration = null;