quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.87k stars 317 forks source link

Mermaid href click interaction does not work #10450

Open mfisher87 opened 2 months ago

mfisher87 commented 2 months ago

Bug description

With Quarto CLI 1.4.510 through 1.5.56, my Mermaid diagram's click functionality doesn't work. The text appears clickable, but actually clicking has no effect. Tested in HTML and RevealJS format.

```{mermaid}
%%{init:{'securityLevel':'loose'}}%%
gantt
  dateFormat YYYY-MM
  axisFormat %Y

  Foo     :done, foo, 2000-01, 2001-01

  click foo href "https://example.com/"

My first thought was that `securityLevel` needed to be set, but the setting had no effect.

### Steps to reproduce

* Create `index.qmd` with the content above
* `quarto preview index.qmd`
* The text is bold and blue. If the `click` instruction is removed from the mermaid code, the text returns to plain black. Mermaid seems to be receiving the instruction to render the clickable element.
* Hover over the text "Foo" or the bar. The cursor shows that this is a clickable element by turning into a pointer finger.
* Click the element. Nothing happens!

### Expected behavior

On clicking the element, my browser is redirected to `https://example.com`

### Actual behavior

On clicking the element, nothing happens

### Your environment

- vim
- Pop!_OS 22

### Quarto check output

```bash
$ quarto check
Quarto 1.5.56
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.5.56
      Path: /opt/quarto/bin

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

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /home/robatt/.TinyTeX/bin/x86_64-linux
      Version: 2023

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

[✓] Checking Python 3 installation....OK
      Version: 3.10.14 (Conda)
      Path: /home/robatt/.local/share/miniforge3/bin/python
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with conda install jupyter

[✓] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/
mfisher87 commented 2 months ago

Here's the example working in the Mermaid Live Editor: https://mermaid.live/edit#pako:eNo9kDGPwyAMhf8KsnQbvaQdmU-dLtNNlVgQOAkq4AjMqVXV_15oTufp8fGwzXuAJYegYDGJWSchnGE8U46GxaXVYZo6NTdf_ujHRaeOzkSil3KUUIqZSIrTOI6H8fgWxyZ2pw3eXrtBrBlnoWFl3ooaBryZuAX8tBQHDSAhYhvhXdvn0R9q4BUjalBNOpOvGuTOC9qaPd-_8RfDfh-ISrPq9GyNTGX6uScLinNFCZnqsoKaTSjtVLf-yy9vlmziP0XnmfK05_GO5fkCIpJdHw

[!WARNING] I've already set "securityLevel": "loose" in this example. A pop-up will warn you about this and remove it by default. Don't trust me, I'm just a fool on the internet. Use the config tab yourself to re-add it if you want, but contrary to the Mermaid docs, it seems to be unnecessary for the link to work.

mcanouil commented 2 months ago

Are you sure this is supported in Mermaid 10.2?

mfisher87 commented 2 months ago

I'm fairly sure. Based on the changelog, it was added in 8.1.0, but I could be misreading. Additionally, the rendered output does change when I use the click instruction in a Mermaid diagram in a Quarto document. The text becomes blue and bold and the cursor becomes a finger, indicating that the entity should be clickable.