fix(sync): improve raw editor and preview scroll synchronization

[ThisIs-Developer]

What changed

• Replaced ratio-only editor/preview scroll sync with source-block anchored synchronization.
• Annotated rendered preview top-level blocks with Markdown source line metadata after sanitized preview commit.
• Added interpolation between neighboring source anchors so content after tall rendered blocks aligns correctly.
• Added explicit top/bottom boundary anchoring so the paired pane reaches its own document edge when the active pane reaches top or bottom.
• Added image load, preview resize, and window resize refresh hooks for async height changes.
• Regenerated the Neutralino desktop resource copy from the root app script.

Why it changed

The old sync mapped editor and preview scroll positions by total scroll percentage only. That breaks when one short Markdown line renders into a tall preview block, such as an image, diagram, table, code block, ABC/STL preview, or other visual renderer. After the tall block, the next section could drift or jump because the raw and rendered heights no longer matched.

A follow-up issue also showed an end-of-document mismatch: the rendered preview could reach the bottom while the raw editor remained around the middle of a long Graphviz/DOT source block. The sync now treats top and bottom boundaries as hard anchors before using block mapping.

New synchronization approach

Priority order:

1. Top/bottom boundary anchoring with a 12px threshold.
2. Source-line/block mapping.
3. Interpolation between mapped blocks.
4. Percentage sync only as last fallback.

Implementation details:

• Build a lightweight Markdown source block map for headings, paragraphs, fenced blocks, tables, lists, blockquotes, and frontmatter.
• Attach data-source-start, data-source-end, and data-source-line to committed preview blocks without changing rendered Markdown output.
• Sync editor-to-preview by first checking editor top/bottom, then finding the source line at the top of the textarea and interpolating to the matching preview anchor.
• Sync preview-to-editor by first checking preview top/bottom, then finding the visible preview anchor segment and interpolating back to the corresponding source line.
• Use scroll-source locks to prevent feedback loops.

Files changed

• script.js
• desktop-app/resources/js/script.js

Testing

• node --check script.js
• node --check desktop-app/resources/js/script.js
• git diff --check
• Local web server smoke test with python -m http.server 4173 --bind 127.0.0.1
• Browser automation in Chrome covering:
  • Open website
  • Type Markdown and render live preview
  • Long document sync
  • Large inline image sync
  • Content immediately after large image aligns at preview offset 0
  • Mermaid renders while sync remains stable
  • Table and code-block sample content remains rendered
  • ABC Notation block presence
  • STL preview block presence
  • Graphviz/DOT diagram presence
  • Editor-to-preview scrolling
  • Preview-to-editor scrolling with 0 line-scroll delta
  • Preview bottom sends editor to bottom with 0 delta from max scroll
  • Editor bottom sends preview to bottom with 0 delta from max scroll
  • Preview top sends editor to top
  • Editor top sends preview to top
  • Fast scroll stability
  • Resize/narrow viewport stability
  • Sync toggle still prevents preview movement while disabled
• Screenshot regression case:
  • Used a long Graphviz/DOT document ending in 4. Complex Diagram (Data Structures & HTML Labels) with many raw DOT lines and compact rendered output.
  • Verified preview bottom -> editor bottom: editor delta from bottom 0.
  • Verified editor bottom -> preview bottom: preview delta from bottom 0.
  • Verified both panes sync to top from top boundary.
• Desktop generated script syntax check after node desktop-app/prepare.js

Known limitations

• Source mapping is intentionally heuristic for raw Markdown blocks. Custom raw HTML or renderer output that creates unexpected top-level nodes may use nearby anchors or fall back to percentage sync.
• If a pane has no scroll range at all, top and bottom are physically the same browser scroll position, so there is no distinct bottom scroll event to infer user intent from.
• Neutralino desktop was not launched interactively; the generated desktop script was refreshed and syntax-checked.

Scope notes

• No app branding, renderer output, export behavior, Share Snapshot, or Live Share behavior was changed.
• No new dependencies were added.
• Privacy/storage behavior was not changed.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
markdown-viwer	Ready	Preview, Comment	Jul 10, 2026 4:26pm

[cloudflare-workers-and-pages]

Deploying markdownviewer with    Cloudflare Pages

Latest commit:	a667992
Status:	✅  Deploy successful!
Preview URL:	https://8173ac34.markdownviewer.pages.dev
Branch Preview URL:	https://fix-markdown-preview-scroll.markdownviewer.pages.dev

View logs

[ThisIs-Developer]

Closing without merge per maintainer request.