@helping-ai-workflow/md2doc 3.9.0 → 3.10.0

package/lib/theme/runtime.js

@@ -40,7 +40,10 @@
   var bar = document.getElementById('mobile-bar');
   var phone = window.matchMedia('(max-width: 1080px)');
   function place() {
-    if (bar && phone.matches) { if (btn.parentNode !== bar) bar.appendChild(btn); }
+    // Edit mode hides #mobile-bar; a button moved into it would vanish, so the
+    // bar has to be on screen, not merely in the DOM.
+    var barShown = bar && getComputedStyle(bar).display !== 'none';
+    if (barShown && phone.matches) { if (btn.parentNode !== bar) bar.appendChild(btn); }
     else if (btn.parentNode !== document.body) document.body.appendChild(btn);
   }
   if (phone.addEventListener) phone.addEventListener('change', place); else if (phone.addListener) phone.addListener(place);
@@ -135,8 +138,83 @@
       showMermaid(false);
       if (isDark()) showMermaid(true);
     });
-    onTheme(showMermaid);
   }
+  // Registered even with no mermaid at load: an edit can add the first one
+  // (showMermaid() itself returns early while there is none).
+  onTheme(showMermaid);
+
+  // v3.10.0: the editor rebuilds the blocks an edit touched and hands the new
+  // .mermaid hosts to __md2docInitDiagrams (lib/md2doc.js). Those hosts are not
+  // in `mermaids` (captured at load), so they used to be drawn by mermaid's own
+  // init with whatever config was set last — light — and then picked up the
+  // generic recolour of a light-drawn svg: transparent node fills in dark.
+  // __md2docInitDiagrams now calls this instead. It re-reads the hosts in the
+  // document, carries every unchanged host's cached light/dark markup over,
+  // and draws only the new ones, in the theme on screen, on the same chain a
+  // toggle uses. The other theme is drawn for them the next time it is asked
+  // for (cached() is false while any entry is missing).
+  var freshSeq = 0;
+  function adoptMermaids() {
+    var now = [].slice.call(document.querySelectorAll('.content .mermaid'));
+    var at = new Map();
+    mermaids.forEach(function (el, i) { at.set(el, i); });
+    function carry(r) { return r ? now.map(function (el) { return at.has(el) ? r[at.get(el)] : undefined; }) : null; }
+    rendered = { light: carry(rendered.light), dark: carry(rendered.dark) };
+    var fresh = now.filter(function (el) { return !at.has(el); });
+    fresh.forEach(function (el) { if (!el.hasAttribute('data-md2doc-src')) el.setAttribute('data-md2doc-src', el.textContent); });
+    mermaids = now;
+    hasMermaid = now.length > 0;
+    return fresh;
+  }
+  function drawFresh(els, theme) {
+    window.mermaid.initialize(mermaidConfig(theme));
+    var p = Promise.resolve();
+    els.forEach(function (el) {
+      p = p.then(function () {
+        var i = mermaids.indexOf(el);
+        if (i < 0) return;
+        var id = 'md2doc-mermaid-' + theme + '-new-' + (++freshSeq);
+        var src = el.getAttribute('data-md2doc-src');
+        return window.mermaid.render(id, src).then(function (res) {
+          el.innerHTML = res.svg;
+          if (res.bindFunctions) res.bindFunctions(el);
+          el.setAttribute('data-processed', 'true');
+          var svg = el.querySelector('svg');
+          if (svg && theme === 'dark') { svg.setAttribute('data-md2doc-recoloured', ''); svg.setAttribute('data-md2doc-live', ''); }
+          if (rendered[theme]) rendered[theme][i] = el.innerHTML;
+        }, function () {
+          var stray = document.getElementById('d' + id);
+          if (stray && stray.parentNode) stray.parentNode.removeChild(stray);
+          // A broken diagram shows mermaid's own error box, drawn light (the
+          // observer gives it the full recolour in dark), like drawLight().
+          window.mermaid.initialize(mermaidConfig('light'));
+          el.removeAttribute('data-processed');
+          el.textContent = src;
+          return window.mermaid.run({ nodes: [el] }).catch(function () {});
+        });
+      });
+    });
+    return p.then(function () { window.mermaid.initialize(mermaidConfig('light')); });
+  }
+  // The re-read itself waits its turn on the chain: a full drawLight() /
+  // drawDark() already running indexes `mermaids` and `rendered` by the
+  // order it started with, so swapping either under it would file one host's
+  // markup under another (and store a new host's source text as its light
+  // render). Until its turn, a new host simply shows its source text.
+  window.__md2docThemeMermaid = function () {
+    if (typeof window.mermaid === 'undefined') return false;
+    inFlight++;
+    chain = chain.then(function () {
+      var fresh = adoptMermaids();
+      if (!fresh.length) return;
+      var theme = isDark() ? 'dark' : 'light';
+      mermaidShown = theme;
+      return drawFresh(fresh, theme);
+    })
+      .catch(function () { /* each host already fell back to mermaid's own error box */ })
+      .then(function () { inFlight--; });
+    return true;
+  };
 
   // ── graphviz / WaveDrom / baked SVG: recolour by computed colour ──
   // Rules: spec "Diagram recolour rules (D10)". Reading COMPUTED fill/stroke

package/lib/theme/tokens.js

@@ -37,6 +37,69 @@ const THEME_TOKENS = [
   { name: 'code', light: ['#b93a0c'], dark: '#ff9f70' },
   { name: 'accent-soft', light: ['#93c5fd'], dark: '#6ea8f5' },
   { name: 'error', light: ['#b91c1c'], dark: '#ff8a8a' },
+  // v3.10.0 editor chrome. `direct`: referenced only as var(--md-<name>) in
+  // the editor CSS, never by literal, so a light value that happens to equal a
+  // reader literal ('#ffffff') cannot steal it — see LITERAL_TO_TOKEN below.
+  { name: 'ed-chrome', light: ['#ffffff'], dark: '#1b1b1d', direct: true },
+  { name: 'ed-surface', light: ['#ffffff'], dark: '#2a2a2d', direct: true },
+  { name: 'ed-ring', light: ['rgba(31, 35, 40, 0.12)'], dark: 'rgba(255, 255, 255, 0.10)', direct: true },
+  { name: 'ed-shadow', light: ['rgba(31, 35, 40, 0.10)'], dark: 'rgba(0, 0, 0, 0.55)', direct: true },
+  { name: 'ed-hover', light: ['#f3f5f7'], dark: '#303134', direct: true },
+  { name: 'ed-glyph', light: ['#8c959f'], dark: '#7d8086', direct: true },
+  { name: 'ed-field', light: ['#f6f8fa'], dark: '#232325', direct: true },
+  { name: 'ed-sel', light: ['rgba(9, 105, 218, 0.10)'], dark: 'rgba(110, 168, 245, 0.16)', direct: true },
+  { name: 'ed-range', light: ['rgba(9, 105, 218, 0.14)'], dark: 'rgba(110, 168, 245, 0.20)', direct: true },
+  { name: 'ed-err', light: ['#cf222e'], dark: '#ff8a8a', direct: true },
+  { name: 'ed-err-bg', light: ['#ffebe9'], dark: '#3a2224', direct: true },
+  { name: 'ed-err-ink', light: ['#82071e'], dark: '#ffc9c9', direct: true },
+  { name: 'ed-ok', light: ['#1a7f37'], dark: '#6fdd8b', direct: true },
+  { name: 'ed-dirty', light: ['#9a6700'], dark: '#e3b341', direct: true },
+  // v3.10.0 fenced-code syntax colour (lib/highlight.js; .hljs-* rules), the
+  // GitHub palette. Direct: written as var(--md-syn-*) in the CSS.
+  { name: 'syn-keyword', light: ['#cf222e'], dark: '#ff7b72', direct: true },
+  { name: 'syn-number', light: ['#0550ae'], dark: '#79c0ff', direct: true },
+  { name: 'syn-comment', light: ['#656d76'], dark: '#8b949e', direct: true },
+  { name: 'syn-string', light: ['#0a3069'], dark: '#a5d6ff', direct: true },
+  { name: 'syn-type', light: ['#953800'], dark: '#ffa657', direct: true },
+  { name: 'syn-title', light: ['#8250df'], dark: '#d2a8ff', direct: true },
+  // v3.10.0 waveform editor (editModeLayoutCss .ed-wave-*). Literal roles: the
+  // wave CSS keeps its literals and applyThemeTokens rewrites them. Every one
+  // of these literals is used by no reader rule (measured 2026-10-04).
+  { name: 'wave-accent', light: ['#1a73e8'], dark: '#6ea8f5' },
+  { name: 'wave-rule', light: ['#e2e2e2'], dark: '#38393c' },
+  { name: 'wave-ink', light: ['#111'], dark: '#e3e3e3' },
+  { name: 'wave-mut', light: ['#555'], dark: '#a3a6ab' },
+  { name: 'wave-edge', light: ['#0041c4'], dark: '#79b0f6' },
+  { name: 'wave-strong', light: ['#222'], dark: '#f5f6f7' },
+  { name: 'wave-grid', light: ['#ececec'], dark: '#303134' },
+  { name: 'wave-faint', light: ['#aaa'], dark: '#7d8086' },
+  { name: 'wave-text', light: ['#333'], dark: '#e3e3e3' },
+  { name: 'wave-border', light: ['#bbb'], dark: '#505257' },
+  { name: 'wave-border-2', light: ['#888'], dark: '#7d8086' },
+  { name: 'wave-field', light: ['#f6f6f6'], dark: '#232325' },
+  { name: 'wave-warn-ink', light: ['#7a4b00'], dark: '#e3b341' },
+  { name: 'wave-panel', light: ['#fafafa'], dark: '#232325' },
+  { name: 'wave-control', light: ['#c4c4c4'], dark: '#46484c' },
+  { name: 'wave-mut-2', light: ['#666'], dark: '#a3a6ab' },
+  { name: 'wave-warn-bg', light: ['#fff6e0'], dark: '#3a3020' },
+  { name: 'wave-warn-line', light: ['#e8c987'], dark: '#6e5e14' },
+  { name: 'wave-err-ink', light: ['#7a1f00'], dark: '#ffb4a0' },
+  { name: 'wave-err-bg', light: ['#ffe9e0'], dark: '#3a2420' },
+  { name: 'wave-err-line', light: ['#e8a987'], dark: '#7a3b2a' },
+  { name: 'wave-sel-bg', light: ['#eaf2fe'], dark: '#24364f' },
+  { name: 'wave-group-line', light: ['#d8d8d8'], dark: '#46484c' },
+  { name: 'wave-group-bg', light: ['#f2f2f2'], dark: '#2a2a2d' },
+  { name: 'wave-x', light: ['#d9d9d9'], dark: '#505257' },
+  { name: 'wave-bus', light: ['#f5e9c8'], dark: '#4a4128' },
+  { name: 'wave-bus-3', light: ['#d8ead3'], dark: '#2f4a2b' },
+  { name: 'wave-bus-4', light: ['#d6e4f7'], dark: '#26384f' },
+  { name: 'wave-bus-5', light: ['#f7d6e4'], dark: '#4a2c3a' },
+  { name: 'wave-cursor', light: ['#d93025'], dark: '#ff8a8a' },
+  { name: 'wave-status', light: ['#444'], dark: '#a3a6ab' },
+  { name: 'wave-caption', light: ['#8a8a8a'], dark: '#a3a6ab' },
+  // .ed-wave-parse-message's red (the .ed-conflict banner used it too until
+  // v3.10.0 moved the banner onto the direct ed-err-* roles).
+  { name: 'wave-err', light: ['#b00020'], dark: '#ff8a8a' },
 ];
 
 // Literals in reader rules that deliberately stay literal. Measured on real
@@ -48,9 +111,15 @@ const KEEP_LITERALS = ['#000', '#dbeafe'];
 // Content links: today they use the browser default, which stays in light.
 const LINK_DARK = '#79b0f6';
 
-// Rules whose literals stay literal: the editor's own UI (edit mode is light
-// only) and the lightbox, which is a dark overlay already.
-const SKIP_SELECTOR = /(^|[\s,>+~(])(html\.ed-|\.ed-|\.lightbox)/;
+// Rules whose literals stay literal: the lightbox, which is a dark overlay
+// already. v3.10.0: the editor's own UI is themed (it used to be skipped).
+const SKIP_SELECTOR = /(^|[\s,>+~(])\.lightbox/;
+
+// rgba() literals the editor CSS keeps on purpose (normalised, no spaces).
+// Scrims and shadows are translucent black and work on both grounds; the
+// wave selection is a translucent blue. Anything else in an .ed- rule must be
+// a var() role — test/reader-design.test.js enforces it.
+const KEEP_RGBA = ['rgba(0,0,0,.35)', 'rgba(0,0,0,.45)', 'rgba(26,115,232,.18)'];
 
 const MERMAID_LIGHT_VARS = {
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Microsoft JhengHei", sans-serif',
@@ -63,7 +132,7 @@ const MERMAID_DARK_VARS = Object.assign({}, MERMAID_LIGHT_VARS, {
 });
 
 const LITERAL_TO_TOKEN = new Map();
-for (const t of THEME_TOKENS) for (const l of t.light) LITERAL_TO_TOKEN.set(l, t.name);
+for (const t of THEME_TOKENS) if (!t.direct) for (const l of t.light) LITERAL_TO_TOKEN.set(l, t.name);
 
 // Line-based on purpose: the reader CSS is one declaration per line or one
 // rule per line, and a line-based pass leaves comment prose (which names
@@ -135,6 +204,6 @@ function applyReaderTheme(html) {
 }
 
 module.exports = {
-  THEME_TOKENS, KEEP_LITERALS, LINK_DARK, MERMAID_LIGHT_VARS, MERMAID_DARK_VARS,
+  THEME_TOKENS, KEEP_LITERALS, KEEP_RGBA, LINK_DARK, MERMAID_LIGHT_VARS, MERMAID_DARK_VARS,
   applyThemeTokens, themeCss, applyReaderTheme,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, Graphviz, and draw.io support",
   "keywords": [
     "markdown",
@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@hpcc-js/wasm-graphviz": "1.22.0",
+    "highlight.js": "11.11.1",
     "katex": "^0.16.47",
     "marked": "^14.1.0",
     "marked-katex-extension": "^5.1.10",
@@ -45,8 +46,8 @@
   },
   "scripts": {
     "preinstall": "node scripts/preinstall.js",
-    "test": "node test/md2doc.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/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/docsource.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/wave-rail-clearance.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",
-    "test:browser": "node test/reader-click.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/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/wave-rail-clearance.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",
+    "test:browser": "node test/reader-click.test.js && node test/editor-click.test.js"
   },
   "repository": {
     "type": "git",

package/lib/editor/docsource.js

@@ -1,115 +0,0 @@
-'use strict';
-/* UMD, same shape as convert-md.js / lineops.js: `require`-able in node for
-   the unit tests, and injected into the editor page as
-   `window.md2docDocSource` (lib/editor/server.js). client.js is inlined
-   into the page as a plain <script>, not bundled, so a bare top-level
-   require('./docsource.js') there would be an undefined identifier in the
-   browser and would kill the whole injected script. */
-(function (root, factory) {
-  if (typeof module === 'object' && module.exports) module.exports = factory();
-  else root.md2docDocSource = factory();
-})(typeof self !== 'undefined' ? self : this, function () {
-
-// Pure state machine + lines[]<->string conversion for the "追加 4 全文原始碼
-// 逃生口" (whole-document source escape hatch): 編輯 ⇄ 原始碼.
-// v3.2.1: 預覽（preview）已移除，見下方 MODES 上的說明。
-//
-// EOL representation: `eol` is always a single literal separator string --
-// '\n', '\r\n' or '\r' -- the same convention server.js already establishes
-// at load time (majority-vote across the file, ties go to '\n'; see
-// server.js's `eol` derivation next to its own `mdText.split(/\r\n|\r|\n/)`).
-// This module does not re-derive eol and does not guess per-line; it is
-// handed the file's one canonical eol and uses it for every join.
-//
-// Splitting, though, is always done with the UNIVERSAL three-way regex
-// `/\r\n|\r|\n/`, never with a literal `eol`-only split. Two reasons:
-//   1. Symmetry with how `lines[]` was produced in the first place
-//      (server.js:154) -- if load used the universal regex, from-source
-//      must use the same one, or a file whose canonical eol is '\r\n' but
-//      whose textarea content picked up a stray '\n' (browsers normalize
-//      textarea .value to '\n' on some paste paths) would silently lose a
-//      line instead of being read back correctly.
-//   2. `\r\n` is listed before the two single-character alternatives, so a
-//      CRLF pair is always consumed as ONE separator, never split into a
-//      spurious blank line between a lone \r and a lone \n.
-const MODES = ['edit', 'source'];
-
-// v3.2.1: 兩態循環 edit <-> source。preview 移除 —— 實測它相對 edit 只做
-// 兩件事（applyPreviewEditability(false) 與兩行隱藏 ⠿／＋ 的 CSS），卻擋在
-// source 回 edit 的路上，而且 22 顆工具列按鈕中 13 顆在它底下仍然寫得進磁碟。
-//
-// 為什麼是移除而不是加閘門：一個「列舉可及面」推導出來的唯讀閘門必然漏掉
-// 一整族 —— 切換前就已經開著的 ⠿ 選單在切換後仍是 140x118、display:flex，
-// 其 16 個項目每一個都寫得進磁碟。閘門要約 8 個守衛點跨 2 個檔案才擋得住，
-// 而 preview 本身沒有任何 edit 給不了的能力。
-//
-// An unrecognized mode (defensive: a caller passing something stale) falls
-// back to the first state rather than throwing, matching how the rest of
-// this module prefers a safe default over a thrown exception for malformed
-// input.
-function next(mode) {
-  const idx = MODES.indexOf(mode);
-  return MODES[(idx + 1) % MODES.length];
-}
-
-// lines[] -> the whole document as one string, for seeding the source
-// textarea. `lines` mirrors the app's canonical model (server.js's
-// `mdText.split(/\r\n|\r|\n/)`): a trailing '' entry represents a final
-// trailing newline in the source file, no trailing '' entry represents a
-// file with no trailing newline. Plain join reproduces exactly that.
-function toSource(lines, eol) {
-  const arr = Array.isArray(lines) ? lines : [];
-  const sep = typeof eol === 'string' && eol !== '' ? eol : '\n';
-  return arr.join(sep);
-}
-
-function linesEqual(a, b) {
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i += 1) {
-    if (a[i] !== b[i]) return false;
-  }
-  return true;
-}
-
-// string -> {lines, changed}, the inverse of toSource. `lines` is always a
-// faithful parse of `text` (universal-regex split, see the module header),
-// independent of `prevLines` -- what `prevLines` controls is only the
-// `changed` flag's meaning, per the plan-owner ruling below.
-//
-// CONTRACT (plan-owner ruling, fix round 1 -- do not "optimize" this back):
-// `prevLines` is the lines[] the source textarea was seeded from -- the
-// pre-edit state a real caller (client.js) always has on hand when it
-// calls this on the way OUT of source mode. `prevLines` is optional in
-// ARITY ONLY, so the name `fromSource(text, eol)` and every two-arg call
-// site keep parsing correctly; it is NOT optional in the sense of "safe to
-// omit and get a sensible answer for `changed`":
-//
-//   - `prevLines` GIVEN (array): `changed` is a real content diff against
-//     it (`!linesEqual(lines, prevLines)`). This is the only form that can
-//     tell "the user edited a line" apart from "untouched," and it is the
-//     form the integration task (client.js) must call.
-//   - `prevLines` OMITTED: `changed` is unconditionally `true`.
-//
-// Why `true` and not a "did this round-trip cleanly" fidelity check (the
-// round 1 defect): a pure function of `(text, eol)` alone has nothing to
-// diff an edit against, and a same-eol in-place character edit -- the
-// overwhelming majority of real edits -- round-trips through split+join
-// exactly as cleanly as untouched text does. A fidelity-based `changed`
-// therefore reports `false` (unchanged) for most real edits too, and the
-// caller's contract is "changed: false means do not write the file" --
-// which silently discards the user's edit. That is a data-loss default.
-// `changed: true` is the fail-safe direction: the unknown case reads as
-// "assume it was edited," so the caller writes; the worst case is one
-// needless write of byte-identical content, never a dropped edit.
-function fromSource(text, eol, prevLines) {
-  // `eol` is accepted for API symmetry with `toSource(lines, eol)` and is
-  // NOT used here: parsing is always the universal three-way split (module
-  // header), never a literal-`eol` split, so there is nothing for it to do.
-  const s = typeof text === 'string' ? text : String(text == null ? '' : text);
-  const lines = s.split(/\r\n|\r|\n/);
-  const changed = Array.isArray(prevLines) ? !linesEqual(lines, prevLines) : true;
-  return { lines, changed };
-}
-
-return { MODES, next, toSource, fromSource };
-});