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

[belinskyc]

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}