@helping-ai-workflow/md2doc 3.15.0 → 3.16.1

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,70 @@ 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;
+  }
+  /* v3.16.1: a capture tool hides every sticky element after its first slice,
+     so a sticky first column came out blank from the second screen down. The
+     runtime also widens each box that scrolls sideways (fitWideBoxes); the
+     rules below are its last resort, for a box still wider than the screen. */
+  body[data-capture-mode] .content table tbody td:first-child,
+  body[data-capture-mode] .content table thead th:first-child {
+    position: static;
+  }
+  body[data-capture-mode] .content table.capture-wrap th:not(.cell-narrow),
+  body[data-capture-mode] .content table.capture-wrap td:not(.cell-narrow),
+  body[data-capture-mode] .content table.capture-wrap td:not(.cell-narrow) code {
+    white-space: normal;
+    overflow-wrap: break-word;
+    min-width: 0;
+  }
+  body[data-capture-mode] .content table.capture-wrap th,
+  body[data-capture-mode] .content table.capture-wrap td {
+    padding: 0.4em 0.6em;
+  }
+  body[data-capture-mode] .content pre.capture-wrap,
+  body[data-capture-mode] .content pre.capture-wrap code {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  body[data-capture-mode] .content .diagram-scroll.capture-wrap > svg {
+    max-width: 100% !important;
+    height: 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 +5124,85 @@ ${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;
+  // A capture tool only sees the part of a sideways-scrolling box that is in
+  // view, so each one (a wide table, a long code line, a wide diagram) is
+  // widened to its full width, centred on the screen, at most the screen less
+  // a 16px gutter each side; the prose keeps its reading width. One still too
+  // wide wraps (.capture-wrap), and a table still too wide after that gets
+  // smaller type. Each box's own style attribute is kept and put back on exit.
+  let captureFitted = [];
+  function fitWideBoxes() {
+    const vw = document.documentElement.clientWidth;
+    const boxes = document.querySelectorAll('main.content table, main.content pre, main.content .diagram-scroll');
+    for (const el of boxes) {
+      if (el.scrollWidth <= el.clientWidth + 1) continue;
+      captureFitted.push({ el: el, style: el.getAttribute('style') });
+      const w = Math.min(el.scrollWidth, vw - 32);
+      el.style.boxSizing = 'border-box';
+      el.style.width = w + 'px';
+      el.style.maxWidth = 'none';
+      const margin = parseFloat(getComputedStyle(el).marginLeft) || 0;
+      el.style.marginLeft = (margin + (vw - w) / 2 - el.getBoundingClientRect().left) + 'px';
+      if (el.scrollWidth > el.clientWidth + 1) el.classList.add('capture-wrap');
+      // Many columns on a narrow screen can stay too wide even wrapped: shrink
+      // the table's type (the wrap rule's cell padding is in em) until it fits.
+      let size = parseFloat(getComputedStyle(el).fontSize);
+      for (let i = 0; i < 8 && el.tagName === 'TABLE' && el.scrollWidth > el.clientWidth + 1; i++) {
+        size = size * el.clientWidth / el.scrollWidth * 0.98;
+        el.style.fontSize = size + 'px';
+      }
+    }
+  }
+  function unfitWideBoxes() {
+    for (const f of captureFitted) {
+      f.el.classList.remove('capture-wrap');
+      if (f.style === null) f.el.removeAttribute('style');
+      else f.el.setAttribute('style', f.style);
+    }
+    captureFitted = [];
+  }
+  function setCaptureMode(on) {
+    clearTimeout(captureToastTimer);
+    const oldToast = document.querySelector('.capture-toast');
+    if (oldToast) oldToast.remove();
+    if (!on) {
+      unfitWideBoxes();
+      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', '');
+    unfitWideBoxes();
+    fitWideBoxes();
+    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.1",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, Graphviz, and draw.io support",
   "keywords": [
     "markdown",