Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#929 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
55/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

enhancement visual-editor

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}
Lenguaje dominante
TypeScript
Estrellas
652
Forks
64
Merge medio
8 h 45 min
PR fusionados (30 d)
36

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de quarto-dev/quarto

Todos los issues de quarto-dev/quarto

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.