feat(sync): add Find Section navigation between editor and preview

[ThisIs-Developer]

What feature was added

Adds a new Find Section button to the existing Find & Replace panel. When active, users can click or select content in the raw Markdown editor or click rendered content in the preview to locate the matching section in the opposite pane.

Why it is needed

Ratio-based scroll sync can drift when a small Markdown source block renders into a large preview block, such as an image, table, code block, Mermaid/PlantUML/Graphviz/D2/Vega-Lite/WaveDrom/Markmap/ABC diagram, or STL preview. Find Section gives users a manual one-shot way to jump to the matching source or rendered block.

How Find Section works

• The Find Section button toggles a temporary section-pick mode and exposes aria-pressed state.
• The next editor or preview pick attempts to locate the matching opposite pane block.
• A successful locate scrolls the opposite pane, applies a temporary highlight, announces success, and exits pick mode.
• Escape, closing Find & Replace, switching tabs, switching view mode, or clicking Find Section again cancels pick mode.
• Empty/unknown picks show a non-blocking “Matching section not found.” message.

Editor-to-preview mapping

• Segmented preview blocks now preserve worker-provided startLine/endLine as data-source-line, data-source-start, and data-source-end.
• Full-render preview paths also stamp source ranges onto rendered top-level preview blocks, so external images and other content that bypass segmented rendering still have source metadata.
• Editor picks derive the closest source block from selected text, or from the click position in the textarea when no selection is active.
• The preview locator finds the exact overlapping mapped block, then falls back to nearest mapped block or proportional preview location.

Preview-to-editor mapping

• Preview clicks walk up to the nearest mapped rendered block.
• The source range is read from data-source-start/data-source-end.
• The editor scroll position is calculated using the existing wrapped-line geometry helpers.
• A temporary editor overlay highlight is drawn without changing Markdown content or the user selection.

Files changed

• index.html - adds the Find Section button to the Find & Replace UI.
• script.js - adds pick mode state, source-range stamping, editor/preview locate helpers, event handlers, and cancellation behavior.
• styles.css - adds button active styling, pick cursor styling, temporary highlights, and non-blocking locate message styling using existing tokens.

Manual tests performed

• node --check script.js
• git diff --check (clean; only existing line-ending warnings from Git on Windows)
• Loaded the app locally at http://127.0.0.1:8765/ with the provided manual test Markdown.
• Verified Find Section button appears and toggles active state / aria-pressed.
• Verified full-render source metadata for image (data-source-start=7), table (13), code (21), and Mermaid (30).
• Verified editor-to-preview locate exits active mode, scrolls preview, and highlights the mapped Mermaid preview block.
• Verified preview-to-editor locate from Mermaid scrolls editor and flashes a multi-line editor highlight.
• Verified preview-to-editor locate from the table scrolls editor and highlights source.
• Verified Escape cancels Find Section while keeping the Find & Replace panel open.
• Verified existing Find & Replace still reports/highlights matches (Final returned two matches in editor and preview).
• Verified no browser console warnings/errors after the interaction tests.

Known limitations

• Exact mapping depends on block-level source ranges. If a renderer or unusual Markdown structure produces more/fewer top-level elements than expected in full-render mode, Find Section falls back to nearest/proportional matching instead of throwing.
• Existing scroll sync remains the separate ratio-based feature; Find Section does not replace or alter that behavior.

Compatibility confirmations

• Existing Find & Replace remains functional.
• Existing sync scroll code paths were not replaced or removed, and the sync toggle remains active in split view.
• No Markdown content is modified by Find Section.
• Temporary highlights are CSS classes/overlay elements only and are removed automatically.
• Export, Share Snapshot, and Live Share logic were not changed.
• main was not updated directly; all work was done on fix/find-section-navigation.

[vercel]

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

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

[cloudflare-workers-and-pages]

Deploying markdownviewer with    Cloudflare Pages

Latest commit:	d54319c
Status:	✅  Deploy successful!
Preview URL:	https://caa1b4a8.markdownviewer.pages.dev
Branch Preview URL:	https://fix-find-section-navigation.markdownviewer.pages.dev

View logs

[ThisIs-Developer]

Follow-up fix pushed in d54319c after reproducing wrong-section behavior with the manual test Markdown.

What was wrong:

• Editor-side Find Section could use a stale Find/Search selection instead of the newly clicked editor line, causing jumps to the previous search result rather than the clicked section.
• Block ranges included trailing blank separator lines, which made source ranges fuzzier than necessary near adjacent blocks.

What changed:

• Normal editor clicks now resolve from the clicked line; selected text is used only when the user actually changes/drags a selection during Find Section mode.
• Source block splitters now end blocks before blank separator lines in both the main preview worker and desktop worker copy.

Retested:

• Loaded the supplied manual Markdown locally.
• Verified source metadata now maps exact content lines, e.g. heading 1-1, paragraph 3-3, table 13-17, code 21-26, Mermaid 30-34.
• Reproduced stale search selection: selected final on line 47, then clicked around line 25 in the editor. It now highlights the code block (data-source-start=21) instead of the stale final search result.
• Clicked preview search highlights and confirmed preview-to-editor still exits pick mode and highlights the matching editor source.
• node --check script.js, node --check preview-worker.js, node --check desktop-app/resources/js/preview-worker.js, and git diff --check passed aside from Windows line-ending warnings.