npm - @helping-ai-workflow/md2doc - Versions diffs - 2.10.0 → 2.10.1 - Mend

@helping-ai-workflow/md2doc 2.10.0 → 2.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/lib/editor/client.js CHANGED Viewed

@@ -152,6 +152,9 @@
   const listMd = window.md2docListMd;
   const historyLib = window.md2docHistory;
   let lines = ED.lines, blocks = ED.blocks, mtimeMs = ED.mtimeMs;
+  // 檔案原本的換行符。lines 內部永遠是不含 \r 的純內容行；只有 save()
+  // 會把它接回這個 EOL，render 一律用 \n（spec §3.11）。
+  const EOL = ED.eol || '\n';
   const stack = new ops.UndoStack();
   const baseTitle = document.title;
   const contentEl = document.querySelector('.content');
@@ -210,10 +213,10 @@
   let pristineInsert = null; // { blockId } | null
   // Task 5 fix (found via a standalone repro harness — see the task-5
-  // report): a table burst's tableEl.innerHTML REASSIGNMENT (revert /
-  // undo / redo — the only mutations that replace the WHOLE table, unlike
-  // insertRow()/insertColumn() which patch it in place) removes whichever
-  // cell currently has focus. Chromium runs the focus-fixup "unfocus"
+  // report): a table mutation that DETACHES the focused cell — whether by
+  // reassigning tableEl.innerHTML wholesale or by re-parenting the cell/row
+  // nodes — removes whichever cell currently has focus. Chromium runs the
+  // focus-fixup "unfocus"
   // step (firing a synchronous blur/focusout) BEFORE the node is actually
   // detached — NOT after, as a naive reading of "removed nodes lose focus"
   // would suggest — so at the moment that focusout's handler runs,
@@ -226,9 +229,29 @@
   // called switchAwayFrom() — silently RE-COMMITTING the very state the
   // revert/undo/redo was in the middle of discarding, then wiping focus to
   // <body> once the resulting rerenderAll() swapped .content. Set true for
-  // the exact synchronous span of each such innerHTML reassignment (see
-  // tableBurstUndo()/tableBurstRedo()/revertTableBurstAndEnd() below); the
-  // focusout listener checks it FIRST and no-ops the whole branch while set.
+  // the exact synchronous span of each such mutation; the focusout listener
+  // checks it FIRST and no-ops the whole branch while set.
+  //
+  // There are exactly FOUR set-to-true sites, and test/editor-client.test.js
+  // asserts that count (plus that every one of them is wrapped in a
+  // try/finally that clears the flag even on a throw — a latched-true flag
+  // silently disables blur-commits for EVERY block type until reload):
+  //   1. tableBurstUndo()  — `tableEl.innerHTML = state`
+  //   2. tableBurstRedo()  — `tableEl.innerHTML = state`
+  //   3. performRowDrop()  — rebuildTableSections(): a row drop is a PURE
+  //      MOVE across thead/tbody (any row dragged to the top becomes the
+  //      header), so the rebuild detaches the focused cell.
+  //   4. performColDrop()  — the per-row cell-reorder loop, which appendChild()s
+  //      every row's cells back in the new order, detaching the focused one.
+  // revertTableBurstAndEnd() is deliberately NOT on this list, and NOT
+  // because anything else guards it: it needs no flag at all because it
+  // nulls `currentBurst` and disposes the burst history BEFORE it touches
+  // innerHTML — so by the time that rewrite fires Chromium's synchronous
+  // blur/focusout, the focusout handler's table branch finds no burst left
+  // to resolve and no-ops on its own. See its own comment for the full
+  // story. If a fifth site is ever added,
+  // update the count in editor-client.test.js deliberately and audit the new
+  // site for the same try/finally.
   let suppressTableFocusout = false;
   // Task 8: the SAME Chromium behaviour, one substrate over — see
@@ -1469,6 +1492,47 @@
   // from the delegated `focusin` listener below. captureFn snapshots the
   // surface's innerHTML; history.start() records snapshot 0 (the pre-edit
   // baseline Esc reverts to).
+  // S2 (Important): the "did the user actually change anything?" baseline —
+  // `editEl.innerHTML` with SELECTION CHROME stripped. Every burst-level
+  // comparison against `burst.original` (resolveBurst()'s zero-edit guard,
+  // burstUndo()/tableBurstUndo()'s pristine-insert probes) and every
+  // burst-history snapshot goes through here, so both sides of every such
+  // comparison are normalised the same way.
+  //
+  // Why it has to exist: showRowMenu()/showColumnMenu() add '.ed-te-hl' to
+  // LIVE cells before any burst exists, and the delete handler then opens
+  // the burst — so a raw `tableEl.innerHTML` baseline BAKES THE HIGHLIGHT
+  // IN. A refused delete ("無法刪除最後一列/欄") leaves that highlight
+  // standing; the next click elsewhere strips it, and the baseline no longer
+  // matches an untouched table. resolveBurst() then re-serialises the whole
+  // thing through table-md.js's canonical form, silently destroying hand
+  // padding and hand-written alignment in a table the user never edited.
+  // Fixing only the refusal path (hideTableEdgeMenu() there) does not help:
+  // stripping the class is itself the diff, whichever code path does it.
+  // The same reasoning covers '.ed-te-row-dragging', which a drag adds and
+  // pointerup/cancelTeDrag() removes.
+  //
+  // Fast path first: the overwhelming majority of calls (every paragraph /
+  // heading / list burst, and any table with no selection on it) carry no
+  // chrome at all, and must not pay for a full subtree clone. When chrome IS
+  // present the clone is mutated instead of the live DOM, so the user's
+  // visible selection survives the measurement. classList.remove() on the
+  // clone re-serialises the class attribute joined by single spaces — byte-
+  // identical to what the renderer emitted — and an attribute left empty is
+  // dropped outright (the renderer never emits `class=""`).
+  function burstBaselineHtml(editEl) {
+    const html = editEl.innerHTML;
+    if (html.indexOf('ed-te-hl') === -1 && html.indexOf('ed-te-row-dragging') === -1) return html;
+    const clone = editEl.cloneNode(true);
+    const marked = clone.querySelectorAll('.ed-te-hl, .ed-te-row-dragging');
+    Array.prototype.forEach.call(marked, (el) => {
+      el.classList.remove('ed-te-hl');
+      el.classList.remove('ed-te-row-dragging');
+      if (!el.className) el.removeAttribute('class');
+    });
+    return clone.innerHTML;
+  }
   function startBurst(editEl) {
     const blockEl = editEl.closest('.ed-block');
     if (!blockEl) return;
@@ -1476,12 +1540,12 @@
     const block = blocks.find((b) => b.id === blockId);
     if (!block) return;
     const blockType = blockEl.getAttribute('data-block-type');
-    const history = historyLib.createBurstHistory(() => editEl.innerHTML, { debounceMs: 400 });
+    const history = historyLib.createBurstHistory(() => burstBaselineHtml(editEl), { debounceMs: 400 });
     history.start();
     currentBurst = {
       blockEl, editEl, blockId, blockType,
       depth: blockDepthOf(blockType, editEl),
-      original: editEl.innerHTML,
+      original: burstBaselineHtml(editEl),
       history,
     };
     selToolbarEditEl = editEl;
@@ -1545,15 +1609,19 @@
     // otherwise-untouched source (hundreds of hand-formatted tables exist
     // in real corpora) silently REWROTE it to the serializer's minimal form
     // and marked the document dirty even though the user typed nothing.
-    // `burst.original` is exactly `burst.editEl.innerHTML` captured at
-    // focus time (startBurst()/startTableBurst() above, for every block
-    // type this burst substrate covers — paragraph/heading/list/table all
-    // store it the same way) — a byte-identical innerHTML means the DOM
-    // genuinely never changed, so drop the burst here exactly like the
+    // `burst.original` is exactly `burstBaselineHtml(burst.editEl)`
+    // captured at focus time (startBurst()/startTableBurst() above, for
+    // every block type this burst substrate covers — paragraph/heading/
+    // list/table all store it the same way): the surface's innerHTML with
+    // table SELECTION CHROME normalised away, so a highlight that was
+    // already standing when the burst opened (S2 — see burstBaselineHtml()
+    // above) can neither be baked into the baseline nor show up as an edit
+    // when a later click strips it. A byte-identical normalised innerHTML
+    // means the DOM genuinely never changed, so drop the burst here like the
     // `commitResult.op === null` no-op path below, without ever reaching
     // the serializer (and therefore without ever risking a canonicalizing
     // rewrite of untouched content).
-    if (burst.editEl.innerHTML === burst.original) {
+    if (burstBaselineHtml(burst.editEl) === burst.original) {
       endBurstWithoutResolve();
       // §10-gap fix (review): untouched AND was pristine — an ordinary
       // "insert ＋, click away without typing" changed-my-mind. Auto-remove
@@ -1934,7 +2002,7 @@
     // to resolve — nothing can change either condition between this check
     // and that resolution running.
     const willAutoRemove = !!(pristineInsert && pristineInsert.blockId === burst.blockId &&
-      burst.editEl.innerHTML === burst.original);
+      burstBaselineHtml(burst.editEl) === burst.original);
     switchAwayFrom().then((ok) => { if (ok && !willAutoRemove) undo(); });
   }
@@ -2646,11 +2714,11 @@
     const blockId = Number(blockEl.getAttribute('data-block-id'));
     const block = blocks.find((b) => b.id === blockId);
     if (!block) return;
-    const history = historyLib.createBurstHistory(() => tableEl.innerHTML, { debounceMs: 400 });
+    const history = historyLib.createBurstHistory(() => burstBaselineHtml(tableEl), { debounceMs: 400 });
     history.start();
     currentBurst = {
       blockEl, editEl: tableEl, blockId, blockType: 'table',
-      depth: null, original: tableEl.innerHTML, history,
+      depth: null, original: burstBaselineHtml(tableEl), history,
       activeCellEl: cellEl,
     };
     selToolbarEditEl = cellEl;
@@ -2787,7 +2855,7 @@
     // auto-remove an untouched pristine table insert, so a chained undo()
     // must be skipped or it cascades one op too far.
     const willAutoRemove = !!(pristineInsert && pristineInsert.blockId === burst.blockId &&
-      tableEl.innerHTML === burst.original);
+      burstBaselineHtml(tableEl) === burst.original);
     switchAwayFrom().then((ok) => { if (ok && !willAutoRemove) undo(); });
   }
@@ -2935,9 +3003,19 @@
     allRowsOf(tableEl).forEach((row) => {
       const isHeader = row === headerRowOf(tableEl);
       const cell = document.createElement(isHeader ? 'th' : 'td');
+      // 新欄是空的，narrow 與空儲存格一致；classifyColumns() 是 render 時
+      // 的啟發式，編輯器無法重跑，下一次 commit 全量重繪時才會重算。
+      cell.className = 'cell-narrow';
       const ref = row.cells[colIndex];
       row.insertBefore(cell, ref ? ref.nextSibling : null);
     });
+    const cg = tableEl.querySelector('colgroup');
+    if (cg) {
+      const col = document.createElement('col');
+      col.className = 'col-narrow';
+      const ref = cg.children[colIndex];
+      cg.insertBefore(col, ref ? ref.nextSibling : null);
+    }
   }
   function deleteColumn(tableEl, colIndex) {
@@ -2945,6 +3023,8 @@
       const cell = row.cells[colIndex];
       if (cell) row.removeChild(cell);
     });
+    const cg = tableEl.querySelector('colgroup');
+    if (cg && cg.children[colIndex]) cg.removeChild(cg.children[colIndex]);
   }
   // Mirrors table-md.js's own cellAlign() (that file can't require this one
@@ -3043,23 +3123,52 @@
   // The old `!document.body.contains(tableEl)` check treated that as
   // "table's gone" and bailed out, silently discarding the insert/delete/
   // align/drop the caller was trying to perform. Capture this table's OWN
-  // block id FIRST and, same stale-node recovery the focusin listener uses
+  // identity FIRST and, same stale-node recovery the focusin listener uses
   // above, re-resolve the LIVE table by it when the original reference no
   // longer resolves — returning that live element (which callers below now
   // use in place of their own now-possibly-stale `tableEl`) instead of a
   // bare boolean, so a caller can never accidentally keep operating on the
   // detached node it started with.
+  //
+  // S1 (Critical): that recovery used to key on `data-block-id`, which is
+  // NOT stable across the very commit it is recovering from. blockmap.js
+  // renumbers ids 0..n-1 in document order on EVERY render (`nextId =
+  // {v:0}`), so a resolved burst that changes the NUMBER of blocks before
+  // this table (e.g. a dirty raw-edit textarea whose source splits one
+  // paragraph into two) shifts every later id down — and the id captured
+  // here then names a DIFFERENT block. `classList.contains('ed-wys-table')`
+  // was the only guard, and every table passes it, so the gesture silently
+  // rewrote an untouched neighbouring table (a row drag even promoted one of
+  // its body rows to its header). Re-resolve by `startLine` instead — see
+  // blockElAtLine()'s own comment: a startLine captured before a commit is
+  // the only stable way back to a specific block afterwards — and then
+  // verify the block we landed on really is the same table (header cell
+  // count, header cell text, row count) before handing it to a caller that
+  // is about to mutate it. A commit that shifts this table's own start line
+  // (an insert/delete ABOVE it) leaves nothing to resolve; returning null
+  // drops the gesture, which is the conservative half of the trade — never
+  // mutating the wrong table beats completing every gesture.
+  function tableIdentityOf(tableEl) {
+    const headerRow = tableEl ? headerRowOf(tableEl) : null;
+    if (!headerRow) return null;
+    return allRowsOf(tableEl).length + '' +
+      Array.prototype.slice.call(headerRow.cells).map((c) => c.textContent).join('');
+  }
   async function ensureTableBurstOpen(tableEl) {
     if (currentBurst && currentBurst.blockType === 'table' && currentBurst.editEl === tableEl) return tableEl;
     const blockEl = tableEl.closest('.ed-block');
-    const blockId = blockEl ? blockEl.getAttribute('data-block-id') : null;
+    const blockId = blockEl ? Number(blockEl.getAttribute('data-block-id')) : null;
+    const block = blockId != null ? blocks.find((b) => b.id === blockId) : null;
+    const startLine = block ? block.startLine : null;
+    const identity = tableIdentityOf(tableEl);
     const ok = await switchAwayFrom();
     if (!ok) return null;
     let liveTableEl = tableEl;
     if (!document.body.contains(tableEl)) {
-      const liveBlockEl = blockId != null ? document.querySelector('.ed-block[data-block-id="' + blockId + '"]') : null;
+      const liveBlockEl = startLine != null ? blockElAtLine(startLine) : null;
       liveTableEl = liveBlockEl ? blockContentEl(liveBlockEl) : null;
-      if (!liveTableEl || !liveTableEl.classList.contains('ed-wys-table')) return null;
+      if (!liveTableEl || !liveTableEl.classList || !liveTableEl.classList.contains('ed-wys-table')) return null;
+      if (identity == null || tableIdentityOf(liveTableEl) !== identity) return null;
     }
     if (currentBurst && currentBurst.blockType === 'table' && currentBurst.editEl === liveTableEl) return liveTableEl;
     const cell = tableCellsOf(liveTableEl)[0];
@@ -3187,15 +3296,22 @@
   // just above the column while hovering it — see the "Notion-style grip
   // handles" section below) selects the column: every th/td in it gets
   // '.ed-te-hl' and a floating menu (delete / align-cycle) appears. Clicking
-  // a row's grip handle (the vertical 6-dot affordance shown just left of
-  // the row while hovering it) selects the row the same way, with a
-  // delete-only menu. User-acceptance feedback on the ORIGINAL design (an
+  // a row's grip handle (the vertical 6-dot affordance shown at the row's
+  // own left edge while hovering it) selects the row the same way, with a
+  // delete-only menu — except on the HEADER row, whose grip click only
+  // highlights (a header can never be deleted, so its menu would be empty;
+  // see the header-grip branch in the pointerup handler below).
+  // User-acceptance feedback on the ORIGINAL design (an
   // invisible TE_EDGE_PX=8 proximity zone hugging the table's raw top/left
   // pixel edge, with no visible affordance at all) was that it was
   // unusably small — pixel-hunting a click target with no visual cue. The
   // grips below are the fix: real, adequately-sized (≥18×24px) elements the
-  // user can actually see and aim for. Both grips are OUTSIDE the table
-  // (never inside a contenteditable cell), so — unlike the old zones, which
+  // user can actually see and aim for. Both grips are overlay elements
+  // `position: fixed`-appended to document.body — never DOM CHILDREN of a
+  // contenteditable cell, even though the row grip now visually overlaps one
+  // (P0-a moved it just INSIDE the table's left border; see the geometry
+  // note in the "Notion-style row/column grip handles" section below). So —
+  // unlike the old zones, which
   // sat INSIDE an already-permanently-contenteditable cell and needed the
   // delegated `pointerdown` listener below to preventDefault() there to
   // stop native caret placement from stealing the click — a grip's own
@@ -3203,19 +3319,28 @@
   // focus put now (same "keep focus put" idiom buildTableInsertBubble()
   // documents for the hover-insert bubbles above).
   //
-  // Row drag starts from the SAME row grip (body rows only — the header
-  // <tr> is never draggable, per the brief, and never gets a grip at all):
-  // after a small movement threshold (distinguishing "click to open the
+  // Row drag starts from the SAME row grip. EVERY row is draggable and every
+  // row gets a grip, the header <tr> included (spec §3.10/§4.6: in markdown a
+  // table's first row IS its header, so position alone decides header
+  // identity — dragging a data row above the header PROMOTES it, and the old
+  // header becomes a data row). The header's grip is offset DOWN by
+  // TE_HEADER_GRIP_DY_PX so it stays clear of the column-grip band.
+  //
+  // After a small movement threshold (distinguishing "click to open the
   // menu" from "press-and-drag"), a drop-indicator line tracks the pointer
-  // between body rows; releasing performs the reorder via a plain
-  // `insertBefore()` on the SAME <tr> node (never a clone/innerHTML-
-  // replace). The DOM's "insert" algorithm reparents a node in one
-  // synchronous step without an observable disconnected state, so — unlike
-  // tableBurstUndo()/tableBurstRedo()'s innerHTML-snapshot restore just
-  // above — moving the dragged row this way never blurs it even if it
-  // happened to contain the active cell, so this needs no
-  // suppressTableFocusout guard. The menu's delete ops (which DO remove
-  // nodes) sidestep the same hazard a different way — see
+  // between rows — including an "above the header" boundary; releasing
+  // performs a PURE MOVE via rebuildTableSections(), which re-lays the same
+  // <tr>/<th>/<td> nodes across thead/tbody so whichever row ended up first
+  // becomes the header row. That rebuild necessarily DETACHES the cell that
+  // currently holds focus, so Chromium fires a synchronous focusout
+  // mid-mutation — exactly the quirk tableBurstUndo()/tableBurstRedo()'s
+  // innerHTML-snapshot restore has to guard. performRowDrop() therefore
+  // wraps it in `suppressTableFocusout` (the third of the flag's four sites)
+  // and puts focus back explicitly via restoreTableFocus(). An earlier
+  // revision moved the <tr> with a plain `insertBefore()`, which reparents
+  // in one synchronous step, never blurs, and needed no guard — the header
+  // promotion requirement is what retired that. The menu's delete ops (which
+  // DO remove nodes) sidestep the same hazard a different way — see
   // refocusAwayFromColumn()/refocusAwayFromRow() below.
   //
   // Both the menu (delete/align) and the drag's DOM move are burst
@@ -3247,7 +3372,18 @@
   let teHighlightEls = [];
   function clearEdgeHighlight() {
-    teHighlightEls.forEach((el) => el.classList.remove('ed-te-hl'));
+    // classList.remove() leaves a dangling `class=""` behind on any element
+    // the renderer/armEditables() emitted with NO class of its own — a
+    // col-default cell in a table that was never armed — and
+    // that residue is a real innerHTML diff that defeats resolveBurst()'s
+    // zero-edit guard, canonically rewriting a table the user only
+    // highlighted. Same fix cancelTeDrag()/the pointerup drag branch already
+    // apply to the dragged row's own class — drop the attribute when it
+    // goes empty, here too.
+    teHighlightEls.forEach((el) => {
+      el.classList.remove('ed-te-hl');
+      if (!el.className) el.removeAttribute('class');
+    });
     teHighlightEls = [];
   }
@@ -3259,10 +3395,22 @@
     });
   }
+  // S3 (Important): the class goes on the row's CELLS, exactly like
+  // highlightColumn() above — never on the `<tr>`. A `<tr>` highlight paints
+  // nothing the user can see: `th { background: #f6f8fa }` and the sticky
+  // first column's `background: #ffffff` are painted by the CELLS, which sit
+  // ABOVE the row box, and `!important` does not let a rule on one element
+  // beat an opaque background painted by a different element on top of it.
+  // The header row (all-`<th>`) rendered as ZERO pixels changed, and the
+  // body-row case lost its first cell to the sticky rule for the same
+  // reason — while the Esc gate below still counted that invisible state as
+  // "a selection is open" and ate the user's next Escape.
   function highlightRow(rowEl) {
     clearEdgeHighlight();
-    rowEl.classList.add('ed-te-hl');
-    teHighlightEls.push(rowEl);
+    Array.prototype.slice.call(rowEl.cells).forEach((cell) => {
+      cell.classList.add('ed-te-hl');
+      teHighlightEls.push(cell);
+    });
   }
   function hideTableEdgeMenu() {
@@ -3460,9 +3608,13 @@
   // Two singleton overlay elements — same "one shared node, repositioned
   // via getBoundingClientRect(), never one per row/column" Global Constraint
   // the hover-insert bubbles above follow. `rowGrip` is a vertical 6-dot
-  // handle shown just LEFT of whichever BODY row (never the header — it
-  // isn't deletable/draggable, so it never gets one) the pointer is
-  // currently hovering any cell of; `colGrip` is a horizontal 6-dot handle
+  // handle shown at the LEFT EDGE of whichever row the pointer is currently
+  // hovering any cell of — EVERY row, the header included (spec §3.10: the
+  // header is draggable too, since position alone decides header identity;
+  // only its CLICK differs, highlighting instead of opening the
+  // delete-only menu). On the header row the grip is additionally offset
+  // DOWN by TE_HEADER_GRIP_DY_PX so it does not collide with the column
+  // grip's own band above the table; `colGrip` is a horizontal 6-dot handle
   // shown just ABOVE whichever column the pointer is hovering (every
   // column, header included — the column menu's delete/align both apply to
   // header cells too). Built once by buildTableGrip() below and driven by
@@ -3470,10 +3622,16 @@
   // listener (wired near the bottom of this file) that already drives
   // updateTableInsertBubbles() — see its own comment for the coalescing
   // contract this reuses.
-  // Review fix (P0-a): both grips sit ON the table border — the grip's
-  // centerline coincides with the table's left/top edge, so its hit rect
-  // straddles the border by ~half its own width/height on each side.
-  // This means the grip's hit rect DOES overlap the insert bubble's hit
+  // Review fix (P0-a): neither grip is separated from the table any more.
+  // The COLUMN grip's centerline coincides with the table's top edge, so its
+  // hit rect straddles that border by ~half its own height on each side. The
+  // ROW grip sits fully INSIDE the table instead — its LEFT edge on the
+  // table's left border, extending inward — because the space just outside
+  // that border belongs to the block's own gutter ⠿ (spec §4.2 衝突 2). The
+  // visible consequence of that choice is that the leftmost ~20px (the row
+  // grip's own CSS width) of the first column is covered by the grip, so a
+  // click there does not place the caret; it is a known, accepted trade.
+  // Either way the grip's hit rect DOES overlap the insert bubble's hit
   // rect (the bubble extends TB_BUBBLE_SIZE/2 = 9px past the edge on its
   // own axis). Non-intersection via rect separation is no longer possible
   // or required. Instead, "insert-bubble click is never eaten by the grip"
@@ -3501,15 +3659,16 @@
     b.hidden = true;
     // Same "keep the burst's focus/selection intact across the click" idiom
     // buildTableInsertBubble() above documents — without this, the grip
-    // (outside the table) stealing focus on mousedown would fire a focusout
-    // on the currently-focused cell BEFORE this gesture's own `pointerdown`
-    // handler below even runs.
+    // (a document.body child, never a descendant of the table it is pinned
+    // to, however far inside the table's own edge it is drawn) stealing
+    // focus on mousedown would fire a focusout on the currently-focused
+    // cell BEFORE this gesture's own `pointerdown` handler below even runs.
     b.addEventListener('mousedown', (e) => e.preventDefault());
     document.body.appendChild(b);
     return b;
   }
   const rowGrip = buildTableGrip('ed-te-grip-row', '列選項 / 拖曳排序');
-  const colGrip = buildTableGrip('ed-te-grip-col', '欄選項');
+  const colGrip = buildTableGrip('ed-te-grip-col', '欄選項 / 拖曳排序');
   // Which table/row/column the two grips are CURRENTLY pinned to — updated
   // by updateTableEdgeGrips() below, read back by hitTestGrip() at
@@ -3526,23 +3685,50 @@
   function hideTableGrips() {
     rowGrip.hidden = true;
     colGrip.hidden = true;
+    // Task 8 fix round 1 (Minor 4): clear BOTH grips' dragging visual — a
+    // row and a column can each wear `ed-te-grip-dragging` mid-drag, and
+    // this is reachable while one is in flight (e.g. a burst resolution
+    // calling hideTableGrips() mid-gesture), so leaving colGrip out was
+    // exactly the row/col asymmetry this task exists to remove.
     rowGrip.classList.remove('ed-te-grip-dragging');
+    colGrip.classList.remove('ed-te-grip-dragging');
     gripRowTableEl = null;
     gripRowEl = null;
     gripColTableEl = null;
     gripColIndex = null;
   }
-  // Bug fix (user acceptance): grips are visible on hover but were
-  // UNREACHABLE by a real pointer. Root cause — a pointer travelling from
-  // inside a cell toward a grip necessarily crosses a ~10px corridor
-  // OUTSIDE the table's border on the way (the grip's own left/top half,
-  // since the grip now straddles the border — P0-a border-centred
-  // geometry). The naive hit test below ("on a cell, or hide") hid the
-  // grip the instant the pointer left the table/cell — BEFORE it ever
-  // reached the grip — so only a teleporting click (every existing test
-  // used pressReleaseAt()/gripCenter(), which jump straight to the grip's
-  // own coordinates) could ever land on it; a real mouse gesture could not.
+  // spec §4.2 衝突 2/3：row grip 一律落在表格**內側**（dx=0，左緣貼齊表格
+  // 左邊界向內延伸），避開頁面 gutter 的 ⠿；表頭列的 grip 額外**往下**
+  // 偏移，避開 colGrip 佔住的 [tableTop−12, tableTop+12] 帶。往左或往上
+  // 都會重新製造衝突，所以只有這一個方向。
+  // updateTableEdgeGrips() 與 pointInRowGripZone() 共用這張表——兩邊各算
+  // 一次就是 grip「看得到但按不到」的經典成因。
+  const TE_HEADER_GRIP_DY_PX = 16;
+  function rowGripOffsetFor(rowEl, tableEl) {
+    return { dx: 0, dy: rowEl === headerRowOf(tableEl) ? TE_HEADER_GRIP_DY_PX : 0 };
+  }
+  // Bug fix (user acceptance) — history: grips were originally BOTH
+  // border-straddling (P0-a), and were visible on hover but UNREACHABLE by a
+  // real pointer. Root cause — a pointer travelling from inside a cell
+  // toward a grip necessarily crossed a ~10px corridor OUTSIDE the table's
+  // border on the way (the grip's own left/top half). The naive hit test
+  // below ("on a cell, or hide") hid the grip the instant the pointer left
+  // the table/cell — BEFORE it ever reached the grip — so only a
+  // teleporting click (every existing test used pressReleaseAt()/
+  // gripCenter(), which jump straight to the grip's own coordinates) could
+  // ever land on it; a real mouse gesture could not.
+  //
+  // Current geometry (spec §4.2 衝突 2, this file's row-grip-inside-table
+  // change above): the ROW grip no longer straddles the border — its left
+  // edge sits ON the table's left border, extending INWARD, fully inside the
+  // table (see rowGripOffsetFor() above). A pointer travelling from a cell to
+  // the row grip's centre therefore never leaves the table, so the
+  // corridor-crossing bug described above no longer applies to the row grip.
+  // The COLUMN grip is UNCHANGED and still straddles the table's top border
+  // (half above the border, half below), so the corridor-crossing bug above
+  // still applies to it exactly as originally described.
   //
   // Review fix (Important, first pass over-permissive): the first version of
   // this fix kept a grip visible while the pointer was ANYWHERE within the
@@ -3553,17 +3739,20 @@
   // reviewer live-reproduced) kept row 1's grip visible at its now-stale
   // position instead of hiding it. Fixed by gating the keep-zone on the
   // SPECIFIC shown grip's own anchor (pointInRowGripZone()/
-  // pointInColGripZone() below) instead of the whole table: the union of
-  // (the grip's own rect, padded by TE_GRIP_ZONE_PAD_PX for sub-pixel
-  // rounding at the very corner) and (the straight corridor between the
-  // grip's left/top edge and the table's left/top border — for the row
-  // grip, x between the grip's own left edge and the table's left edge,
-  // y clamped to the ANCHOR ROW's own vertical extent, padded; the column
-  // grip is symmetric against its anchor column's horizontal extent).
-  // A pointer at the SAME x/y-corridor position but outside the anchor
-  // row/column's own extent is a genuine exit and still hides the grip via
-  // hideTableGrips(), same as before. Neither fix touches either grip's
-  // position/size or z-index, so the click-priority guarantee (bubble
+  // pointInColGripZone() below) instead of the whole table.
+  //
+  // What each keep-zone covers TODAY: pointInRowGripZone() is the union of
+  // (the row grip's own rect, padded by TE_GRIP_ZONE_PAD_PX for sub-pixel
+  // rounding) and (the vertical span between the grip and its anchor row —
+  // needed because a header-row grip, offset DOWN by TE_HEADER_GRIP_DY_PX,
+  // can sit below the row's own bottom edge; see rowGripOffsetFor() above).
+  // pointInColGripZone() keeps the ORIGINAL corridor shape: the straight
+  // strip between the grip's own top edge and the table's top border, x
+  // clamped to the anchor column's own horizontal extent, padded — because
+  // the column grip still straddles the border.
+  // A pointer outside either grip's own zone is a genuine exit and still
+  // hides the grip via hideTableGrips(), same as before. Neither fix touches
+  // either grip's size or z-index, so the click-priority guarantee (bubble
   // z-index:8 > grip z-index:7 — see the comment above buildTableGrip())
   // is unaffected — this only changes how long an already-shown grip STAYS
   // visible, never where it sits. See
@@ -3582,10 +3771,15 @@
       !document.body.contains(gripRowEl) || !document.body.contains(gripRowTableEl)) return false;
     const gr = rowGrip.getBoundingClientRect();
     if (pointInPaddedRect(x, y, gr, TE_GRIP_ZONE_PAD_PX)) return true;
-    const tableRect = gripRowTableEl.getBoundingClientRect();
+    // grip 現在在表格內側，所以「從儲存格走向 grip」全程都在表格上，由
+    // updateTableEdgeGrips() 的 onValidCell 分支處理。這裡只需要涵蓋
+    // grip 自己的矩形、以及它與所錨定那一列之間的垂直落差（表頭 grip 被
+    // 往下偏移，可能超出該列的上下緣）。
     const rowRect = gripRowEl.getBoundingClientRect();
-    return x >= gr.left && x <= tableRect.left &&
-      y >= rowRect.top - TE_GRIP_ZONE_PAD_PX && y <= rowRect.bottom + TE_GRIP_ZONE_PAD_PX;
+    const top = Math.min(rowRect.top, gr.top) - TE_GRIP_ZONE_PAD_PX;
+    const bottom = Math.max(rowRect.bottom, gr.bottom) + TE_GRIP_ZONE_PAD_PX;
+    return x >= gr.left - TE_GRIP_ZONE_PAD_PX && x <= gr.right + TE_GRIP_ZONE_PAD_PX &&
+      y >= top && y <= bottom;
   }
   function pointInColGripZone(x, y) {
@@ -3612,9 +3806,13 @@
   // pointer (Event#target) at those coordinates, same contract
   // updateTableInsertBubbles() above uses.
   function updateTableEdgeGrips(x, y, target) {
-    // Both grips sit OUTSIDE the table (position: fixed, appended to
-    // document.body — same as the hover-insert bubbles), so the moment the
-    // real pointer crosses from a cell onto the grip itself, `target` is no
+    // Both grips are `position: fixed` overlays appended to document.body
+    // (same as the hover-insert bubbles) rather than descendants of the
+    // table — regardless of whether they PAINT outside it (the column grip,
+    // straddling the top border) or inside it (the row grip, whose left edge
+    // sits on the table's left border and which extends inward over the
+    // first column). So the moment the real pointer crosses from a cell onto
+    // the grip itself, `target` is the grip and is no
     // longer inside any '.ed-block[data-block-type="table"]' or 'th, td'.
     // Without this guard, that transition would hit the "nothing found"
     // branches below and hide the very grip the pointer just moved onto —
@@ -3645,9 +3843,15 @@
     const headerRow = headerRowOf(tableEl);
     const colIndex = colIndexOf(cellEl);
-    // Row grip: body rows only — the header row is never deletable/
-    // draggable (same rule the retired edge-zone drag gate applied).
-    if (rowEl && rowEl !== headerRow) {
+    // Row grip: every row, including the header — the first row of a
+    // markdown table IS the header, so any row must be draggable to the
+    // top to become it (rowGripOffsetFor() shifts the header's own grip
+    // down, clear of the column-grip band, so the two never collide). The
+    // one exception is a header-only table (no body rows): its single row
+    // is thead's only row, and dragging it away would empty the thead —
+    // serializeTable() would degrade it and the user's table would vanish
+    // from the page. Withhold the grip there instead.
+    if (rowEl && (rowEl !== headerRow || bodyRowsOf(tableEl).length > 0)) {
       gripRowTableEl = tableEl;
       gripRowEl = rowEl;
       const r = rowEl.getBoundingClientRect();
@@ -3656,9 +3860,9 @@
       // is still true on the FIRST show of a hover session, before the
       // `hidden = false` assignment below takes effect.
       const gh = rowGrip.offsetHeight || 28;
-      const gw = rowGrip.offsetWidth || 20;
-      rowGrip.style.left = (tableRect.left - gw / 2) + 'px';
-      rowGrip.style.top = (r.top + r.height / 2 - gh / 2) + 'px';
+      const off = rowGripOffsetFor(rowEl, tableEl);
+      rowGrip.style.left = (tableRect.left + off.dx) + 'px';
+      rowGrip.style.top = (r.top + r.height / 2 - gh / 2 + off.dy) + 'px';
       rowGrip.hidden = false;
     } else {
       gripRowTableEl = null;
@@ -3693,10 +3897,16 @@
     if (!target || !target.closest) return null;
     if (target.closest('.ed-te-grip-row')) {
       if (!gripRowTableEl || !gripRowEl || !document.body.contains(gripRowEl)) return null;
-      return { kind: 'row', tableEl: gripRowTableEl, rowEl: gripRowEl, isHeader: false };
+      return { kind: 'row', tableEl: gripRowTableEl, rowEl: gripRowEl,
+        isHeader: gripRowEl === headerRowOf(gripRowTableEl) };
     }
     if (target.closest('.ed-te-grip-col')) {
-      if (!gripColTableEl || gripColIndex == null) return null;
+      // The `document.body.contains()` detach check mirrors the row branch
+      // above: the two axes are symmetric gestures now (Task 8 gave the
+      // column its own drag), so a stale `gripColTableEl` left pointing at a
+      // table that a rerenderAll()/burst-resolution already swapped out must
+      // fail the hit-test rather than hand a detached node to performColDrop().
+      if (!gripColTableEl || gripColIndex == null || !document.body.contains(gripColTableEl)) return null;
       return { kind: 'col', tableEl: gripColTableEl, colIndex: gripColIndex };
     }
     return null;
@@ -3710,30 +3920,46 @@
   teDropIndicator.hidden = true;
   document.body.appendChild(teDropIndicator);
-  // Nearest body-row boundary to `clientY` — header excluded (drops always
-  // clamp to the body, per the brief), same "boundary per row" shape
-  // insertRow()'s hover-boundary geometry above uses, just decided by
-  // proximity (a drag always has SOME nearest boundary) rather than a fixed
-  // threshold.
+  // Nearest row-drop target for `clientY` — a discriminated union:
+  // {mode:'above-header', y} | {mode:'before-row', rowIndex, y} |
+  // {mode:'append', y}. `rowIndex` is an ordinal into allRowsOf(). The
+  // header row is now itself a candidate boundary (spec §4.6: the first row
+  // of a markdown table IS its header, so promoting any row to first place
+  // has to go through an explicit "above the header" target) — `<=` on the
+  // header's own midline gives "released exactly on the header's centre" an
+  // unambiguous home in `above-header` rather than leaving it to float
+  // between two branches.
+  //
+  // spec §4.6：`<=` 讓「釋放點恰在表頭正中央」有明確歸屬（above-header）。
+  // 既有那條綠測試釋放在表頭列的 bottom，落在 FALSE 側，仍走下面的
+  // body 中線鏈、仍得 3,1,2，因此不需要改它的期望值。
   function nearestRowDropTarget(tableEl, clientY) {
+    const headerRow = headerRowOf(tableEl);
+    if (headerRow) {
+      const hr = headerRow.getBoundingClientRect();
+      if (clientY <= hr.top + hr.height / 2) return { mode: 'above-header', y: hr.top };
+    }
+    const all = allRowsOf(tableEl);
     const rows = bodyRowsOf(tableEl);
     for (let i = 0; i < rows.length; i++) {
       const r = rows[i].getBoundingClientRect();
-      if (clientY < r.top + r.height / 2) return { beforeRow: rows[i], y: r.top };
+      if (clientY < r.top + r.height / 2) {
+        return { mode: 'before-row', rowIndex: all.indexOf(rows[i]), y: r.top };
+      }
     }
     const last = rows[rows.length - 1];
-    const headerRow = headerRowOf(tableEl);
     const y = last ? last.getBoundingClientRect().bottom
       : (headerRow ? headerRow.getBoundingClientRect().bottom : tableEl.getBoundingClientRect().top);
-    return { beforeRow: null, y };
+    return { mode: 'append', y };
   }
   // The in-flight edge-zone pointer gesture (press-then-either-click-or-
   // drag), or null between gestures. `hit` is whatever hitTestGrip()
   // returned at pointerdown; `dragging` flips true once TE_DRAG_THRESHOLD_PX
   // is crossed (row zones only — see the pointermove listener below);
-  // `dropBeforeRow` is filled in by updateDropIndicator() as the pointer
-  // moves while dragging. `pointerId`/`captureEl` back the pointer-capture
+  // `dropTarget` is filled in by updateDropIndicator() as the pointer
+  // moves while dragging (the nearestRowDropTarget() union — see its own
+  // comment above). `pointerId`/`captureEl` back the pointer-capture
   // review fix below — see cancelTeDrag()'s comment for why this gesture
   // needs it at all.
   let tePointer = null;
@@ -3741,11 +3967,30 @@
   function updateDropIndicator(clientY) {
     const tableEl = tePointer.hit.tableEl;
     const target = nearestRowDropTarget(tableEl, clientY);
-    tePointer.dropBeforeRow = target.beforeRow;
+    tePointer.dropTarget = target;
     const tableRect = tableEl.getBoundingClientRect();
     teDropIndicator.style.left = tableRect.left + 'px';
     teDropIndicator.style.width = tableRect.width + 'px';
     teDropIndicator.style.top = (target.y - 1) + 'px';
+    // The indicator is a shared singleton with the COLUMN drop indicator
+    // (updateColDropIndicator() below), which drives a vertical line and
+    // therefore sets `height` itself — a row drag must write its own back
+    // every time or a prior column drag's height would leak into this one.
+    teDropIndicator.style.height = '3px';
+  }
+  // Column-drop counterpart of updateDropIndicator() above: a vertical line
+  // spanning the table's full height at the nearest column boundary, rather
+  // than a horizontal line spanning its width.
+  function updateColDropIndicator(clientX) {
+    const tableEl = tePointer.hit.tableEl;
+    const target = nearestColDropTarget(tableEl, clientX);
+    tePointer.dropTarget = target;
+    const tableRect = tableEl.getBoundingClientRect();
+    teDropIndicator.style.left = (target.x - 1) + 'px';
+    teDropIndicator.style.width = '3px';
+    teDropIndicator.style.top = tableRect.top + 'px';
+    teDropIndicator.style.height = tableRect.height + 'px';
   }
   // Review fix (Critical): best-effort releasePointerCapture() — a no-op
@@ -3786,42 +4031,188 @@
     if (!tePointer) return;
     releaseTeCapture(tePointer);
     if (tePointer.dragging && tePointer.hit && tePointer.hit.rowEl) {
-      tePointer.hit.rowEl.classList.remove('ed-te-row-dragging');
-    }
-    // The row grip may still be wearing its "active drag handle" visual
-    // (see the pointermove listener below) — strip it unconditionally, same
+      const draggedRowEl = tePointer.hit.rowEl;
+      draggedRowEl.classList.remove('ed-te-row-dragging');
+      // classList.add() CREATED the attribute on a renderer-emitted `<tr>`
+      // (marked's table renderer emits rows with no class at all), and
+      // classList.remove() leaves `class=""` behind rather than dropping
+      // it. That residue is a real innerHTML diff, so resolveBurst()'s
+      // zero-edit guard (`burst.editEl.innerHTML === burst.original`) would
+      // see "edited" for a gesture that changed nothing and canonically
+      // rewrite a hand-padded table. Drop the attribute when it went empty.
+      if (!draggedRowEl.className) draggedRowEl.removeAttribute('class');
+    }
+    // Either grip may still be wearing its "active drag handle" visual (see
+    // the pointermove listener below) — strip both unconditionally, same
     // belt-and-braces reasoning as the `ed-te-row-dragging` removal above.
     rowGrip.classList.remove('ed-te-grip-dragging');
+    colGrip.classList.remove('ed-te-grip-dragging');
     teDropIndicator.hidden = true;
     tePointer = null;
   }
-  async function performRowDrop(tableEl, rowEl, beforeRow) {
-    // Final-review Finding 6: `rowEl`/`beforeRow` are DOM nodes captured at
-    // pointerdown/during the drag — same staleness hazard runDeleteRow()
-    // now guards against (a dirty burst on a DIFFERENT block, resolved
-    // inside ensureTableBurstOpen() below, swaps `.content` and detaches
-    // every node this table's drag was tracking, not just the ones on the
-    // block that committed). Snapshot both as ORDINAL row positions before
-    // that can happen, then re-locate them by position in the live table
-    // afterward, mirroring runDeleteRow()'s own index-based recovery.
+  // 對齊是**欄**屬性（分隔列由表頭 cells 的 style 合成），所以重建前先讀
+  // 出來、重建後套回新的表頭列。只在 align 非 null 時寫，否則會把原本
+  // 沒有 style 的欄寫成 ':---'（spec §4.6 的 attribute-byte 冪等要求）。
+  function columnAlignsOf(tableEl) {
+    const headerRow = headerRowOf(tableEl);
+    if (!headerRow) return [];
+    return Array.prototype.slice.call(headerRow.cells).map(cellStyleAlign);
+  }
+  // TH ↔ TD 改名。tag 已經正確就原樣返回——**不重造**，否則屬性落地順序
+  // 會與 armEditables() 不同，innerHTML 隨之改變，於是「原地放回」也會
+  // 被 zero-edit guard 判定為有編輯而 commit（整表 canonical 重寫）。
+  //
+  // 需要重造時，屬性一律照 cell.attributes 的**原順序**逐一複製，不做任何
+  // 特例、也不對「當初是怎麼 arm 的」做任何假設：重造出來的 cell 屬性序列
+  // 與原本那顆逐字相同，byte-identity 要的就只是這個。
+  //
+  // 之所以不能寫死順序（連「contenteditable 一律擺最後」都不行）：arm 當下
+  // 的順序**逐欄不同**，取決於 classifyColumns()（lib/md2doc.js）給那一欄的
+  // 等級。col-narrow / col-prose 的 cell renderer 會給 class，armEditables()
+  // 再把 contenteditable 接在後面 → `class, style, contenteditable`；但
+  // col-default 的 cell renderer **完全不給 class**，於是
+  // setAttribute('contenteditable') 先落地、classList.add('ed-wys-cell') 才
+  // 把 class 建出來 → `style, contenteditable, class`。任何固定順序都會弄壞
+  // 其中一種，讓「拖下去再拖回來」列序還原、位元卻沒還原，觸發整表
+  // canonical 重寫。逐字複製對三種等級同時成立。
+  function retagCell(cell, tagName) {
+    if (cell.nodeName === tagName) return cell;
+    const next = document.createElement(tagName.toLowerCase());
+    Array.prototype.slice.call(cell.attributes).forEach((attr) => {
+      next.setAttribute(attr.name, attr.value);
+    });
+    while (cell.firstChild) next.appendChild(cell.firstChild);
+    cell.parentElement.replaceChild(next, cell);
+    return next;
+  }
+  // 依 orderedRows 重建 thead/tbody：第一列進 thead（cells 轉 th），其餘
+  // 進 tbody（cells 轉 td）。不變式「thead 恰有一列」由此保證。
+  function rebuildTableSections(tableEl, orderedRows, aligns) {
+    const thead = tableEl.tHead;
+    const tbody = tableEl.tBodies[0];
+    if (!thead || !tbody || orderedRows.length === 0) return;
+    orderedRows.forEach((row, i) => {
+      const wantTag = i === 0 ? 'TH' : 'TD';
+      Array.prototype.slice.call(row.cells).forEach((cell) => retagCell(cell, wantTag));
+      (i === 0 ? thead : tbody).appendChild(row);
+    });
+    const newHeader = orderedRows[0];
+    aligns.forEach((align, i) => {
+      const cell = newHeader.cells[i];
+      if (cell && align) cell.setAttribute('style', 'text-align:' + align);
+    });
+  }
+  // 重建必然 detach 持有焦點的儲存格；focusout 被 suppressTableFocusout
+  // 吃掉之後沒有人會把焦點放回去，document.activeElement 會落到 <body>，
+  // 於是 keydown 走不到 handleTableCellKeydown，Ctrl+Z 會落到全域 undo()
+  // 而先 commit 再退。用序位重新解析目標格並真的 focus。
+  function restoreTableFocus(tableEl, cellIndex) {
+    const cells = tableCellsOf(tableEl);
+    const cell = cells[cellIndex >= 0 ? Math.min(cellIndex, cells.length - 1) : 0];
+    if (!cell) return;
+    if (currentBurst && currentBurst.blockType === 'table') currentBurst.activeCellEl = cell;
+    selToolbarEditEl = cell;
+    cell.focus();
+    placeCaretAtEnd(cell);
+  }
+  async function performRowDrop(tableEl, rowEl, dropTarget) {
+    // rowEl/dropTarget 都是 pointerdown/拖曳期間抓的；ensureTableBurstOpen()
+    // 可能 resolve 掉別的 block 的 dirty burst 並換掉整片 .content，所以
+    // 先轉成 allRowsOf() 的 ordinal，之後在 live table 上重新定位。
     const rowIndex = allRowsOf(tableEl).indexOf(rowEl);
-    const beforeRowIndex = beforeRow ? allRowsOf(tableEl).indexOf(beforeRow) : -1;
     const liveTableEl = await ensureTableBurstOpen(tableEl);
     if (!liveTableEl) return;
     const liveRows = allRowsOf(liveTableEl);
-    const liveRowEl = rowIndex >= 0 ? liveRows[rowIndex] : null;
-    const liveBeforeRow = beforeRowIndex >= 0 ? liveRows[beforeRowIndex] : null;
-    if (!liveRowEl) return;
-    const tbody = liveTableEl.tBodies[0];
-    if (!tbody || liveRowEl.parentElement !== tbody) return;
-    const prevNext = liveRowEl.nextSibling;
-    if (liveBeforeRow && liveBeforeRow.parentElement === tbody) tbody.insertBefore(liveRowEl, liveBeforeRow);
-    else tbody.appendChild(liveRowEl);
-    // Skip the snap when the drop landed exactly where the row already was
-    // (e.g. dropped back onto itself) — no actual reorder happened, so
-    // there's nothing worth adding to the burst's undo history.
-    if (liveRowEl.nextSibling !== prevNext) currentBurst.history.snap('drag-row');
+    if (rowIndex < 0 || !liveRows[rowIndex]) return;
+    let toIndex;
+    if (dropTarget.mode === 'above-header') toIndex = 0;
+    else if (dropTarget.mode === 'append') toIndex = liveRows.length;
+    else toIndex = dropTarget.rowIndex;
+    const order = liveRows.slice();
+    const moved = order.splice(rowIndex, 1)[0];
+    order.splice(toIndex > rowIndex ? toIndex - 1 : toIndex, 0, moved);
+    if (order.every((row, i) => row === liveRows[i])) return; // 原地放回：不動 DOM、不 snap
+    const aligns = columnAlignsOf(liveTableEl);
+    const activeIndex = (currentBurst && currentBurst.activeCellEl)
+      ? tableCellsOf(liveTableEl).indexOf(currentBurst.activeCellEl) : -1;
+    suppressTableFocusout = true;
+    try {
+      rebuildTableSections(liveTableEl, order, aligns);
+    } finally {
+      suppressTableFocusout = false;
+    }
+    armNewTableCells(liveTableEl);
+    restoreTableFocus(liveTableEl, activeIndex);
+    // 插入路徑早就這樣做了，drop 路徑一直沒有：不清的話 grip 還釘在舊
+    // 座標、teMenuColIndex 指向已經換位的欄。
+    hideTableGrips();
+    hideTableEdgeMenu();
+    // 一律 snap（去重交給 history 自己）。舊碼用 nextSibling 比對判斷
+    // 「有沒有動」，對「第一列與唯一 body 列對調」永遠回 false。
+    currentBurst.history.snap('drag-row');
+  }
+  // 欄落點：以表頭各 cell 的中線決定要插到哪個 ordinal 之前。
+  function nearestColDropTarget(tableEl, clientX) {
+    const headerRow = headerRowOf(tableEl);
+    if (!headerRow) return { index: 0, x: tableEl.getBoundingClientRect().left };
+    const cells = Array.prototype.slice.call(headerRow.cells);
+    for (let i = 0; i < cells.length; i++) {
+      const r = cells[i].getBoundingClientRect();
+      if (clientX < r.left + r.width / 2) return { index: i, x: r.left };
+    }
+    const last = cells[cells.length - 1].getBoundingClientRect();
+    return { index: cells.length, x: last.right };
+  }
+  // <colgroup> 決定欄寬，且編輯器至今從沒碰過它；不跟著搬的話欄寬會錯位，
+  // 而 table-md.js 不看 colgroup ⇒ 純 markdown 斷言抓不到這個 bug。
+  function reorderColgroup(tableEl, fromIndex, toIndex) {
+    const cg = tableEl.querySelector('colgroup');
+    if (!cg) return;
+    const cols = Array.prototype.slice.call(cg.children);
+    if (!cols[fromIndex]) return;
+    const moved = cols.splice(fromIndex, 1)[0];
+    cols.splice(toIndex > fromIndex ? toIndex - 1 : toIndex, 0, moved);
+    cols.forEach((c) => cg.appendChild(c));
+  }
+  async function performColDrop(tableEl, fromIndex, toIndex) {
+    const liveTableEl = await ensureTableBurstOpen(tableEl);
+    if (!liveTableEl) return;
+    if (toIndex === fromIndex || toIndex === fromIndex + 1) return; // 原地放回
+    const activeIndex = (currentBurst && currentBurst.activeCellEl)
+      ? tableCellsOf(liveTableEl).indexOf(currentBurst.activeCellEl) : -1;
+    // 短列必須讓整個操作放棄，不能只跳過那一列（final review M4）：原本
+    // `if (!moved) return;` 在 forEach 裡面，短列會被略過、其他列照搬 —— 結果
+    // 是欄位彼此錯位，而每一列的 cell 數量都跟原本一樣，ragged-table guard
+    // 看不出任何異常。寧可整個不動。
+    const dropRows = allRowsOf(liveTableEl);
+    if (!dropRows.length || dropRows.some((row) => !row.cells[fromIndex])) return;
+    suppressTableFocusout = true;
+    try {
+      dropRows.forEach((row) => {
+        const cells = Array.prototype.slice.call(row.cells);
+        const moved = cells.splice(fromIndex, 1)[0];
+        cells.splice(toIndex > fromIndex ? toIndex - 1 : toIndex, 0, moved);
+        cells.forEach((c) => row.appendChild(c));
+      });
+      reorderColgroup(liveTableEl, fromIndex, toIndex);
+    } finally {
+      suppressTableFocusout = false;
+    }
+    restoreTableFocus(liveTableEl, activeIndex);
+    hideTableGrips();
+    hideTableEdgeMenu();
+    currentBurst.history.snap('drag-col');
   }
   document.addEventListener('pointerdown', (e) => {
@@ -3844,7 +4235,11 @@
     // reopening it here.
     const isSameSelection = hit && teMenuKind === hit.kind && teMenuTableEl === hit.tableEl &&
       (hit.kind === 'col' ? teMenuColIndex === hit.colIndex : teMenuRowEl === hit.rowEl);
-    if (teMenuKind && !isSameSelection) hideTableEdgeMenu();
+    // The highlight can now exist WITHOUT a menu (a header grip's plain
+    // click, above) — so the dismiss condition can no longer gate on
+    // teMenuKind alone, or that highlight would survive until
+    // resolveBurst() instead of clearing on the next click.
+    if ((teMenuKind || teHighlightEls.length) && !isSameSelection) hideTableEdgeMenu();
     if (!hit) return;
     e.preventDefault();
     tePointer = { hit, startX: e.clientX, startY: e.clientY, dragging: false,
@@ -3866,25 +4261,33 @@
   document.addEventListener('pointermove', (e) => {
     if (!tePointer) return;
-    if (tePointer.hit.kind !== 'row' || tePointer.hit.isHeader) return; // only draggable body-row zones arm a drag
+    if (tePointer.hit.kind !== 'row' && tePointer.hit.kind !== 'col') return;
     if (!tePointer.dragging) {
       const dx = e.clientX - tePointer.startX, dy = e.clientY - tePointer.startY;
       if (Math.hypot(dx, dy) < TE_DRAG_THRESHOLD_PX) return;
       tePointer.dragging = true;
       hideTableEdgeMenu();
       hideTableInsertBubbles();
-      // The column grip hides like the insert bubbles above (it isn't
-      // meaningful mid row-drag); the ROW grip stays visible and switches to
-      // its "dragging" visual (grabbing cursor) — it IS the drag handle the
-      // user is holding, per the brief ("the active grip may stay as the
-      // drag handle visual").
-      colGrip.hidden = true;
-      rowGrip.classList.add('ed-te-grip-dragging');
-      tePointer.hit.rowEl.classList.add('ed-te-row-dragging');
+      if (tePointer.hit.kind === 'row') {
+        // The column grip hides like the insert bubbles above (it isn't
+        // meaningful mid row-drag); the ROW grip stays visible and switches
+        // to its "dragging" visual (grabbing cursor) — it IS the drag
+        // handle the user is holding, per the brief ("the active grip may
+        // stay as the drag handle visual").
+        colGrip.hidden = true;
+        rowGrip.classList.add('ed-te-grip-dragging');
+        tePointer.hit.rowEl.classList.add('ed-te-row-dragging');
+      } else {
+        // Symmetric for a column drag: the row grip hides, the column grip
+        // itself becomes the drag handle visual.
+        rowGrip.hidden = true;
+        colGrip.classList.add('ed-te-grip-dragging');
+      }
       teDropIndicator.hidden = false;
     }
     e.preventDefault();
-    updateDropIndicator(e.clientY);
+    if (tePointer.hit.kind === 'row') updateDropIndicator(e.clientY);
+    else updateColDropIndicator(e.clientX);
   });
   document.addEventListener('pointerup', async (e) => {
@@ -3893,16 +4296,35 @@
     releaseTeCapture(st);
     tePointer = null;
     if (st.dragging) {
-      st.hit.rowEl.classList.remove('ed-te-row-dragging');
+      if (st.hit.kind === 'row') {
+        st.hit.rowEl.classList.remove('ed-te-row-dragging');
+        // Drop a now-empty `class=""` — see cancelTeDrag()'s own comment
+        // above for why the residue alone defeats the zero-edit guard. (The
+        // grips below need no such treatment: they are OUR elements and
+        // always carry at least 'ed-te-grip-row'/'ed-te-grip-col', so
+        // removing one class can never empty their attribute.)
+        if (!st.hit.rowEl.className) st.hit.rowEl.removeAttribute('class');
+      }
       rowGrip.classList.remove('ed-te-grip-dragging');
+      colGrip.classList.remove('ed-te-grip-dragging');
       teDropIndicator.hidden = true;
-      await performRowDrop(st.hit.tableEl, st.hit.rowEl, st.dropBeforeRow);
+      if (st.hit.kind === 'row') await performRowDrop(st.hit.tableEl, st.hit.rowEl, st.dropTarget);
+      else await performColDrop(st.hit.tableEl, st.hit.colIndex, st.dropTarget.index);
       return;
     }
     // A plain press-release with no drag threshold crossed: open the menu
     // for whatever zone was hit at pointerdown.
     if (st.hit.kind === 'col') showColumnMenu(st.hit.tableEl, st.hit.colIndex);
-    else showRowMenu(st.hit.tableEl, st.hit.rowEl);
+    else if (st.hit.isHeader) {
+      // The row menu's only item is "delete row", and the header row can
+      // never be deleted — showing it would just be an empty box. A plain
+      // click on the header grip highlights the row instead.
+      // clearEdgeHighlight() runs first so re-clicking a different header
+      // (or a different row's menu having been open) doesn't stack
+      // highlights within the same session.
+      clearEdgeHighlight();
+      highlightRow(st.hit.rowEl);
+    } else showRowMenu(st.hit.tableEl, st.hit.rowEl);
   });
   // Review fix (Critical): the browser/OS can ABORT a gesture outright —
@@ -4381,7 +4803,7 @@
     try {
       res = await fetch('/api/save', {
         method: 'POST', headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ fileId: ED.fileId, content: lines.join('\n'), baseMtimeMs: mtimeMs }),
+        body: JSON.stringify({ fileId: ED.fileId, content: lines.join(EOL), baseMtimeMs: mtimeMs }),
       });
     } catch (e) {
       showBanner('Save failed — network error (' + describeFailure(e) +
@@ -4467,7 +4889,17 @@
     // since the cell that was focused (if any) before the menu opened is
     // still focused underneath it (the menu's own mousedown preventDefault()
     // never stole focus).
-    if (teMenuKind && e.key === 'Escape') {
+    // Final review I1: the condition is `(teMenuKind || teHighlightEls.length)`,
+    // NOT `teMenuKind` alone — the exact same widening the pointerdown dismiss
+    // gate already got, and for the same reason: a header grip's click
+    // deliberately produces a highlight with NO menu (its only menu item,
+    // "delete row", cannot apply to a header), so teMenuKind stays null. Gated
+    // on teMenuKind alone, that Esc fell through to handleTableCellKeydown()'s
+    // own Escape branch -> revertTableBurstAndEnd(), throwing away everything
+    // typed into the burst. With a BODY row's menu open the identical keypress
+    // merely closes the menu, so the header row would have been the one place
+    // where dismissing a selection is destructive.
+    if ((teMenuKind || teHighlightEls.length) && e.key === 'Escape') {
       e.preventDefault();
       hideTableEdgeMenu();
       return;
@@ -4702,15 +5134,24 @@
       // without this gate, an active row drag would repaint the ＋ bubble
       // (or reposition/re-show the grips over some OTHER row/column the
       // cursor is currently dragging across) on TOP of the drop indicator on
-      // every real drag. Explicitly HIDE the insert bubbles and the column
+      // every real drag. Explicitly HIDE the insert bubbles and the OTHER
       // grip (not just skip recomputing) so anything already showing from
       // the moment just before the drag threshold was crossed doesn't linger
-      // stale for the rest of the gesture. The ROW grip is deliberately left
-      // untouched here — the pointermove listener above already switched it
-      // to its "dragging" visual (see `ed-te-grip-dragging`) as the drag's
-      // own handle, and this gate must not fight that by hiding it or
-      // repositioning it onto whatever row the cursor happens to be over.
-      if (tePointer && tePointer.dragging) { hideTableInsertBubbles(); colGrip.hidden = true; return; }
+      // stale for the rest of the gesture. Task 8 fix round 1 (Important 1):
+      // a column drag is now possible too, so "the other grip" is no longer
+      // always the column grip — hide `colGrip` during a row drag, `rowGrip`
+      // during a column drag. The ACTIVE grip (whichever kind is being
+      // dragged) is deliberately left untouched here — the pointermove
+      // listener above already switched it to its "dragging" visual (see
+      // `ed-te-grip-dragging`) as the drag's own handle, and this gate must
+      // not fight that by hiding it or repositioning it onto whatever
+      // row/column the cursor happens to be over.
+      if (tePointer && tePointer.dragging) {
+        hideTableInsertBubbles();
+        if (tePointer.hit.kind === 'row') colGrip.hidden = true;
+        else rowGrip.hidden = true;
+        return;
+      }
       updateTableInsertBubbles(tbMoveX, tbMoveY, tbMoveTarget);
       updateTableEdgeGrips(tbMoveX, tbMoveY, tbMoveTarget);
     });

package/lib/editor/server.js CHANGED Viewed

@@ -81,9 +81,23 @@ async function createEditorServer({ files, idleTimeoutMs = 30000, clientJs = '',
         if (!file || !fs.existsSync(file)) return send(res, 404, { error: 'unknown file' });
         const mdText = fs.readFileSync(file, 'utf8');
         const mtimeMs = fs.statSync(file).mtimeMs;
+        // EOL 偵測與拆行：lines 內部一律不含 \r（spec §3.11）。只有
+        // /api/save 會把它接回檔案原本的 EOL；/api/render 一律用 \n。
+        //
+        // 多數決，不是「有 CRLF 就算 CRLF」（final review I3）：save 會把
+        // `lines` 全部用同一個 eol 接回去，所以一萬行的 LF 檔裡混進一行
+        // CRLF，舊式偵測會在第一次存檔時把一萬行全部改寫成 CRLF ——
+        // 直接違反 spec §3.11 第 4 點「commit 範圍以外的行保留原位元組」。
+        // 多數決把損害限制在少數派那幾行。平手時取 LF（git / POSIX 預設）。
+        // 用「\n 總數 − CRLF 數」算裸 LF，而不是 /(^|[^\r])\n/g：後者是
+        // non-overlapping 比對，連續空行的第二個 \n 會被前一次比對吃掉的
+        // 字元擋掉而漏數。減法沒有這個誤差。
+        const lfTotal = (mdText.match(/\n/g) || []).length;
+        const crlfCount = (mdText.match(/\r\n/g) || []).length;
+        const eol = crlfCount > (lfTotal - crlfCount) ? '\r\n' : '\n';
         const { html, blocks } = await renderMarkdown(mdText, file, { editMode: true });
         const payload = JSON.stringify({
-          fileId, mtimeMs, lines: mdText.split('\n'), blocks,
+          fileId, mtimeMs, eol, lines: mdText.split(/\r\n|\n/), blocks,
         });
         const inject =
           `<script>window.__ED__ = ${payload.replace(/</g, '\\u003c')}</script>\n` +

package/lib/editor/table-md.js CHANGED Viewed

@@ -152,11 +152,23 @@
     const headerRow = thead ? firstChildNamed(thead, 'TR') : null;
     const headerCells = headerRow ? elementChildren(headerRow).filter(isCell) : [];
+    const bodyRows = tbody ? childrenNamed(tbody, 'TR') : [];
+    // degrade-never-lose：這兩種形狀序列化出去就回不來了。
+    // 空表頭會輸出 '|  |' + '||'，re-lex 成 paragraph（整張表消失）；
+    // 比表頭寬的 body 列，重讀時多出來的欄會被直接丟掉。
+    if (headerCells.length === 0) {
+      return { md: '', unsupported: ['TABLE_NO_HEADER'] };
+    }
+    const ragged = bodyRows.some((tr) =>
+      elementChildren(tr).filter(isCell).length !== headerCells.length);
+    if (ragged) {
+      return { md: '', unsupported: ['TABLE_RAGGED'] };
+    }
     const lines = [];
     lines.push(serializeRow(headerCells, unsupported));
     lines.push('|' + headerCells.map((c) => sepCellFor(cellAlign(c))).join('|') + '|');
-    const bodyRows = tbody ? childrenNamed(tbody, 'TR') : [];
     bodyRows.forEach((tr) => {
       const cells = elementChildren(tr).filter(isCell);
       lines.push(serializeRow(cells, unsupported));

package/lib/md2doc.js CHANGED Viewed

@@ -1825,13 +1825,15 @@ ${itemsHtml}
   .ed-tb-insert:hover { background: #3b82f6; color: #fff; }
   .ed-tb-insert[hidden] { display: none; }
   /* Task 6: table edge-click menus (delete/align) + row drag-reorder.
-     '.ed-te-hl' marks the currently-selected column's cells (th+td) or row
-     (the <tr> itself) — !important because the sticky-first-column rules
-     below (tbody td:first-child / thead th:first-child) carry higher
-     specificity (0,1,2 vs this class's 0,1,0) and would otherwise win over
-     a first-column/first-row highlight despite this rule appearing later in
-     source order. '.ed-te-menu' is a SINGLETON floating menu (position:
-     fixed, same viewport-relative idiom as .ed-seltb/.ed-tb-insert above),
+     '.ed-te-hl' marks the currently-selected column's or row's CELLS
+     (th+td) — never the <tr>, which paints nothing the user can see once a
+     th/td above it carries its own opaque background (S3). !important
+     because the sticky-first-column rules below (tbody td:first-child /
+     thead th:first-child) carry higher specificity (0,1,2 vs this class's
+     0,1,0) and would otherwise win over a first-column/first-row highlight
+     despite this rule appearing later in source order; the plain
+     th-background rule above needs it too. '.ed-te-menu' is a SINGLETON
+     floating menu (position: fixed, same viewport-relative idiom as .ed-seltb/.ed-tb-insert above),
      relabeled/repositioned per click rather than rebuilt. '.ed-te-drop-
      indicator' is the singleton line shown while dragging a row.
      '.ed-te-row-dragging' dims the row actually being dragged. */
@@ -1862,16 +1864,19 @@ ${itemsHtml}
   /* 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 just LEFT
-     of the hovered BODY row (never the header); '.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
+     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), and sitting just INSIDE the table's left
+     border rather than outside it, because the space outside belongs to the
+     block's own gutter; '.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
-     images, no background gradients. '.ed-te-grip-dragging' is the row
-     grip's own "active drag handle" visual (grabbing cursor) while a row
-     drag is in flight — see cancelTeDrag()/the pointermove listener in the
-     client runtime. */
+     images, no background gradients. '.ed-te-grip-dragging' is EITHER
+     grip's own "active drag handle" visual (grabbing cursor) while a row OR
+     column drag is in flight (Task 8: columns became draggable too, same
+     as rows) — see cancelTeDrag()/the pointermove listener in the client
+     runtime. */
   .ed-te-grip {
     position: fixed; z-index: 9; padding: 0; margin: 0; border: none;
     border-radius: 4px; background: transparent;
@@ -1889,10 +1894,11 @@ ${itemsHtml}
   }
   .ed-te-grip-row.ed-te-grip-dragging { cursor: grabbing; }
   .ed-te-grip-col {
-    width: 28px; height: 24px; cursor: pointer; z-index: 7;
+    width: 28px; height: 24px; cursor: grab; z-index: 7;
     grid-template-columns: repeat(3, 3px); grid-template-rows: repeat(2, 3px);
     gap: 4px 3px;
   }
+  .ed-te-grip-col.ed-te-grip-dragging { cursor: grabbing; }
   /* Task 4: floating selection toolbar (bold/italic/strikethrough/underline/
      code/link), shown over a
      non-collapsed selection inside an active WYSIWYG session. position:

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, and Graphviz support",
   "keywords": [
     "markdown",