@helping-ai-workflow/md2doc 3.11.0 → 3.12.0

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/package.json

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