@helping-ai-workflow/md2doc 3.16.1 → 3.17.0

package/lib/md2doc.js

@@ -1993,6 +1993,48 @@ ${edUlMarkerCss}${edOlCounterCss}
     color: var(--md-strong); cursor: pointer; box-shadow: 0 1px 3px var(--md-ed-shadow);
   }
   .ed-wave-edit-btn:hover { background: var(--md-ed-surface); border-color: var(--md-border); }
+  .ed-diagram-edit-btn {
+    position: fixed; z-index: 12; padding: 3px 10px; font-size: 12px;
+    display: inline-flex; align-items: center; gap: 4px;
+    border: 1px solid var(--md-border); border-radius: 4px; background: var(--md-ed-surface);
+    color: var(--md-strong); cursor: pointer; box-shadow: 0 1px 3px var(--md-ed-shadow);
+  }
+  .ed-diagram-edit-btn[hidden] { display: none; }
+  .ed-diagram-edit-btn:hover { background: var(--md-ed-surface); border-color: var(--md-border); }
+  .ed-diagram-edit-btn svg { flex: 0 0 auto; width: 14px; height: 14px; margin: 0; }
+  /* v3.17.0 T5: the diagram panel (openDiagramPanel() in the client runtime).
+     It replaces the block's content in place, inside the block, like the raw
+     box: a 2px accent frame, the header (language, the muted hint, the done
+     button), the source (monospace on the field colour, 50vh at most, then it
+     scrolls), the preview (60vh at most, scrolls both ways) and one message
+     line. A preview kept after an error, or after an answer with nothing to
+     draw, is dimmed (.is-stale). No backticks in this comment: it lives
+     inside a JS template literal. */
+  .ed-diagram-panel {
+    border: 2px solid var(--md-accent); border-radius: 6px; padding: 8px;
+    background: var(--md-ed-surface); color: var(--md-strong);
+  }
+  .ed-diagram-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; }
+  .ed-diagram-lang { font-weight: 600; }
+  .ed-diagram-hint { flex: 1 1 auto; min-width: 0; color: var(--md-muted); font-size: 12px; }
+  .ed-diagram-done {
+    flex: 0 0 auto; font: inherit; font-size: 13px; padding: 2px 12px; cursor: pointer;
+    border: 1px solid var(--md-border); border-radius: 6px;
+    background: var(--md-ed-surface); color: var(--md-strong);
+  }
+  .ed-diagram-done:hover { background: var(--md-ed-hover); }
+  .ed-diagram-src {
+    display: block; width: 100%; box-sizing: border-box; min-height: 3em; max-height: 50vh; overflow-y: auto;
+    padding: 6px; resize: vertical; tab-size: 2;
+    font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; font-size: 13px;
+    border: 1px solid var(--md-border); border-radius: 6px;
+    background: var(--md-ed-field); color: var(--md-strong);
+  }
+  .ed-diagram-preview { margin-top: 8px; max-height: 60vh; overflow: auto; outline: none; }
+  .ed-diagram-preview svg { display: block; max-width: none; }
+  .ed-diagram-preview.is-stale { opacity: 0.35; }
+  .ed-diagram-error { margin-top: 6px; font-size: 12px; color: var(--md-ed-err); }
+  .ed-diagram-error[data-kind="empty"] { color: var(--md-muted); }
   .ed-wave-overlay {
     position: fixed; inset: 0; z-index: 998; background: rgba(0,0,0,.45);
     display: flex; align-items: center; justify-content: center;
@@ -3520,6 +3562,17 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
     outline: 2px solid var(--md-accent); outline-offset: 2px;
     caret-color: var(--md-accent);
   }
+  /* v3.17.0 T2: a fenced code block edited in place. The pre itself is the
+     editing host (editCodeInPlace() in the client runtime) and takes the
+     same ring as an armed surface, drawn outside its own padding. Code never
+     wraps, also where an engine's contenteditable default would wrap it, and
+     an empty body keeps one line of height to click and type into. */
+  pre[data-ed-code-edit] {
+    white-space: pre; overflow-wrap: normal; word-wrap: normal; line-break: auto;
+    cursor: text; caret-color: var(--md-accent);
+  }
+  pre[data-ed-code-edit]:focus { outline: 2px solid var(--md-accent); outline-offset: 2px; }
+  pre[data-ed-code-edit] > code { display: block; min-height: 1lh; }
   /* v3.14.0 T4: the empty-paragraph hint. syncEmptyMark() in the client sets
      data-ed-empty on a paragraph surface with no text; a real paragraph shows
      the hint while focused, the transient (an empty document's, or one Enter
@@ -3687,6 +3740,53 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
     flex: 0 0 auto; padding: 6px 10px; font-size: 11px; color: var(--md-muted);
     border-top: 1px solid var(--md-ed-ring);
   }
+  /* v3.17.0 T3: the language chip and the copy chip of a fenced code block.
+     Both live in one singleton on document.body (not inside .content: the
+     client reads .content back as its own render), fixed at the top-right of
+     the block the pointer is over or that is being edited. 24px tall, the
+     editor surface with a 1px ring and a 6px radius; the copy chip shows the
+     same check and Copied feedback as the reader button. The language menu
+     is the slash menu look: 220px wide, 320px tall at most, its list scrolls
+     on its own. No backticks in this comment: it lives inside a JS template
+     literal. */
+  .ed-code-chips {
+    position: fixed; z-index: 12; display: flex; align-items: center; gap: 4px;
+  }
+  .ed-code-chips[hidden] { display: none; }
+  .ed-code-chip {
+    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
+    height: 24px; min-width: 24px; padding: 0 6px; margin: 0; box-sizing: border-box;
+    border: 0; border-radius: 6px; background: var(--md-ed-surface); color: var(--md-muted);
+    box-shadow: 0 0 0 1px var(--md-ed-ring);
+    font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
+  }
+  .ed-code-chip:hover, .ed-code-chip[aria-expanded="true"] { background: var(--md-ed-hover); color: var(--md-strong); }
+  .ed-code-chip svg { flex: 0 0 auto; width: 14px; height: 14px; margin: 0; }
+  .ed-code-copy.is-copied { color: var(--md-accent); }
+  .ed-code-langmenu {
+    position: fixed; z-index: 100; width: 220px; max-height: 320px;
+    display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden;
+    border-radius: 8px; background: var(--md-ed-surface); color: var(--md-strong);
+    box-shadow: 0 0 0 1px var(--md-ed-ring), 0 8px 24px var(--md-ed-shadow);
+    font-size: 13px; line-height: 1.3;
+  }
+  .ed-code-langfilter {
+    flex: 0 0 auto; margin: 4px 4px 0; padding: 0 8px; height: 28px; box-sizing: border-box;
+    border: 0; border-radius: 6px; background: var(--md-ed-hover); color: inherit;
+    font: inherit; outline: none;
+  }
+  .ed-code-langfilter::placeholder { color: var(--md-muted); }
+  .ed-code-langlist { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; }
+  .ed-code-langitem {
+    display: flex; align-items: center; gap: 8px; width: 100%; height: 32px;
+    padding: 0 8px; box-sizing: border-box; margin: 0;
+    border: 0; border-radius: 6px; background: transparent; color: inherit;
+    font: inherit; text-align: left; cursor: pointer;
+  }
+  .ed-code-langitem:hover, .ed-code-langitem[data-ed-lang-cursor] { background: var(--md-ed-hover); }
+  .ed-code-langitem span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .ed-code-langitem svg { flex: 0 0 auto; width: 14px; height: 14px; margin: 0; }
+  .ed-code-langempty { padding: 8px; color: var(--md-muted); }
   /* §10-gap fix: block-level INSERT — the ＋ button sits NEXT TO the ⠿
      handle in the left gutter, same node/visibility-toggle shape as
      .ed-handle above (real per-block node, opacity-only reveal on hover).
@@ -3991,6 +4091,32 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
     background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer;
   }
   .ed-linkcard-btn:hover { background: var(--md-ed-hover); }
+  /* v3.17.0 T7: the image toolbar, 8px inside the top-left of the image the
+     pointer is over (a fixed singleton on body, like the link card; the same
+     surface, ring and shadow roles). 刪除 is the error colour. In its alt-text
+     mode the buttons give way to one input. */
+  .ed-imgtb {
+    position: fixed; z-index: 15;
+    display: flex; align-items: center; gap: 2px; box-sizing: border-box;
+    max-width: calc(100vw - 8px); padding: 3px; border-radius: 8px;
+    background: var(--md-ed-surface); color: var(--md-strong); font-size: 13px;
+    box-shadow: 0 0 0 1px var(--md-ed-ring), 0 8px 24px var(--md-ed-shadow);
+  }
+  .ed-imgtb[hidden] { display: none; }
+  .ed-imgtb-btns { display: flex; align-items: center; gap: 2px; }
+  .ed-imgtb-btns[hidden], .ed-imgtb-input[hidden] { display: none; }
+  .ed-imgtb-btn {
+    flex: none; height: 26px; padding: 0 8px; border: 0; border-radius: 6px;
+    background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer;
+  }
+  .ed-imgtb-btn:hover { background: var(--md-ed-hover); }
+  .ed-imgtb-delete { color: var(--md-ed-err); }
+  .ed-imgtb-input {
+    flex: 1 1 auto; width: 260px; max-width: calc(100vw - 24px); min-width: 0; height: 28px;
+    box-sizing: border-box; padding: 0 8px; border: 1px solid var(--md-ed-ring); border-radius: 6px;
+    background: var(--md-ed-field); color: inherit; font: inherit; font-size: 13px;
+  }
+  .ed-imgtb-input:focus { outline: none; border-color: var(--md-muted); }
   /* 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.
@@ -6652,7 +6778,7 @@ ${usesDrawioMultiPage ? `  // v3.4.0 batch2 Task 6: wired through a NAMED, reusa
 // server's on-demand GET /api/lib/<name> serves exactly what this file inlines
 // instead of resolving them a second time.
 const diagramEnginePaths = { mermaid: localMermaidJs, wavedrom: localWaveDromJs, wavedromSkin: localWaveDromSkin };
-module.exports = { renderMarkdown, buildKatexStyleTag, diagramEnginePaths };
+module.exports = { renderMarkdown, buildKatexStyleTag, diagramEnginePaths, renderDotSvg };
 
 // Index of the first "{" in dot source that opens the graph body: not inside a
 // double-quoted string, a // or /* */ comment, a line starting with # (dot
@@ -6690,59 +6816,83 @@ function firstDotBrace(src) {
   return -1;
 }
 
+// One dot path for the bake and the editor preview. The loaded Graphviz
+// instance is cached at module scope (the library does not memoise load()).
+let graphvizLoading = null;
+function loadGraphviz() {
+  if (!graphvizLoading) {
+    const { Graphviz } = require('@hpcc-js/wasm-graphviz');
+    graphvizLoading = Graphviz.load();
+    // A failed load must not poison the cache: the next call tries again.
+    graphvizLoading.catch(() => { graphvizLoading = null; });
+  }
+  return graphvizLoading;
+}
+async function renderDotSvg(dotSrc) {
+  const gv = await loadGraphviz();
+  // Graphviz measures label widths with the font it lays out in, and with
+  // no fontname that is Times, whose metrics are narrower than the sans
+  // the SVG is drawn in -- so labels overflowed their boxes. Declare
+  // Helvetica BEFORE layout, right after the first brace; a fontname the
+  // author writes later in the source still wins. Exactly "Helvetica":
+  // a "Helvetica,sans-Serif" family list falls back to Times widths.
+  const at = firstDotBrace(dotSrc);
+  const laidOut = at < 0 ? dotSrc : dotSrc.slice(0, at + 1) +
+    ' graph [fontname="Helvetica"]; node [fontname="Helvetica"]; edge [fontname="Helvetica"]; ' + dotSrc.slice(at + 1);
+  let laid;
+  try {
+    laid = gv.dot(laidOut);
+  } catch (injectErr) {
+    // Injection must never turn a valid graph into an error: lay the
+    // original source out as the author wrote it.
+    if (laidOut === dotSrc) throw injectErr;
+    laid = gv.dot(dotSrc);
+  }
+  return laid
+    .replace(/<\?xml[^>]*\?>/g, '')
+    .replace(/<!DOCTYPE[\s\S]*?>/g, '')
+    // drop graphviz's "Generated by graphviz" banner comment so the div and <svg> are adjacent
+    .replace(/<!--[\s\S]*?-->/g, '')
+    // v3.8.0: graphviz falls back to Times when no fontname is set. The
+    // injection above makes Helvetica the layout font, so this rewrite
+    // now only touches an author's explicit Times-Roman, or a figure
+    // whose injection fell back to the original source; other explicit
+    // fontnames are untouched.
+    .replace(/font-family="Times,serif"/g, 'font-family="Helvetica,sans-Serif"')
+    .trim();
+}
+
 // Render every deferred dot/graphviz placeholder to inline SVG using the
 // in-process WASM engine. Loads the WASM module only when at least one dot
 // block exists, so text-only docs pay nothing.
 async function bakeGraphviz(htmlStr) {
   if (!GRAPHVIZ_PLACEHOLDER.probe.test(htmlStr)) return htmlStr;
-  let Graphviz;
   try {
-    ({ Graphviz } = require('@hpcc-js/wasm-graphviz'));
+    require('@hpcc-js/wasm-graphviz');
   } catch (e) {
     console.error('[ERROR] @hpcc-js/wasm-graphviz not installed — run `npm install`:', e.message);
     return htmlStr;
   }
-  const gv = await Graphviz.load();
-  return htmlStr.replace(GRAPHVIZ_PLACEHOLDER.re, (m, b64) => {
-    const dotSrc = Buffer.from(b64, 'base64').toString('utf8');
+  // A WASM load failure throws, as it always did; only a per-block render
+  // failure degrades that block to pre/code.
+  await loadGraphviz();
+  const jobs = [];
+  htmlStr.replace(GRAPHVIZ_PLACEHOLDER.re, (m, b64) => {
+    jobs.push(Buffer.from(b64, 'base64').toString('utf8'));
+    return m;
+  });
+  const out = [];
+  for (const dotSrc of jobs) {
     try {
-      // Graphviz measures label widths with the font it lays out in, and with
-      // no fontname that is Times, whose metrics are narrower than the sans
-      // the SVG is drawn in -- so labels overflowed their boxes. Declare
-      // Helvetica BEFORE layout, right after the first brace; a fontname the
-      // author writes later in the source still wins. Exactly "Helvetica":
-      // a "Helvetica,sans-Serif" family list falls back to Times widths.
-      const at = firstDotBrace(dotSrc);
-      const laidOut = at < 0 ? dotSrc : dotSrc.slice(0, at + 1) +
-        ' graph [fontname="Helvetica"]; node [fontname="Helvetica"]; edge [fontname="Helvetica"]; ' + dotSrc.slice(at + 1);
-      let laid;
-      try {
-        laid = gv.dot(laidOut);
-      } catch (injectErr) {
-        // Injection must never turn a valid graph into an error: lay the
-        // original source out as the author wrote it.
-        if (laidOut === dotSrc) throw injectErr;
-        laid = gv.dot(dotSrc);
-      }
-      const svg = laid
-        .replace(/<\?xml[^>]*\?>/g, '')
-        .replace(/<!DOCTYPE[\s\S]*?>/g, '')
-        // drop graphviz's "Generated by graphviz" banner comment so the div and <svg> are adjacent
-        .replace(/<!--[\s\S]*?-->/g, '')
-        // v3.8.0: graphviz falls back to Times when no fontname is set. The
-        // injection above makes Helvetica the layout font, so this rewrite
-        // now only touches an author's explicit Times-Roman, or a figure
-        // whose injection fell back to the original source; other explicit
-        // fontnames are untouched.
-        .replace(/font-family="Times,serif"/g, 'font-family="Helvetica,sans-Serif"')
-        .trim();
-      return `<div class="graphviz">${svg}</div>`;
+      out.push(`<div class="graphviz">${await renderDotSvg(dotSrc)}</div>`);
     } catch (e) {
       console.error('[WARN] graphviz render failed:', e.message);
       const escaped = dotSrc.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-      return `<pre><code class="language-dot">${escaped}</code></pre>\n`;
+      out.push(`<pre><code class="language-dot">${escaped}</code></pre>\n`);
     }
-  });
+  }
+  let i = 0;
+  return htmlStr.replace(GRAPHVIZ_PLACEHOLDER.re, () => out[i++]);
 }
 
 function launchBrowser(puppeteer) {

package/lib/theme/runtime.js

@@ -22,7 +22,9 @@
       if (at !== -1) listeners.splice(at, 1);
     };
   }
-  function notify(dark) { for (var i = 0; i < listeners.length; i++) listeners[i](dark); }
+  // Over a copy: a listener may unsubscribe itself (or another) while it
+  // runs, and a splice under the loop would skip the next one.
+  function notify(dark) { var ls = listeners.slice(); for (var i = 0; i < ls.length; i++) ls[i](dark); }
   function isDark() { return root.getAttribute('data-md2doc-theme') === 'dark'; }
   function save(dark) {
     try {
@@ -228,6 +230,35 @@
     return true;
   };
 
+  // v3.17.0 (D13): one off-page render for the editor's diagram panel preview.
+  // It waits its turn on the same chain, because mermaid has ONE global config
+  // and a render beside a light / dark draw could be drawn with the other's
+  // theme. Its turn initialises the theme on screen at that moment, renders
+  // under a fresh id, and puts the light config back after (the invariant
+  // every draw here keeps). Resolves the svg text; rejects with mermaid's
+  // error, its stray #d<id> element removed. Counted in inFlight like the
+  // draws, so a toggle to a cached theme waits behind it too.
+  var previewSeq = 0;
+  function renderMermaid(src) {
+    if (typeof window.mermaid === 'undefined') return Promise.reject(new Error('mermaid is not loaded'));
+    inFlight++;
+    var run = chain.then(function () {
+      var id = 'md2doc-mermaid-preview-' + (++previewSeq);
+      window.mermaid.initialize(mermaidConfig(isDark() ? 'dark' : 'light'));
+      return Promise.resolve().then(function () { return window.mermaid.render(id, String(src)); }).then(function (res) {
+        window.mermaid.initialize(mermaidConfig('light'));
+        return res.svg;
+      }, function (e) {
+        var stray = document.getElementById('d' + id);
+        if (stray && stray.parentNode) stray.parentNode.removeChild(stray);
+        window.mermaid.initialize(mermaidConfig('light'));
+        throw e;
+      });
+    });
+    chain = run.catch(function () { /* the caller shows the error */ }).then(function () { inFlight--; });
+    return run;
+  }
+
   // ── graphviz / WaveDrom / baked SVG: recolour by computed colour ──
   // Rules: spec "Diagram recolour rules (D10)". Reading COMPUTED fill/stroke
   // covers both graphviz presentation attributes and WaveDrom's own <style>.
@@ -617,6 +648,6 @@
   // Public surface for pages that draw their own SVG outside .content (the wave editor canvas).
   // `__listenerCount` is a test hook (test/editor-click.test.js): the wave
   // editor subscribes once per open and must unsubscribe on close.
-  window.md2docTheme = { isDark: isDark, onTheme: onTheme, recolourSvg: recolourSvg,
+  window.md2docTheme = { isDark: isDark, onTheme: onTheme, recolourSvg: recolourSvg, renderMermaid: renderMermaid,
     __listenerCount: function () { return listeners.length; } };
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "3.16.1",
+  "version": "3.17.0",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, Graphviz, and draw.io support",
   "keywords": [
     "markdown",
@@ -46,7 +46,7 @@
   },
   "scripts": {
     "preinstall": "node scripts/preinstall.js",
-    "test": "node test/md2doc.test.js && node test/highlight.test.js && node test/blockmap.test.js && node test/drawio.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/block-catalog.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/cell-range.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/table-anchor-recovery.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/asset.test.js && node test/paste-md.test.js && node test/patchmap.test.js && node test/wave-codec.test.js && node test/wave-draw.test.js && node test/wave-geometry.test.js && node test/wave-store.test.js && node test/editor-journey.test.js && node test/detach-census.test.js && node test/editor-arrow-nav.test.js && node test/editor-cell-range.test.js && node test/reader-design.test.js && node test/theme.test.js && node test/release-check.test.js && node test/wave-overflow.test.js",
+    "test": "node test/md2doc.test.js && node test/highlight.test.js && node test/blockmap.test.js && node test/drawio.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/block-catalog.test.js && node test/code-edit.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/cell-range.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/table-anchor-recovery.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/asset.test.js && node test/paste-md.test.js && node test/patchmap.test.js && node test/wave-codec.test.js && node test/wave-draw.test.js && node test/wave-geometry.test.js && node test/wave-store.test.js && node test/editor-journey.test.js && node test/detach-census.test.js && node test/editor-arrow-nav.test.js && node test/editor-cell-range.test.js && node test/reader-design.test.js && node test/theme.test.js && node test/theme-runtime.test.js && node test/release-check.test.js && node test/wave-overflow.test.js",
     "test:browser": "node test/reader-click.test.js && node test/editor-click.test.js && node test/wave-canvas.test.js"
   },
   "repository": {