Composer: click/selection in preview should reveal/select corresponding Markdown source (especially math)

Contribute Feature
,

AI-generated summary

Ethsim2 proposes enhancing the Composer by allowing users to click or select rendered elements in the preview pane (especially math expressions like ... or $$…$$) to automatically scroll and highlight the corresponding Markdown source in the editor. This would streamline editing long, technical posts by eliminating the need to manually hunt for source code when fixing small errors — such as missing signs or spacing issues. Unlike scroll sync (which mirrors typing), this feature enables a “preview → source” jump, similar to SyncTeX in LaTeX editors. The implementation could leverage source-mapping metadata (e.g., data-sourcepos) attached during Markdown rendering, allowing the Composer to pinpoint and select the relevant source range. While math is the primary motivation, the feature would also benefit other cooked elements like quotes, lists, and links. This would make the preview pane interactive, reduce cognitive load, and accelerate iteration on complex content. Ethsim2 offers to provide a GIF demo to illustrate the interaction.

1

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.

2 Likes