@helping-ai-workflow/md2doc 2.12.0 → 3.0.1

package/lib/md2doc.js

@@ -1080,18 +1080,35 @@ ${itemsHtml}
   // `.content { min-width: 0; flex: 1 1 auto; }` block, which
   // test/md2doc.test.js matches verbatim).
   //
-  // Why it exists: the gutter buttons hang OUTSIDE the content box, and the
-  // table row grip straddles the table's left border (half of it outside
-  // too — see the .ed-te-grip-row comment above). Without real padding the
-  // two fight over the same few pixels, which is what forced the earlier
-  // (now reverted) "inset the row grip into the table" hack that ended up
-  // covering the first cell's text. 56px of content padding plus moving the
-  // gutter buttons out (⠿ to left:-36px, ＋ to left:-54px) separates them
-  // properly: the gutter pair occupies [contentLeft-40, contentLeft-4]
-  // (v2.11.1; it was [contentLeft-54, contentLeft-18] until spec §4.2's own
-  // numbers were restored) and the 20px-wide row grip straddles contentLeft at
-  // [contentLeft-10, contentLeft+10] — an 8px gap, and the grip's inner half
-  // stays within the cell's own 14px padding, so it never touches cell text.
+  // Why it exists: the gutter buttons hang OUTSIDE the content box. 56px of
+  // content padding plus moving the gutter buttons out puts the pair at
+  // [contentLeft-40, contentLeft-4] (v2.11.1; it was
+  // [contentLeft-54, contentLeft-18] until spec §4.2's own numbers were
+  // restored), clear of .sidebar-splitter — see the .content rule below.
+  //
+  // GEOMETRY, AS MEASURED (v2.12.0/S4 T1; the previous version of this
+  // comment claimed "an 8px gap" between the gutter and the table row grip, a
+  // number left over from the v2.11.0 pair position that v2.11.1
+  // invalidated — the real gap was MINUS 6px, i.e. an overlap):
+  //   ⠿          [contentLeft-22, contentLeft-4]   (--ed-gutter-btn wide)
+  //   row grip   [contentLeft-10,  contentLeft+10]  (--ed-te-grip-row-w wide,
+  //              centred on the table's left border)
+  // The grip straddling the table's left border overlapped the ⠿'s right 6px
+  // and — being position: fixed, z-index 7, on document.body — won the hit
+  // test there. v2.12.0/S4 T1's fix moved the grip entirely inside the table
+  // instead (its left edge on the border), which fixed the overlap but
+  // broke the row/column symmetry the user expected (the column grip still
+  // straddles the table's TOP border) — reported as a v3.0.1 regression.
+  // v3.0.1 fixes it at the source instead: the ⠿/＋ pair itself moves
+  // further LEFT by --ed-gutter-shift below, which removes the overlap
+  // without moving the grip at all, so the grip can straddle the border
+  // again (see updateTableEdgeGrips() in lib/editor/client.js). The
+  // clearance that remains is exactly --ed-gutter-gap, because the ⠿'s right
+  // edge and the grip's left edge are both derived from it. The grip's
+  // straddling half (10px) sits well inside the first cell's default 14px
+  // left padding, so no extra edit-mode padding is needed any more — the
+  // v2.10.1-era --ed-te-cell-pad-left token this comment used to describe is
+  // gone.
   // (The padding was 48px until §4.2's hit-test conflict 1 was fixed; see the
   // .content rule in editModeLayoutCss below for why it is 56px now.)
   // S1 Task 5: the ordered-list ordinal is drawn by a CSS counter, and the
@@ -1147,11 +1164,14 @@ ${itemsHtml}
      further in, to spec §4.2's own [contentLeft-40, contentLeft-4] — the
      clearance is 16px at this padding rather than 2px. The padding stays at
      56px: nothing asks for the text column to move, and this measurement is
-     the one the §4.2 conflict-1 guard is written against.) The 20px table row grip
-     still straddles contentLeft at [contentLeft-10, contentLeft+10], so its
-     8px gap to ⠿ is unchanged. Guarded by the elementFromPoint(splitter.right
-     - 2, y) assertion §4.2 asks for, in
-     test/editor-client-runtime.test.js. */
+     the one the §4.2 conflict-1 guard is written against.) v3.0.1 shifts the
+     pair a further --ed-gutter-shift (10px) left, to [contentLeft-50,
+     contentLeft-14], so the table row grip can straddle the table's own left
+     border again instead of sitting inside it — see the --ed-gutter-shift
+     comment above .ed-handle below. That still leaves 6px of clearance from
+     splitterRight (contentLeft-56), so the conflict-1 guard still holds.
+     Guarded by the elementFromPoint(splitter.right - 2, y) assertion §4.2
+     asks for, in test/editor-client-runtime.test.js. */
   .content { padding-left: 56px; }
 
   /* S1: every block is one full-width row, whatever its type or depth. The
@@ -1221,24 +1241,41 @@ ${itemsHtml}
      [contentLeft-54, contentLeft-18], which with 56px of padding sits wholly
      inside the content column (2px clear of .sidebar-splitter's right edge —
      see the padding rule's own comment for the measurement), so ＋ never
-     reaches a negative viewport x and never covers the splitter. The 20px
-     table row grip still straddles contentLeft at
-     [contentLeft-10, contentLeft+10] - an 8px gap, unchanged. */
+     reaches a negative viewport x and never covers the splitter. As of
+     v3.0.1 the table row grip straddles the table's left border again
+     (centred on it, [tableLeft-10, tableLeft+10] — see updateTableEdgeGrips()
+     in lib/editor/client.js), and the pair itself has moved left by
+     --ed-gutter-shift below so the clearance from the ⠿'s right edge is
+     still exactly --ed-gutter-gap and cannot drift: both edges are derived
+     from it. */
   /* Stated ONCE, as tokens, because §4.2's three numbers are not independent:
      the gutter is exactly two buttons wide plus the deliberate right-hand
-     breathing gap, and the hover zone below is exactly the gutter. Writing any
-     of them as a second literal is how the corridor comes back. */
+     breathing gap, and the hover zone below is exactly the gutter plus
+     whatever --ed-gutter-shift moved the pair by. Writing any of them as a
+     second literal is how the corridor comes back. */
   :root {
     --ed-gutter-btn: 18px;
     --ed-gutter-gap: 4px;
     --ed-gutter-w: calc(var(--ed-gutter-btn) * 2 + var(--ed-gutter-gap));
   }
+  /* v3.0.1: the pair moves LEFT by --ed-gutter-shift so the table row grip
+     can straddle the table's left border again (see updateTableEdgeGrips()
+     in lib/editor/client.js) while still keeping --ed-gutter-gap between the
+     ⠿'s right edge and the grip's left edge. Written as a token because the
+     two rules below and the acceptance test all derive from it. Measured at
+     1400x900 (README.md, first table): pre-shift ⠿=[390,408] ＋=[372,390]
+     tableLeft=412; a 10px shift lands ⠿=[380,398] ＋=[362,380], grip
+     (straddling, 20px wide, centred on tableLeft) = [402,422], leaving
+     exactly --ed-gutter-gap (4px) between the ⠿'s right edge (398) and the
+     grip's left edge (402), and ＋'s left edge (362) stays well clear of 0. */
+  :root { --ed-gutter-shift: 10px; }
   .ed-handle {
-    left: calc(-1 * (var(--ed-gutter-btn) + var(--ed-gutter-gap))); top: 0;
+    left: calc(-1 * (var(--ed-gutter-btn) + var(--ed-gutter-gap) + var(--ed-gutter-shift)));
+    top: 0;
     width: var(--ed-gutter-btn);
   }
   .ed-insert {
-    left: calc(-1 * var(--ed-gutter-w)); top: 0;
+    left: calc(-1 * (var(--ed-gutter-w) + var(--ed-gutter-shift))); top: 0;
     width: var(--ed-gutter-btn);
   }
   /* v2.11.1: the gutter's HOVER ZONE, and it is the reason the pair could move
@@ -1267,9 +1304,17 @@ ${itemsHtml}
 
      One absolutely-positioned pseudo-element spanning the whole gutter for the
      block's whole height makes :hover continuously true from the text out
-     past the ＋, at every Y. Its width is the --ed-gutter-w token the pair's
-     own offsets are built from, so the two cannot drift apart — if they do,
-     the corridor comes straight back.
+     past the ＋, at every Y. Its span is derived from the SAME two tokens the
+     pair's own offsets are: --ed-gutter-w (the pair's own width, the gutter
+     proper) plus --ed-gutter-shift (how far v3.0.1 moved the pair left to
+     clear the straddling table row grip). Both edges therefore track the
+     pair automatically — the zone's left edge is exactly the ＋'s left edge
+     and its right edge is the block's, with no literal repeated anywhere —
+     so the two cannot drift apart. If they ever do, the corridor comes
+     straight back: v3.0.1 shifted the pair to [blockLeft-50, blockLeft-14]
+     while this rule still read the un-shifted --ed-gutter-w alone, leaving
+     it spanning [blockLeft-40, blockLeft] — 10px short on the left of the
+     very buttons it exists to keep reachable.
      .ed-block is already position:relative, and position: absolute keeps
      this out of the li row's flex flow. It is deliberately NOT
      pointer-events: none: that would stop it being hit-tested, which is the
@@ -1281,8 +1326,8 @@ ${itemsHtml}
      literal.) */
   .ed-block::before {
     content: ""; position: absolute;
-    left: calc(-1 * var(--ed-gutter-w)); top: 0;
-    width: var(--ed-gutter-w); height: 100%;
+    left: calc(-1 * (var(--ed-gutter-w) + var(--ed-gutter-shift))); top: 0;
+    width: calc(var(--ed-gutter-w) + var(--ed-gutter-shift)); height: 100%;
   }`;
 
   const html = `<!DOCTYPE html>
@@ -2162,7 +2207,11 @@ ${itemsHtml}
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   }
   .ed-handle-menu-btn {
-    min-width: 132px; height: 26px; padding: 0 10px;
+    /* v3.0.1: the icon sits FLUSH LEFT and the label sits one space-width
+       after it (user request: 「符號靠左對齊，文字跟符號間距一個空格」).
+       The right padding is untouched — it is what keeps the 轉換成 row's
+       chevron off the panel edge. */
+    min-width: 132px; height: 26px; padding: 0 10px 0 6px;
     border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px;
     background: rgba(255, 255, 255, 0.08); color: inherit;
     font: inherit; font-size: 12px; line-height: 1;
@@ -2173,8 +2222,10 @@ ${itemsHtml}
        width, so S2's one-left-edge / monotonic-top invariants are untouched.
        The submenu's own buttons carry this class and no icon; a lone text node
        is an anonymous flex item at flex-start, i.e. exactly where text-align
-       put it. */
-    display: flex; align-items: center; gap: 8px;
+       put it.
+       v3.0.1: gap dropped from 8px to 4px — one space-width at this 12px
+       font size — now that every row (both menu levels) carries an icon. */
+    display: flex; align-items: center; gap: 4px;
   }
   /* Notion's own sizing. The stroke colour is NOT set here on purpose: the
      markup carries stroke="currentColor" (lib/editor/client.js), so the icon
@@ -2182,8 +2233,20 @@ ${itemsHtml}
      retheme for free. A hex here would break that silently. (No backticks in
      this comment: it lives inside a JS template literal.)
      flex: 0 0 auto because a 16px-wide flex item next to a nowrap label
-     would otherwise be the thing that shrinks. */
-  .ed-menu-icon { flex: 0 0 auto; width: 16px; height: 16px; }
+     would otherwise be the thing that shrinks.
+     v3.0.1: the selector is ".ed-handle-menu-btn .ed-menu-icon", not the
+     bare class — the gutter menu is appended INTO a ".ed-block"
+     (lib/editor/client.js's blockEl.appendChild(gutterMenu)), which is a
+     descendant of <main class="content">, and ".content svg" above
+     carries "margin: 0 auto" at specificity (0,1,1) (one class, one
+     type). The bare ".ed-menu-icon" is only (0,1,0) and LOSES that fight
+     regardless of source order, so every icon picked up centering
+     auto-margins instead of sitting flush left — measured on this branch
+     as an icon offset that swung with label length (11px-40px) instead
+     of a constant one. Scoping under ".ed-handle-menu-btn" raises this
+     to (0,2,0), which wins on class count alone. (No backticks in this
+     comment: it lives inside a JS template literal.) */
+  .ed-handle-menu-btn .ed-menu-icon { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; }
   /* The 轉換成 submenu carries BOTH classes, so it inherits every rule above
      and only overrides the horizontal offset. It is a CHILD of the menu, and
      the menu is itself position:absolute, so the menu's own padding box is
@@ -2296,17 +2359,54 @@ ${itemsHtml}
   }
   .ed-te-drop-indicator[hidden] { display: none; }
   .ed-te-row-dragging { opacity: 0.4; }
+  /* S4 Task 2 (spec §4.5): the block drag's own singleton drop indicator,
+     shown while a block is being dragged by its ⠿. Same 3px blue rule as the
+     table's, on a SEPARATE node rather than sharing '.ed-te-drop-indicator':
+     that one is shared by the row and column axes and each of them has to
+     rewrite the OTHER axis's dimension on every move or a stale value leaks
+     in — a third writer multiplies that coupling. It is still ONE node for the
+     whole document (the Global Constraint is "never one per boundary"), and
+     the separate class is what lets a test assert that a block drag raised
+     the BLOCK line rather than table chrome that happened to be on screen. */
+  .ed-block-drop-indicator {
+    position: fixed; z-index: 8; height: 3px; border-radius: 2px;
+    background: #3b82f6; pointer-events: none;
+  }
+  .ed-block-drop-indicator[hidden] { display: none; }
+  /* S4 Task 2b (user request, 2026-09-01): the drag's feedback on the SOURCE
+     side. lib/editor/client.js puts '.ed-block-dragging' on <html> the moment
+     a ⠿ drag engages and takes it off in teardownBlockDrag(), which every one
+     of the five abort paths funnels through. On <html> rather than on the
+     dragged block because the plan forbids mutating anything inside
+     '.content' during a drag — that invariant is the only reason Escape /
+     pointercancel / window blur can all clean up with nothing to revert.
+     The universal selector plus !important is what the rule needs to be worth
+     having: '.ed-handle' (the button the gesture starts on), '.ed-handle-menu-btn'
+     and every table grip carry their own 'cursor: pointer', and a plain
+     inherited cursor loses to all of them. */
+  html.ed-block-dragging, html.ed-block-dragging * { cursor: grabbing !important; }
   /* Notion-style grip handles: replace the original invisible TE_EDGE_PX=8
      proximity zone (user-acceptance feedback: unusably small, no visible
      affordance) with two real, adequately-sized (>=18x24px) click/drag
      targets. '.ed-te-grip-row' is a vertical 6-dot handle shown at the LEFT
      EDGE of the hovered row -- every row, the HEADER included (spec 3.10:
-     the header is draggable too), STRADDLING the table's left border (its
-     centreline ON that border), which is the same rule '.ed-te-grip-col'
-     uses on the table's TOP border -- one geometry for both axes, no
-     per-row-type special case. The block's own gutter is kept clear of it by
-     the edit-mode-only layout chunk emitted near the end of this stylesheet,
-     not by insetting the grip; '.ed-te-grip-col' is a horizontal 6-dot
+     the header is draggable too), STRADDLING the table's left border,
+     centred on it (spec 4.2 hit-test conflict 2). v2.12.0/S4 T1 tried moving
+     it entirely inside the table instead (left edge on the border) to stop it
+     winning the hit test against the block's own ⠿ — MEASURED at 1400x900,
+     the straddling grip occupied [tableLeft-10, tableLeft+10] while
+     '.ed-handle' occupied [blockLeft-22, blockLeft-4] with tableLeft ==
+     blockLeft, so the grip (position: fixed, z-index 7, on document.body)
+     won the hit test for the RIGHT 6px of every ⠿ whose Y band it reached —
+     but that broke the row/column symmetry the user expected ('.ed-te-grip-col'
+     still straddles the table's TOP border, because nothing of the page's
+     own chrome lives up there), and was reported as a regression. v3.0.1
+     restores the straddle and instead moves the ⠿/＋ pair itself further left
+     by --ed-gutter-shift, which removes the overlap at its source (see the
+     edit-mode-only layout chunk near the end of this stylesheet); the row
+     grip's straddling half sits well inside the first cell's default 14px
+     padding, so no extra padding token is needed either.
+     '.ed-te-grip-col' is a horizontal 6-dot
      handle shown just ABOVE the hovered column (every column). Dots are plain <span>s laid out via CSS grid with
      place-content: center, so the dot cluster stays compact/centered
      regardless of the button's own (larger, hit-target-sized) box — no
@@ -2325,8 +2425,15 @@ ${itemsHtml}
   .ed-te-grip:hover { background: rgba(0, 0, 0, 0.06); }
   .ed-te-grip-dot { width: 3px; height: 3px; border-radius: 50%; background: #9ca3af; }
   .ed-te-grip:hover .ed-te-grip-dot { background: #6b7280; }
+  /* spec §4.2 hit-test conflict 2: the row grip's width is a TOKEN because
+     lib/editor/client.js's updateTableEdgeGrips() reads it (via
+     gripRowWidthPx()) to CENTRE the grip on the table's left border —
+     tableRect.left - gw / 2. Written once here, read once there, so the CSS
+     width and the JS position can never drift apart the way they did when
+     the position was a hard-coded literal 20. */
+  :root { --ed-te-grip-row-w: 20px; }
   .ed-te-grip-row {
-    width: 20px; height: 28px; cursor: grab; z-index: 7;
+    width: var(--ed-te-grip-row-w); height: 28px; cursor: grab; z-index: 7;
     grid-template-columns: repeat(2, 3px); grid-template-rows: repeat(3, 3px);
     gap: 3px 4px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "2.12.0",
+  "version": "3.0.1",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, and Graphviz support",
   "keywords": [
     "markdown",
@@ -36,7 +36,7 @@
   },
   "scripts": {
     "preinstall": "node scripts/preinstall.js",
-    "test": "node test/md2doc.test.js && node test/blockmap.test.js && node test/images.test.js && node test/scroll-anchor.test.js && node test/lightbox.test.js && node test/lightbox-anno.test.js && node test/lightbox-anno-style.test.js && node test/reader-panels.test.js && node test/cli.test.js && node test/code-operator.test.js && node test/convert-md.test.js && node test/render-api.test.js && node test/lineops.test.js && node test/indent-clamp.test.js && node test/selection.test.js && node test/editmode-render.test.js && node test/editmode-wavedrom-reinit.test.js && node test/editor-server.test.js && node test/cli-edit.test.js && node test/open-viewer.test.js && node test/editor-client.test.js && node test/editor-client-runtime.test.js && node test/roundtrip.test.js && node test/byte-stability.test.js && node test/editor-server-throw.test.js && node test/editor-reader-rebind.test.js && node test/inline-md.test.js && node test/table-md.test.js && node test/gate-compat.test.js && node test/history.test.js && node test/list-md.test.js"
+    "test": "node test/md2doc.test.js && node test/blockmap.test.js && node test/images.test.js && node test/scroll-anchor.test.js && node test/lightbox.test.js && node test/lightbox-anno.test.js && node test/lightbox-anno-style.test.js && node test/reader-panels.test.js && node test/cli.test.js && node test/code-operator.test.js && node test/convert-md.test.js && node test/render-api.test.js && node test/lineops.test.js && node test/indent-clamp.test.js && node test/selection.test.js && node test/editmode-render.test.js && node test/editmode-wavedrom-reinit.test.js && node test/editor-server.test.js && node test/cli-edit.test.js && node test/open-viewer.test.js && node test/editor-client.test.js && node test/editor-client-runtime.test.js && node test/roundtrip.test.js && node test/byte-stability.test.js && node test/editor-server-throw.test.js && node test/editor-reader-rebind.test.js && node test/inline-md.test.js && node test/table-md.test.js && node test/gate-compat.test.js && node test/history.test.js && node test/list-md.test.js && node test/table-width.test.js"
   },
   "repository": {
     "type": "git",