quarto-dev / quarto-dev/quarto

Feature Request: add support for cross-reference IDs in the Visual Editor’s DOM

Open
#929 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement visual-editor
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:

![A caption](image.png){.fs}
![A caption](image.png){#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:

![caption](img.png){#fig-f1}
$$ ... $$ {#eq-e1}

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.