@helping-ai-workflow/md2doc 3.11.0 → 3.12.1

package/lib/editor/wave-ui.js

@@ -1552,6 +1552,12 @@
       panels.say('已匯出 ' + exportName('svg'));
     }
 
+    // PNG is rasterised at twice the SVG's own size: at 1x a 300-480px wide
+    // diagram goes soft the moment it is pasted into a slide or shown on a
+    // high-density screen (wave redesign spec section 5-7). The SVG is drawn
+    // at the target size, so lines and text are re-rasterised, not upscaled.
+    const PNG_SCALE = 2;
+
     function exportPng() {
       const text = exportSvgText();
       if (text === '') { panels.say('預覽還沒畫出來，沒有東西可以匯出'); return; }
@@ -1568,14 +1574,14 @@
       const img = d.createElement('img');
       img.onload = function () {
         const cv = d.createElement('canvas');
-        cv.width = w; cv.height = h;
+        cv.width = w * PNG_SCALE; cv.height = h * PNG_SCALE;
         const ctx2 = cv.getContext('2d');
         // The SVG's own background rect is white, but only over its own box;
         // painting white first means a PNG dropped into a dark-themed document
         // does not show that document's background through the margins.
         ctx2.fillStyle = '#ffffff';
-        ctx2.fillRect(0, 0, w, h);
-        ctx2.drawImage(img, 0, 0);
+        ctx2.fillRect(0, 0, cv.width, cv.height);
+        ctx2.drawImage(img, 0, 0, cv.width, cv.height);
         cv.toBlob(function (blob) {
           if (blob === null) { panels.say('PNG 轉檔失敗'); return; }
           downloadBlob(blob, exportName('png'));

package/lib/md2doc.js

@@ -443,6 +443,8 @@ const READER_ICONS = {
   up: ICON_SVG_OPEN + '<path d="m18 15-6-6-6 6"/></svg>',
   down: ICON_SVG_OPEN + '<path d="m6 9 6 6 6-6"/></svg>',
   x: ICON_SVG_OPEN + '<path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
+  copy: ICON_SVG_OPEN + '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',
+  check: ICON_SVG_OPEN + '<path d="M20 6 9 17l-5-5"/></svg>',
 };
 
 async function renderMarkdown(mdText, srcPath, opts = {}) {
@@ -1045,9 +1047,16 @@ ${itemsHtml}
       // The info string goes into an attribute: escape it (an info string such
       // as x" onmouseover=… must stay text). Ordinary language names are unchanged.
       const langAttr = escapeHtml(lang);
-      if (coloured !== null) return `<pre><code class="language-${langAttr} hljs">${coloured}</code></pre>\n`;
-      const escaped = code.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-      return `<pre><code class="language-${langAttr}">${escaped}</code></pre>\n`;
+      const pre = coloured !== null
+        ? `<pre><code class="language-${langAttr} hljs">${coloured}</code></pre>`
+        : `<pre><code class="language-${langAttr}">${code.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}</code></pre>`;
+      // v3.12.0: the reader's copy button. It sits on a wrapper beside the
+      // <pre>, not inside it — <pre> scrolls sideways and would carry the
+      // button off with the code. Icon only: a text label would be picked up
+      // by search and by select-all. Never in edit mode, where it would land
+      // inside the editable surface.
+      if (opts.editMode) return pre + '\n';
+      return `<div class="code-block">${pre}<button class="code-copy" type="button" aria-label="Copy code" title="Copy code">${READER_ICONS.copy}</button></div>\n`;
     };
 
     renderer.heading = function(token) {
@@ -2890,6 +2899,32 @@ const html = `<!DOCTYPE html>
     line-height: 1.45;
   }
   pre code { background: none; padding: 0; font-size: 0.875em; }
+  /* v3.12.0: the copy button renderer.code puts beside each fenced block.
+     The wrapper takes over the margin the pre used to have, so the spacing
+     around a block does not move. The button hides at rest and shows on
+     hover, on keyboard focus and after a press; a touch screen has no hover,
+     so there it always shows. Colours are existing reader literals, so the
+     theme post-pass carries them into dark mode. */
+  .code-block { position: relative; margin: 1em 0; }
+  .code-block > pre { margin: 0; }
+  .code-copy {
+    position: absolute; top: 8px; right: 8px;
+    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+    height: 30px; min-width: 30px; padding: 0 7px;
+    border: 1px solid #d0d7de; border-radius: 6px;
+    background: #ffffff; color: #57606a;
+    font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
+    opacity: 0; transition: opacity 0.12s;
+  }
+  .code-block:hover .code-copy,
+  .code-copy:focus-visible,
+  .code-block.is-copied .code-copy,
+  .code-block.is-manual .code-copy { opacity: 1; }
+  .code-copy:hover { background: #eef2f6; color: #24292e; }
+  .code-copy:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; }
+  .code-block.is-copied .code-copy { color: #0969da; }
+  @media (hover: none) { .code-copy { opacity: 1; } }
+  @media (prefers-reduced-motion: reduce) { .code-copy { transition: none; } }
   /* v3.10.0: fenced-code syntax colour, written at render time by
      lib/highlight.js (no script on the page). Colours are the syn-* roles. */
   .hljs-keyword, .hljs-selector-tag, .hljs-literal { color: var(--md-syn-keyword); }
@@ -3276,6 +3311,7 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
     .content table tbody td:first-child,
     .content table thead th:first-child { position: static; }
     .heading-anchor { display: none; }
+    .code-copy { display: none; }
     pre  { font-size: 9pt; }
     a[href]:after { content: none; }
   }
@@ -6010,6 +6046,55 @@ ${usesDrawioMultiPage ? `  // v3.4.0 batch2 Task 6: wired through a NAMED, reusa
     var shown = lightboxCanvas.firstElementChild;
     lightboxFitZoom = computeLightboxFit(!!(shown && shown.tagName.toLowerCase() === 'svg'));
   });
+
+  // v3.12.0: copy button on fenced code (renderer.code emits it; edit mode
+  // does not). Delegated from document, so the edit page's wholesale
+  // re-render of .content needs no rebind. The clipboard API first; then
+  // execCommand over a selection of the code; and when both are refused the
+  // code stays selected and the button says which keys to press.
+  var CODE_COPY_RESET_MS = 2000;
+  var CODE_COPY_DONE = '${READER_ICONS.check}<span>Copied</span>';
+  var CODE_COPY_KEYS = /Mac|iPhone|iPad/.test(navigator.platform || '') ? 'Press Cmd+C' : 'Press Ctrl+C';
+  function showCodeCopyResult(btn, wrap, ok) {
+    if (btn.__md2docIcon === undefined) btn.__md2docIcon = btn.innerHTML;
+    clearTimeout(btn.__md2docReset);
+    wrap.classList.toggle('is-copied', ok);
+    wrap.classList.toggle('is-manual', !ok);
+    btn.innerHTML = ok ? CODE_COPY_DONE : '<span>' + CODE_COPY_KEYS + '</span>';
+    btn.setAttribute('aria-label', ok ? 'Copied' : CODE_COPY_KEYS);
+    btn.__md2docReset = setTimeout(function () {
+      wrap.classList.remove('is-copied', 'is-manual');
+      btn.innerHTML = btn.__md2docIcon;
+      btn.setAttribute('aria-label', 'Copy code');
+    }, CODE_COPY_RESET_MS);
+  }
+  function copyCodeBlock(btn) {
+    var wrap = btn.closest('.code-block');
+    var code = wrap && wrap.querySelector('pre > code');
+    if (!code) return;
+    function bySelection() {
+      var range = document.createRange();
+      range.selectNodeContents(code);
+      var sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+      var ok = false;
+      try { ok = document.execCommand('copy'); } catch (e) { ok = false; }
+      if (ok) sel.removeAllRanges();
+      showCodeCopyResult(btn, wrap, ok);
+    }
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(code.textContent).then(function () {
+        showCodeCopyResult(btn, wrap, true);
+      }, bySelection);
+    } else {
+      bySelection();
+    }
+  }
+  document.addEventListener('click', function (event) {
+    var btn = event.target.closest && event.target.closest('.code-block > .code-copy');
+    if (btn) copyCodeBlock(btn);
+  });
 })();
 </script>
 </body>

package/lib/theme/runtime.js

@@ -259,6 +259,15 @@
     return 'hsl(' + Math.round(x[0]) + ', ' + Math.round(Math.min(x[1], smax) * 100) + '%, ' + Math.round(l * 100) + '%)';
   }
   function lineColour(c) { return hsl(c)[1] > 0.25 ? tone(c, 0.68, 0.8) : INK; }
+  // WaveDrom draws every edge label (and point note) as g > rect + text inside wavearcs_N, the
+  // white rect masking the edge and waveform behind the words. Made transparent like other
+  // near-white fills, the line runs straight through the text in dark; it takes the page
+  // colour instead. Only this shape: graphviz/mermaid white fills still go transparent.
+  function isWaveLabelBacking(el) {
+    var next = el.nextElementSibling;
+    return /^rect$/i.test(el.tagName) && next !== null && /^text$/i.test(next.tagName) &&
+      el.closest('[id^="wavearcs"]') !== null;
+  }
   function recolourSvg(svg, dark) {
     var els = svg.querySelectorAll('polygon, ellipse, path, polyline, rect, line, circle, text, tspan, foreignObject *');
     var live = svg.hasAttribute('data-md2doc-live');
@@ -305,7 +314,7 @@
       } else {
         if (fill && fill[3] > 0) {
           var L = lum(fill);
-          if (L > 0.85) ov += 'fill:transparent !important;';
+          if (L > 0.85) ov += isWaveLabelBacking(el) ? 'fill:var(--md-bg) !important;' : 'fill:transparent !important;';
           else if (L > 0.3) ov += 'fill:' + tone(fill, 0.26, 0.55) + ' !important;';
           else if (el.closest('g.edge, marker')) ov += 'fill:' + lineColour(fill) + ' !important;';
         }

package/package.json

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