quarto-dev / quarto-dev/quarto-cli

Revealjs transformation should move `data-` attributes along with `class`es

Open
#6,808 2 comments 0 reactions 1 assignee View on GitHub

@cderv is already working on this.

Since Sep 13, 2023.

bug pandoc revealjs
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

See https://github.com/posit-dev/shinylive/pull/61

A brief overview: Suppose you have this qmd document:

---
title: "Shinylive RevealJS"
format: revealjs
filters:
  - shinylive
---

## Shinylive R

```{shinylive-r}
#| standalone: true
#| viewerHeight: 420
ui <- fluidPage(
  sliderInput("obs", "Number of observations:",
    min = 0, max = 1000, value = 500
  ),
  plotOutput("distPlot")
)

server <- function(input, output) {
  output$distPlot <- renderPlot({
    hist(rnorm(input$obs))
  })
}

shinyApp(ui, server)
```

This is the HTML structure that shows up normally when rendering the qmd to HTML with format: revealjs commented out:

<pre class="shinylive-r" data-engine="r"><code>#\| standalone: true
...

Shinylive searches for elements with class="shinylive-r", and then looks at the data-engine attribute on that element.

However, when format: revealjs is used, it turns into this:

<div class="sourceCode" id="cb2" data-engine="r">
  <pre class="sourceCode numberSource shinylive-r number-lines code-with-copy">
  <code class="sourceCode">
  <span id="cb2-1"><a href="#cb2-1"></a>#\| standalone: true</span>
  ...

Note that the data-engine attribute is no longer in the same element as class="shinylive-r".

I am guessing this happens because a filter replaces the original <pre> node with a <div>, then creates a new <pre> as a child and and copies the original's class attribute to the new child. I think that the data- attributes should be copied over as well.

Steps to reproduce

No response

Expected behavior

No response

Actual behavior

No response

Your environment

No response

Quarto check output

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.