renderText ejects header class into document

[garrettgman]

When I place reactive text into a header, it appears and reactivity works. However, part of the html also appears in the document, which looks bad.

For example, this .Rmd file

---
title: "Hurricanes"
runtime: shiny
output: html_document

---

Between 1995 and 2005, 79 "named" storms developed in the Atlantic Ocean.
These are storms that reached Tropical Depression status or greater.

```{r echo = FALSE}
selectInput("data", "Choose a state to explore:", choices = state.name)
```

## `r renderText(input$data)`

renders as

[jjallaire]

I believe that this will be addressed by this shiny PR: rstudio/shiny#512

@yihui is that correct? If so I'll close this issue here.

[yihui]

That PR only addresses part of this issue. It uses <span> instead of <div> for renderText(), since div is not legitimate in <h2>.

I tried to debug this problem, but did not succeed. It seems Pandoc was confused by the HTML tag in ##, but when I tried to convert the markdown document below to HTML, Pandoc actually worked fine:

Hi.

## <span id="out966b648308c66c43" class="shiny-text-output shiny-bound-output"></span>

Whatever.

Note it works when renderText() is in a paragraph. I guess the problem is related to --section-divs, but I failed to find out which step it went wrong.

[elephantum]

+1 to the original problem, it would be nice to be able to have dynamic text in headers.

Please, fix :)

[yihui]

This problem turns out to be a little tricky. I have found out the reason but do not know how to fix it. We probably need @jcheng5's input here, since it is an issue caused by htmltools::htmlPreserve().

abc

## `r renderText('foo')`

def

The HTML output from shiny in Markdown is first "preserved" like this:

abc

## <!--html_preserve--><span id="a" class="b">foo</span><!--/html_preserve-->

def

Then the preserved chunk is replaced by a random ID (here preserveRandomID == '<!--html_preserve--><span id="a" class="b">foo</span><!--/html_preserve-->'):

abc

## preserveRandomID

def

The Markdown document is passed to Pandoc now, and turned to HTML:

<p>abc</p>
<div id="preserveRandomID" class="section level2">
<h2>preserveRandomID</h2>
<p>def</p>
</div>

Note the section is wrapped in a div with an id preserveRandomID. Then htmltools::restorePreserveChunks() will replace all preserveRandomID with the original HTML fragments. This is where the problem came from:

<p>abc</p>
<div id="<!--html_preserve--><span id="a" class="b">foo</span><!--/html_preserve-->" class="section level2">
<h2><!--html_preserve--><span id="a" class="b">foo</span><!--/html_preserve--></h2>
<p>def</p>
</div>

Only the second preserveRandomID should be restored, but there seems to be no way for htmltools to know which preserveRandomID is the original one.

One possible solution that I can think of is to use <span>preserveRandomID</span> as the random id, which leads to HTML from Pandoc like this:

<p>abc</p>
<div id="preserveRandomID" class="section level2">
<h2><span>preserveRandomID</span></h2>
<p>def</p>
</div>

Then we restore <span>preserveRandomID</span> to the original HTML.

[elephantum]

Meanwhile, I found a workaround. Instead of making pandoc generate value for div/@id you can provide one explicitly: {#foo}

abc

## `r renderText('foo')` {#foo}

def

This way preserveRandomID would not go into id= contents.

Relevant section in pandoc: http://johnmacfarlane.net/pandoc/README.html#header-identifiers-in-html-latex-and-context

[yihui]

@elephantum Oh nice trick. Thanks!

[elephantum]

Another way would be to turn off auto_identifiers and ascii_identifiers markdown extensions as described in http://johnmacfarlane.net/pandoc/README.html#pandocs-markdown

[yihui]

This will be fixed by #1131.

[github-actions]

This old thread has been automatically locked. If you think you have found something related to this, please open a new issue by following the issue guide (https://yihui.org/issue/), and link to this old issue if necessary.