Problem / motivation
When editing math-heavy posts, it’s often difficult to locate the exact source of a rendered equation in the Markdown composer.
In long posts with many inline $…$ expressions or multiple $$…$$ display blocks, the workflow becomes:
spot a mistake in preview → manually hunt through raw Markdown → adjust → re-check preview
This is especially painful for small edits (missing minus sign, wrong index, spacing tweak, etc.), and gets worse as posts grow.
Proposed behaviour
In the composer:
- Clicking or highlighting a rendered element in the preview pane should:
- scroll the raw Markdown editor to the corresponding source, and
- place the caret inside (or select) the source text that produced it.
This would work particularly well for:
• Math (…, $$…$$)
• Quotes
• Lists
• Links
• Other cooked elements
Math is the most compelling use-case, but the behaviour would be broadly useful.
Why this is distinct from scroll sync
This is not about synchronised scrolling while typing.
It’s a preview → source jump, similar in spirit to SyncTeX in LaTeX editors:
“I’m looking at this rendered thing - show me where it came from.”
Possible implementation direction (high level)
During cooking, output nodes could carry lightweight source-mapping metadata (e.g. data-sourcepos="start:end" or similar).
In the composer preview:
- On click / selection, walk up the DOM to the nearest node with source position metadata.
- Use the existing composer API to set the selection range in the raw editor and scroll it into view.
This kind of source mapping already exists conceptually in CommonMark tooling, and math blocks in particular are natural candidates since they are already tokenised distinctly.
Why this would be valuable
- Much faster iteration on math-heavy content
- Reduces cognitive load when editing long technical posts
- Makes the preview pane genuinely interactive, not just passive
- Scales well to other cooked elements beyond math
Happy to mock up a short GIF if that would help illustrate the interaction.