@helping-ai-workflow/md2doc 3.0.1 → 3.2.0

package/lib/md2doc.js

@@ -313,7 +313,7 @@ function renderEditModeList(listToken, blocks, biRef, out) {
     item.tokens.filter((tk) => tk.type === 'list')
       .forEach((ct) => renderEditModeList(ct, blocks, biRef, parts));
   });
-  return parts.join('\n');
+  return parts;
 }
 
 async function renderMarkdown(mdText, srcPath, opts = {}) {
@@ -487,6 +487,10 @@ async function renderMarkdown(mdText, srcPath, opts = {}) {
   }
 
   let bodyHtml;
+  // v3.2.0: the per-block edit-mode parts (1:1 with `blocks`), already baked.
+  // Stays null outside editMode — the reader/PDF path has no per-block DOM to
+  // patch, only the whole-document `bodyHtml`.
+  let parts = null;
   let tocHtml = '';
   let serializedSections = '[]';
   // NOTE: intentionally no try/catch here. A throw from marked/katex parsing
@@ -893,7 +897,7 @@ ${itemsHtml}
       // exactly what the whole-document parse would emit for that token,
       // using the same renderer/options set above.
       const tokens = marked.lexer(mdPre);
-      const parts = [];
+      parts = [];
       // `v` is the block cursor; `prevLi`/`types` are the §3.8 run state the
       // flat list renderer above threads through its own recursion (see
       // liRunStartsHere()).
@@ -901,7 +905,7 @@ ${itemsHtml}
       for (const t of tokens) {
         if (t.type === 'space') continue;
         if (t.type === 'list') {
-          parts.push(renderEditModeList(t, blocks, biRef));
+          parts.push(...renderEditModeList(t, blocks, biRef));
           continue;
         }
         resetLiRunState(biRef); // §3.8 rule (c): a non-li block ends every run
@@ -920,6 +924,14 @@ ${itemsHtml}
         throw new Error('edit-mode render consumed ' + biRef.v +
           ' blocks but the block map has ' + blocks.length);
       }
+      // v3.2.0: bake EACH part, then join — not join-then-bake. The patch path
+      // inserts parts[i] straight into the DOM and the client has no graphviz
+      // renderer (__md2docInitDiagrams handles only mermaid and WaveDrom), so
+      // an unbaked part lands as an empty <div class="graphviz">. bakeGraphviz
+      // short-circuits on parts with no data-graphviz-src, and each placeholder
+      // falls entirely inside one part, so this is byte-identical to baking the
+      // joined string.
+      parts = await Promise.all(parts.map(bakeGraphviz));
       bodyHtml = parts.join('\n');
     } else {
       bodyHtml = marked.parse(mdPre);
@@ -1328,6 +1340,48 @@ ${itemsHtml}
     content: ""; position: absolute;
     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%;
+  }
+  /* v3.1.0 §4: room for the fixed toolbar (.ed-toolbar, further up this
+     stylesheet). The bar is position:fixed — NOT sticky — because
+     lib/editor/client.js mounts it on document.body: rerenderAll() replaces
+     .content's innerHTML wholesale, so a toolbar living inside the content
+     column would be destroyed by the first commit with nothing to rebuild
+     it. Fixed chrome takes no layout space, so the page has to make its
+     own: this is the only place that offset is written. The mobile rule at
+     max-width:1080px above already reserves 60px for .sidebar-toggle; the
+     bar sits above it, so the two offsets ADD there.
+     .reader-sidebar is sticky at top: 24px in the base stylesheet — pushed
+     down by the same amount here so the outline does not slide under the
+     bar, with its height reduced to match so it still ends at the viewport
+     bottom. */
+  .page-layout { padding-top: var(--ed-toolbar-h); }
+  .reader-sidebar {
+    top: calc(24px + var(--ed-toolbar-h));
+    height: calc(100vh - 48px - var(--ed-toolbar-h));
+  }
+  @media (max-width: 1080px) {
+    .page-layout { padding-top: calc(60px + var(--ed-toolbar-h)); }
+    .reader-sidebar { top: 0; height: 100vh; padding-top: calc(16px + var(--ed-toolbar-h)); }
+  }
+  /* The 大綱 button's DESKTOP half, on an attribute of its OWN.
+     ⚠ It deliberately does NOT reuse body[data-sidebar-open], and the reason
+     was measured rather than reasoned: the rule
+     'body[data-sidebar-open] .sidebar-scrim { display: block; }' sits at BASE scope in this
+     stylesheet, not inside the max-width:1080px drawer block. Giving that
+     same attribute a second, desktop meaning therefore also paints
+     .sidebar-scrim (position:fixed; inset:0; z-index:98; rgba(0,0,0,.35))
+     across the whole viewport — the desktop page went grey and
+     click-through-dead, and the scrim's own click handler (which calls
+     setSidebarOpen(false)) meant the next click anywhere silently undid it.
+     A private attribute, written by toggleOutlineSidebar() in
+     lib/editor/client.js, leaves data-sidebar-open to the mobile drawer
+     alone and lets #sidebar-toggle's aria-expanded stay truthful.
+     The attribute names the non-default state ("hidden") because on desktop
+     the outline is a sticky column that is SHOWN by default; the mobile
+     drawer keeps its own "open" attribute for the same reason in reverse. */
+  @media (min-width: 1081px) {
+    body[data-ed-outline-hidden] .reader-sidebar,
+    body[data-ed-outline-hidden] .sidebar-splitter { display: none; }
   }`;
 
   const html = `<!DOCTYPE html>
@@ -2185,6 +2239,17 @@ ${itemsHtml}
   }
   .ed-block:hover .ed-handle,
   .ed-handle:focus { opacity: 1; }
+  /* v3.0.2: a table's row grip is a document.body child at z-index 7 that
+     straddles the table's left border, and a table block's ⠿ sits at the
+     header row's own Y — so a pointer travelling left toward the ⠿ crosses
+     the grip, elementFromPoint stops returning the block, and :hover above
+     goes false mid-approach. The grip cannot move (it must be a body child
+     to stay put while the table scrolls), so lib/editor/client.js holds the
+     gutter lit with this class for the duration instead. It does NOT
+     restore :hover, so .ed-block:hover's own outline still blinks there —
+     a recorded, unfixed residue. */
+  .ed-block.ed-keep-lit .ed-handle,
+  .ed-block.ed-keep-lit .ed-insert { opacity: 1; }
   .ed-handle:hover { background: rgba(0, 0, 0, 0.08); }
   /* The ⠿ handle's menu: 轉換成 › / 建立副本 / 刪除 / MD 原始碼 (spec §3.7),
      each led by a 16px currentColor icon (v2.12.0; drawn in
@@ -2469,6 +2534,110 @@ ${itemsHtml}
   .ed-seltb-i { font-style: italic; }
   .ed-seltb-s { text-decoration: line-through; }
   .ed-seltb-u { text-decoration: underline; }
+  /* v3.1.0 §4: the always-visible editing toolbar. Its numeric language is
+     .lightbox-bar's (8px/12px padding, 6px gap, 13px type) over .ed-seltb's
+     dark pill, so the two floating surfaces read as one family.
+     position:fixed, NOT sticky: lib/editor/client.js mounts this on
+     document.body because rerenderAll() replaces .content's innerHTML
+     wholesale and would silently destroy a toolbar mounted inside it.
+     Deliberately does NOT read any --ed-gutter-* token — those describe the
+     ⠿/＋ pair's geometry and this is a new, unrelated scale (the height is
+     its own token because the edit-mode layout chunk at the end of this
+     stylesheet has to reserve exactly that much room for it).
+     z-index sits above the mobile drawer (99) and .sidebar-toggle (100) but
+     below .ed-conflict (999): a save conflict must always be reachable. */
+  :root { --ed-toolbar-h: 44px; }
+  .ed-toolbar {
+    position: fixed; top: 0; left: 0; right: 0; z-index: 101;
+    box-sizing: border-box; height: var(--ed-toolbar-h);
+    display: flex; align-items: center; justify-content: center;
+    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
+    gap: 6px; padding: 8px 12px;
+    background: rgba(16, 18, 21, 0.92); color: #e6edf3;
+    font-size: 13px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  }
+  .ed-toolbar-sep {
+    flex: 0 0 auto; width: 1px; height: 18px; margin: 0 2px;
+    background: rgba(255, 255, 255, 0.25);
+  }
+  .ed-toolbar-btn {
+    flex: 0 0 auto;
+    min-width: 28px; height: 26px; padding: 0 8px;
+    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: 13px; line-height: 1;
+    white-space: nowrap; cursor: pointer;
+  }
+  .ed-toolbar-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); }
+  .ed-toolbar-btn:disabled { opacity: 0.38; cursor: default; }
+  .ed-toolbar-btn[aria-pressed="true"] {
+    background: #e6edf3; color: #101215; border-color: #e6edf3;
+  }
+  .ed-toolbar-b { font-weight: bold; }
+  .ed-toolbar-i { font-style: italic; }
+  .ed-toolbar-s { text-decoration: line-through; }
+  /* H1 fix: the brief's literal margin-left: auto (a flex-flow item) was
+     measured to break .ed-toolbar's justify-content: center — an auto
+     margin on any flex item absorbs ALL positive free space before
+     justify-content sees any, so the ~22-button group snapped flush left on
+     every viewport wide enough not to overflow. position: fixed removes
+     the slot from the flex layout entirely (buttons measured byte-identical
+     to a build with the slot absent, at both a 1400px and a 420px viewport),
+     and — unlike position: absolute against .ed-toolbar's own
+     position: fixed box — it anchors to the browser viewport, not to
+     .ed-toolbar's scrolled content, so it does not drift as the button
+     row's overflow-x: auto scrolls (measured identical rect at scrollLeft
+     0 / mid / max, where the absolute alternative moved by the exact scroll
+     delta). References no gutter-alignment custom property.
+     H2 fix: pointer-events: none below is LOAD-BEARING while this slot
+     ships empty, not decorative. At narrow viewports .ed-toolbar's own
+     overflow-x: auto lets the button row scroll to a rest position where
+     this fixed 7rem box's footprint physically covers three real buttons
+     (image / outline / preview, measured at 420px width, scrollLeft at its
+     max 221) — document.elementFromPoint() over any of them resolves to
+     this span, not the button underneath, and a real click on it never
+     reaches the button's listener. Harmless today only because the span
+     carries no content to interact with. WHOEVER WIRES UP TWO-WAY SYNC
+     (§3) AND PUTS REAL CONTENT OR CONTROLS HERE MUST remove or scope this
+     rule AND independently solve the overlap (e.g. reflow the slot in-flow
+     at narrow widths, or shrink/hide it below some width) — simply
+     deleting this line without doing that reopens the swallowed-click
+     regression, this time on content someone can actually see and try to
+     click. */
+  .ed-toolbar-status { position: fixed; top: 0; right: 12px;
+    height: var(--ed-toolbar-h); line-height: var(--ed-toolbar-h);
+    min-width: 7rem; text-align: right; font-size: 12px; opacity: .8;
+    pointer-events: none; }
+  /* The H▾ dropdown: same singleton-panel idiom as .ed-insert-menu, but
+     anchored to a fixed bar rather than moved into a block, so it is
+     positioned in viewport coordinates by the client runtime. */
+  .ed-toolbar-menu {
+    position: fixed; z-index: 102;
+    display: flex; flex-direction: column; gap: 2px;
+    padding: 4px; border-radius: 8px;
+    background: rgba(16, 18, 21, 0.96); color: #e6edf3;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+  }
+  .ed-toolbar-menu[hidden] { display: none; }
+  .ed-toolbar-menu-btn {
+    min-width: 120px; padding: 4px 10px; text-align: left;
+    border: none; border-radius: 4px; background: transparent; color: inherit;
+    font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer;
+  }
+  .ed-toolbar-menu-btn:hover { background: rgba(255, 255, 255, 0.18); }
+  /* 追加 4: the whole-document source escape hatch. Replaces the rendered
+     content column for the duration of source mode; the document's own
+     lines[] is untouched until the mode is left (see docsource.js). */
+  .ed-source {
+    display: block; width: 100%; box-sizing: border-box;
+    min-height: 70vh; padding: 12px;
+    font-family: monospace; font-size: 13px; line-height: 1.6;
+    border: 1px solid #d0d7de; border-radius: 8px; resize: vertical;
+    white-space: pre; overflow-wrap: normal;
+  }
+  body[data-ed-mode="preview"] .ed-handle,
+  body[data-ed-mode="preview"] .ed-insert { display: none !important; }
   .ed-editing { position: relative; }
   .ed-raw {
     display: block; width: 100%; font-family: monospace; font-size: 13px;
@@ -4121,8 +4290,11 @@ ${mermaidInitTag}`)
 </html>`;
 
   const bakedHtml = await bakeGraphviz(html);
+  // editMode's bodyHtml is already baked per-part above; re-baking here is a
+  // short-circuit no-op (bakeGraphviz bails out when there's no
+  // data-graphviz-src left). Non-editMode bodyHtml is baked here as before.
   const bakedBody = await bakeGraphviz(bodyHtml);
-  return { html: bakedHtml, bodyHtml: bakedBody, blocks };
+  return { html: bakedHtml, bodyHtml: bakedBody, parts, blocks };
 }
 module.exports = { renderMarkdown };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, and Graphviz support",
   "keywords": [
     "markdown",
@@ -32,11 +32,12 @@
     "marked-katex-extension": "^5.1.10",
     "mermaid": "11.15.0",
     "puppeteer": "^24.15.0",
+    "turndown": "^7.2.4",
     "wavedrom": "3.5.0"
   },
   "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 && node test/table-width.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 && node test/toolbar-model.test.js && node test/docsource.test.js && node test/asset.test.js && node test/paste-md.test.js && node test/patchmap.test.js"
   },
   "repository": {
     "type": "git",