@helping-ai-workflow/md2doc 3.15.0 → 3.16.0

package/lib/md2doc.js

@@ -467,6 +467,7 @@ const READER_ICONS = {
   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>',
+  camera: ICON_SVG_OPEN + '<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>',
 };
 
 async function renderMarkdown(mdText, srcPath, opts = {}) {
@@ -1492,7 +1493,8 @@ ${itemsHtml}
       <div class="toc-header-actions">
         <button id="toc-expand-all" type="button" aria-label="Expand all" title="Expand all">${READER_ICONS.unfold}</button>
         <button id="toc-collapse-all" type="button" aria-label="Collapse all" title="Collapse all">${READER_ICONS.fold}</button>
-        <button id="toc-collapse-toggle" type="button" aria-label="Collapse table of contents" title="Collapse / expand sidebar">${READER_ICONS.panel}</button>
+${opts.editMode ? '' : `        <button id="capture-mode-toggle" type="button" aria-label="Screenshot mode" title="Screenshot mode (Esc to exit)">${READER_ICONS.camera}</button>
+`}        <button id="toc-collapse-toggle" type="button" aria-label="Collapse table of contents" title="Collapse / expand sidebar">${READER_ICONS.panel}</button>
       </div>
       <div class="toc-breadcrumb" data-toc-breadcrumb aria-label="Current location"></div>
     </div>
@@ -2411,7 +2413,8 @@ const html = `<!DOCTYPE html>
      TOC-list buttons (no list to act on) and shrink padding so the toggle
      fits inside the rail instead of being clipped by overflow:hidden. */
   body[data-toc-collapsed] #toc-expand-all,
-  body[data-toc-collapsed] #toc-collapse-all {
+  body[data-toc-collapsed] #toc-collapse-all,
+  body[data-toc-collapsed] #capture-mode-toggle {
     display: none;
   }
   body[data-toc-collapsed] .toc {
@@ -2881,6 +2884,42 @@ const html = `<!DOCTYPE html>
     min-width: 0;
     flex: 1 1 auto;
   }
+  /* Screenshot mode (v3.16.0). A scroll-and-stitch full-page capture
+     (FireShot and the like) glues one slice per screen, so whatever stays put
+     while the page scrolls lands on every slice: hide all of it, and keep the
+     column at the width it was read at (--md2doc-capture-w, measured on
+     entry), centred, so its lines break as they did. */
+  body[data-capture-mode] .reader-sidebar,
+  body[data-capture-mode] .sidebar-splitter,
+  body[data-capture-mode] .sidebar-scrim,
+  body[data-capture-mode] .mobile-bar,
+  body[data-capture-mode] .md2doc-theme-toggle {
+    display: none;
+  }
+  body[data-capture-mode] .page-layout {
+    display: block;
+  }
+  body[data-capture-mode] main.content {
+    box-sizing: border-box;
+    width: var(--md2doc-capture-w, auto);
+    max-width: 100%;
+    margin: 0 auto;
+  }
+  .capture-toast {
+    position: fixed;
+    top: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 300;
+    padding: 8px 16px;
+    border-radius: 999px;
+    background: #24292e;
+    color: #ffffff;
+    font-size: 14px;
+    line-height: 1.4;
+    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
+    pointer-events: none;
+  }
   .content p,
   .content li,
   .content blockquote,
@@ -5057,6 +5096,45 @@ ${mermaidInitTag}`)
       setSidebarOpen(false);
     }
   });
+
+  // ── Screenshot mode (v3.16.0): only the document, for a full-page capture ──
+  // The CSS beside '.capture-toast' hides everything that stays put while the
+  // page scrolls. The column keeps the width measured here, so nothing reflows
+  // and the reading position holds. Esc leaves; a reload never comes back in it.
+  const captureBtn = document.getElementById('capture-mode-toggle');
+  let captureToastTimer = 0;
+  function setCaptureMode(on) {
+    clearTimeout(captureToastTimer);
+    const oldToast = document.querySelector('.capture-toast');
+    if (oldToast) oldToast.remove();
+    if (!on) {
+      document.body.removeAttribute('data-capture-mode');
+      document.body.style.removeProperty('--md2doc-capture-w');
+      return;
+    }
+    setSidebarOpen(false);
+    const w = document.querySelector('main.content').getBoundingClientRect().width;
+    document.body.style.setProperty('--md2doc-capture-w', w + 'px');
+    document.body.setAttribute('data-capture-mode', '');
+    const toast = document.createElement('div');
+    toast.className = 'capture-toast';
+    toast.setAttribute('role', 'status');
+    toast.textContent = 'Screenshot mode — press Esc or reload to exit';
+    document.body.appendChild(toast);
+    // Gone before the capture tool scrolls, or it would be on every slice too.
+    captureToastTimer = setTimeout(() => toast.remove(), 2000);
+  }
+  if (captureBtn) {
+    captureBtn.addEventListener('click', () => setCaptureMode(true));
+  }
+  // Registered ahead of the lightbox's own Esc handler, which closes the
+  // diagram: while one is open, its Esc is the lightbox's and the mode stays.
+  document.addEventListener('keydown', (event) => {
+    if (lightboxIsOpen()) return;
+    if (event.key === 'Escape' && document.body.hasAttribute('data-capture-mode')) {
+      setCaptureMode(false);
+    }
+  });
   document.addEventListener('click', (event) => {
     if (!document.body.hasAttribute('data-sidebar-open')) return;
     if (!event.target || !event.target.closest) return;

package/package.json

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