Cross-reference to figure in revealjs presentation not working

[itsmevictor]

Bug description

Hi, thank you for the great software!

My problem is that cross-references to a figure in a revealjs presentation does not seem to work. The figure appears correctly and with its caption and the cross-reference (Figure X) also appears with a link, but clicking it leads nowhere.

I initially tried by following the "Basics" section of the Cross-references guide which did not work. I've now opted for the div syntax, which means that I basically have this:

See reference @fig-scatterplot. 

------------------------------------------------------------------------

::: {#fig-scatterplot}

![](bv_scatterplot.png-1.png)

Scatter plot of the running and outcome variables at the level of the voting office
:::

For context, my yaml header is the following:

---
title: "MY_TITLE"
subtitle: "MY_SUBTITLE"
author: "MY_NAME"
institute: "MY_INSTITUTE"
format: 
  revealjs:
    theme:
        - default
        # - mycustomstyle.scss
    embed-resources: true
    self-contained-math: false
    html-math-method: mathjax
    transition: fade
    transition-speed: fast
    callout-icon: true
    fontsize: 18pt
    incremental: true
    progress: true
    # linkcolor: green
    # fontcolor: blue
editor: visual
bibliography: thesis_bibliography.bib
citeproc: true
zotero: false
---

Steps to reproduce

Writing the same code should do the trick.

Expected behavior

Clicking the link to the figure should bring to the figure.

Actual behavior

Clicking the link to the figure does absolutely nothing.

Your environment

• IDE : Visual Studio Code, but the problem is the same if I open the html file in my browser.
• OS : Mac OS Sonoma 14.4

Quarto check output

Quarto 1.4.554
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.554
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /Library/TeX/texbin
      Version: 2024

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.3
      Path: /opt/homebrew/opt/[email protected]/bin/python3.12
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
      Version: 4.4.0
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /opt/homebrew/lib/R/library
        - /Library/Frameworks/R.framework/Versions/4.4-arm64/Resources/library
      knitr: 1.46
      rmarkdown: 2.26

[✓] Checking Knitr engine render......OK

[cscheid]

The crossreference itself exists and "is correct"; the issue is that revealjs hijacks the URLs so that links don't behave as regular documents.

We should try to do something about this. @cderv, what do you think?

[cderv]

I think the cross reference exists, but it is not correct in a slide presentation context.

I believe this is an oversight, as we do the right thing for bibliography references already with a special processing and same for end-document footnotes (orignal commit 5246d7d)

---
title: test
format: revealjs
bibliography: ref.bib
---

## 

```{r}
#| include: false
knitr::write_bib("knitr", "ref.bib")
```


See [@R-knitr] for more information.

## References

---
title: test
format: revealjs
reference-location: document
---

## Start

See this content[^1]

[^1]: This is a footnote  

## End

So we probably need to do something similar.

To be clear on Reveal js presentation, the use of # is reserved for slides (name or number) when navigating the presentation. So we need to tweak all the cross ref links to change href id by the slide id the link is on.

I believe this is how we need work around to make the cross refs links work in Revealjs context

[cderv]

FWIW, this works now with Revealjs 5

---
title: test reveal
format: 
  revealjs: 
    auto-stretch: false
---

## Slide 1

![Elephant](https://quarto.org/docs/authoring/images/crossref-figure.png){#fig-elephant}

## Another slide

See [Figure Element](#fig-elephant)

I just need to fix an issue with stretching image which is loosing id - which is probably source of the issue with previous revealjs version

[itsmevictor]

Excellent, many thanks for the fix/development!

[cderv]

It is not fixed yet. #10688 is needed. The issue will be closed upon PR being merged.