@helping-ai-workflow/md2doc 2.4.1 → 2.4.2

package/lib/md2doc.js

@@ -1868,6 +1868,83 @@ ${mermaidInitTag}` : ''}
       setSidebarOpen(false);
     }
   });
+
+  // ── Zoom / resize scroll anchoring ────────────────────────────────────────
+  // Browser zoom (and any window resize) reflows the column but leaves the
+  // pixel scroll offset untouched, so the passage being read slides out of
+  // view. Remember what sat at the top of the reading column and put it back.
+  var ANCHOR_LINE = 80;
+  var contentEl = document.querySelector('main.content');
+  var anchorNode = null;
+  var anchorTop = 0;
+  var anchorFrame = 0;
+  var suppressAnchorCapture = false;
+  var lastLayoutWidth = document.documentElement.clientWidth;
+  var lastPixelRatio = window.devicePixelRatio;
+
+  function captureScrollAnchor() {
+    if (suppressAnchorCapture || !contentEl) return;
+    var rect = contentEl.getBoundingClientRect();
+    var hit = document.elementFromPoint(rect.left + rect.width / 2, ANCHOR_LINE);
+    var node = (hit && hit.closest) ? hit.closest('main.content > *') : null;
+    if (!node) {
+      // Between blocks, or over a gap: fall back to the last heading above the
+      // anchor line. Heading offsets are monotonic in document order, so this
+      // is a binary search rather than a scan of every heading each frame.
+      var lo = 0;
+      var hi = headingNodes.length - 1;
+      while (lo <= hi) {
+        var mid = (lo + hi) >> 1;
+        if (headingNodes[mid].getBoundingClientRect().top <= ANCHOR_LINE) {
+          node = headingNodes[mid];
+          lo = mid + 1;
+        } else {
+          hi = mid - 1;
+        }
+      }
+    }
+    if (!node) return;
+    anchorNode = node;
+    anchorTop = node.getBoundingClientRect().top;
+  }
+
+  function restoreScrollAnchor() {
+    if (!anchorNode || !anchorNode.isConnected) return;
+    var delta = anchorNode.getBoundingClientRect().top - anchorTop;
+    if (!delta) return;
+    window.scrollTo(window.scrollX, window.scrollY + delta);
+  }
+
+  window.addEventListener('scroll', function () {
+    if (anchorFrame) return;
+    anchorFrame = window.requestAnimationFrame(function () {
+      anchorFrame = 0;
+      captureScrollAnchor();
+    });
+  }, { passive: true });
+
+  window.addEventListener('resize', function () {
+    var width = document.documentElement.clientWidth;
+    var ratio = window.devicePixelRatio;
+    // A height-only change (a mobile browser hiding its toolbar, a devtools
+    // dock) reflows nothing, so correcting the scroll would only jerk the page.
+    if (width === lastLayoutWidth && ratio === lastPixelRatio) return;
+    lastLayoutWidth = width;
+    lastPixelRatio = ratio;
+    // Hold the anchor across the whole reflow: the scrollTo below fires scroll
+    // events that would otherwise re-capture a mid-reflow position.
+    suppressAnchorCapture = true;
+    restoreScrollAnchor();
+    window.requestAnimationFrame(function () {
+      restoreScrollAnchor();
+      window.requestAnimationFrame(function () {
+        suppressAnchorCapture = false;
+        captureScrollAnchor();
+      });
+    });
+  });
+
+  captureScrollAnchor();
 })();
 </script>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, and Graphviz support",
   "keywords": [
     "markdown",
@@ -36,7 +36,7 @@
   },
   "scripts": {
     "preinstall": "node scripts/preinstall.js",
-    "test": "node test/md2doc.test.js && node test/images.test.js && node test/cli.test.js && node test/code-operator.test.js"
+    "test": "node test/md2doc.test.js && node test/images.test.js && node test/scroll-anchor.test.js && node test/cli.test.js && node test/code-operator.test.js"
   },
   "repository": {
     "type": "git",