[Revealjs] Correctly link to element in slide with an id

news/changelog-1.6.md

@@ -14,8 +14,9 @@ All changes included in 1.6:
 
 ## `revealjs` Format
 
-- Update to Reveal JS 5.1.0.
+- Update to Reveal JS 5.1.0
 - ([#7715](https://github.com/quarto-dev/quarto-cli/issues/7715)): Revealjs don't support anymore special Pandoc syntax making BulletList in Blockquotes become incremental list. This was confusing and unexpected behavior. Supported syntax for incremental list is documented at <https://quarto.org/docs/presentations/revealjs/#incremental-lists>.
+- ([#9742](https://github.com/quarto-dev/quarto-cli/issues/9742)): Links to cross-referenced images correctly works.
 
 ## `typst` Format
 

src/format/reveal/format-reveal.ts

@@ -783,23 +783,6 @@ const handleAnchors = (doc: Document) => {
     const codeLineAnchorEl = codeLineAnchor as Element;
     codeLineAnchorEl.removeAttribute("href");
   });
-
-  // https://github.com/quarto-dev/quarto-cli/issues/3533
-  // redirect anchors to the slide they refer to
-  const anchors = doc.querySelectorAll("a[href^='#/']");
-  for (const anchor of anchors) {
-    const anchorEl = anchor as Element;
-    const href = anchorEl.getAttribute("href");
-    if (href) {
-      const target = doc.getElementById(href.replace(/^#\//, ""));
-      if (target) {
-        const slide = findParentSlide(target);
-        if (slide && slide.getAttribute("id")) {
-          anchorEl.setAttribute("href", `#/${slide.getAttribute("id")}`);
-        }
-      }
-    }
-  }
 };
 
 const handleInterColumnDivSpaces = (doc: Document) => {
@@ -1002,7 +985,7 @@ function applyStretch(doc: Document, autoStretch: boolean) {
             }
           };
 
-          // Figure environment ? Get caption and alignment
+          // Figure environment ? Get caption, id and alignment
           const quartoFig = slideEl.querySelector("div.quarto-figure");
           const caption = doc.createElement("p");
           if (quartoFig) {
@@ -1011,6 +994,9 @@ function applyStretch(doc: Document, autoStretch: boolean) {
               "quarto-figure-(center|left|right)",
             );
             if (align) imageEl.classList.add(align[0]);
+            // Get id
+            const quartoFigId = quartoFig?.id;
+            if (quartoFigId) imageEl.id = quartoFigId;
             // Get Caption
             const figCaption = nodeEl.querySelector("figcaption");
             if (figCaption) {

tests/docs/smoke-all/2024/09/02/10657.qmd

@@ -0,0 +1,58 @@
+---
+title: Links to nested elements works
+format: revealjs
+_quarto:
+  tests:
+    revealjs:
+      ensureHtmlElements:
+        - 
+          - 'img.r-stretch#fig-elephant'
+          - 'a[href="#/fig-elephant"]'
+          - 'img.r-stretch#elephant'
+          - 'a[href="#/elephant"]'
+          - 'span#eq-EEE > span.math'
+          - 'a[href="#/eq-EEE"]'
+          - 'div.theorem#thm-TTT'
+          - 'a[href="#/thm-TTT"]'
+        - []
+---
+
+<!-- TODO: Add test with puppeteer about link working -->
+
+## Quarto Figure
+
+![Elephant](https://quarto.org/docs/authoring/images/crossref-figure.png){#fig-elephant}
+
+## Link to the figure
+
+See [Figure Element](#fig-elephant)
+
+## Image
+
+![Elephant](https://quarto.org/docs/authoring/images/crossref-figure.png){#elephant}
+
+## Link to the image
+
+See [Figure Element](#elephant)
+
+## Equation
+
+$$
+\begin{aligned}
+  f(X) = y.
+\end{aligned}
+$$ {#eq-EEE}
+
+## Link to equation
+
+See @eq-EEE.
+
+## Theorem
+
+::: {#thm-TTT}
+Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
+:::
+
+## Link to theorem
+
+See @thm-TTT.