quarto-dev / quarto-dev/quarto
Feature Request: add support for cross-reference IDs in the Visual Editor’s DOM
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 645
- Forks
- 62
- Avg merge
- 17h 42m
- Merged PRs (30d)
- 13
Description
Summary
When a figure or equation has a Quarto cross-reference ID in source mode (e.g., {#fig-f1} or {#eq-e1}), the Visual Editor does not add that ID to the corresponding DOM element. This prevents custom editor CSS from distinguishing labeled from unlabeled figures and equations.
Current behavior
Figures with or without IDs produce identical DOM in the Visual Editor:
{.fs}
{#fig-t1 .fs}
Both render as:
<figure class="pm-figure ...">
...
<figcaption class="pm-figcaption" contenteditable="true">A caption</figcaption>
</figure>
Equations behave similarly:
$$ x $$
$$ y $$ {#eq-t1}
No cross-reference ID appears in the editor DOM, even though the rendered output correctly includes it.
Desired behavior
When a figure or equation has a cross-reference ID, it should appear in the DOM as the id attribute on the root element:
<figure id="fig-f1" class="pm-figure ...">
Why this matters
I maintain a custom CSS stylesheet injected into the Visual Editor to make it more closely resemble the rendered output: CSS stylesheet on GitHub
Some things my stylesheet handles:
• Figure and table numbering via CSS counters (e.g., Fig 1:, Table 2:)
• Equation numbering via CSS counters
• Section/heading numbering (e.g., 2-3.1)
• Paragraph and bullet spacing adjustments
Without IDs in the DOM, CSS cannot differentiate numbered/referenceable elements from unnumbered ones:
/* Would work if IDs were present in the DOM */
figure[id^="fig-"] { /* numbered figure */ }
Our group produces a large number of documents and lessons, making the visual editor our primary authoring environment. This limitation means the numbering in the editor will often not match the rendered output. This makes editing and proofreading harder, especially in large documents with many figures and equations.
Minimal ask
Write the cross-reference ID onto the <figure> and equation DOM elements in the Visual Editor whenever one exists in source — exactly as the renderer already does.
Environment
Confirmed in Visual Editor in RStudio, Positron, and VSCode on Windows 11 and Linux Mint 22.
Reproducible with any .qmd file containing:
{#fig-f1}
$$ ... $$ {#eq-e1}
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Visual Editor's figure and equation handling, using a .qmd file containing {#fig-f1} and {#eq-e1} to reproduce the missing attributes. Compare that DOM with the renderer's existing cross-reference ID behavior; done means the corresponding root figure and equation elements expose their source IDs while unlabeled elements remain unchanged.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100