[Docusaurus] Can't build website from mdx files with "error: quartoRawHtml is not defined" error (Quarto 1.4)

[eitsupi]

Bug description

docusaurus-md format including html output seems broken.

Steps to reproduce

---
title: foo
format: docusaurus-md
---

```{python}
#| filename: Python
import polars

polars.DataFrame({"foo": [1, 2,]})
```

Expected behavior

---
title: foo
format: docusaurus-md
---

export const quartoRawHtml =
[`<div><style>
.dataframe > thead > tr,
.dataframe > tbody > tr {
  text-align: right;
  white-space: pre-wrap;
}
</style>
<small>shape: (2, 1)</small>`,`</div>`];


```python title="Python"
import polars

polars.DataFrame({"foo": [1, 2,]})
```

<div dangerouslySetInnerHTML={{ __html: quartoRawHtml[0] }} />

| foo |
|-----|
| i64 |
| 1   |
| 2   |

<div dangerouslySetInnerHTML={{ __html: quartoRawHtml[1] }} />

Generated by Quarto CLI 1.4.432

Actual behavior

---
title: foo
format: docusaurus-md
---





```python title="Python"
import polars

polars.DataFrame({"foo": [1, 2,]})
```

<div dangerouslySetInnerHTML={{ __html: quartoRawHtml[0] }} />

| foo |
|-----|
| i64 |
| 1   |
| 2   |

<div dangerouslySetInnerHTML={{ __html: quartoRawHtml[1] }} />

Your environment

• Ubuntu 22.04

Quarto check output

$ quarto check   
Quarto 1.4.545
[✓] 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.545
      Path: /opt/quarto/bin

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

[✓] Checking LaTeX....................OK
      Tex:  (not detected)

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

[✓] Checking Python 3 installation....OK
      Version: 3.10.12
      Path: /usr/local/python/current/bin/python3
      Jupyter: 5.7.1
      Kernels: python3

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

[✓] Checking R installation...........OK
      Version: 4.3.2
      Path: /usr/local/lib/R
      LibPaths:
        - /workspaces/querying-with-prql/renv/library/R-4.3/x86_64-pc-linux-gnu
        - /usr/local/lib/R/library
      knitr: 1.45
      rmarkdown: 2.25

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

[cderv]

Simpler reprex:

---
title: foo
format: docusaurus-md
keep-md: true
---

```{=html}
<span class="dummy">Content</span>
```

Gives now

---
title: foo
format: docusaurus-md
keep-md: true
---




<div dangerouslySetInnerHTML={{ __html: quartoRawHtml[0] }} />

This is broken since 8e15dde (#7996)

Thanks for the report - and sorry for all the breakage. 😓

[cderv]

The export is supposed to be written in the Pandoc filter

quarto-cli/src/resources/extensions/quarto/docusaurus/docusaurus.lua

Lines 17 to 27 in 9e35ab3

	local function Pandoc(doc)
	-- insert exports at the top if we have them
	if #rawHtmlVars > 0 then
	local exports = ("export const %s =\n[%s];"):format(kQuartoRawHtml,
	table.concat(
	rawHtmlVars:map(function(var) return '`'.. var .. '`' end),
	","
	)
	)
	doc.blocks:insert(1, pandoc.RawBlock("markdown", exports .. "\n"))
	end

but since #7996 no rawHtmlVars is found because the filters are now applied in a topdown approach.

quarto-cli/src/resources/extensions/quarto/docusaurus/docusaurus.lua

Lines 150 to 158 in 9e35ab3

	return {
	traverse = "topdown",
	Pandoc = Pandoc,
	Image = Image,
	Header = Header,
	RawBlock = RawBlock,
	DecoratedCodeBlock = DecoratedCodeBlock,
	CodeBlock = CodeBlock,
	}

I wasn't expecting this, but possibly using Pandoc in a topdown approach will execute first before all the other function.

So it does not get first into rawBlock that was supposed to fill the rawHtmlVars list

quarto-cli/src/resources/extensions/quarto/docusaurus/docusaurus.lua

Lines 53 to 69 in 9e35ab3

	-- into raw commamark to pass through via dangerouslySetInnerHTML
	local function RawBlock(el)
	if el.format == 'mdx' then
	return pandoc.CodeBlock(el.text, pandoc.Attr("", {"mdx-code-block"}))
	elseif el.format == 'html' then
	-- track the raw html vars (we'll insert them at the top later on as
	-- mdx requires all exports be declared together)
	local html = string.gsub(el.text, "\n+", "\n")
	rawHtmlVars:insert(html)
	-- generate a div container for the raw html and return it as the block
	local html = ("<div dangerouslySetInnerHTML={{ __html: %s[%d] }} />")
	:format(kQuartoRawHtml, #rawHtmlVars-1) .. "\n"
	return pandoc.RawBlock("html", html)
	end
	end

We need to move this part

[krishaamer]

Thanks for this report, I was just about to complain about this too. I'm experiencing the same errors on Quarto 1.4.545 and Docusaurus 3.1.0 on MacOS Ventura.

[cscheid]

There's a couple of things going on here.

1. Dumb bug, fix incoming. Our regression test coverage in docusaurus is improving, but we're hurting here. Thanks for the patience.
2. Quarto's table processing is catching the table and converting it to Pandoc AST in order to allow filters to process it. I'm not sure if docusaurus will like seeing Markdown tables in general. The "fixed" output looks like this now:

---
title: foo
format: docusaurus-md
---




export const quartoRawHtml =
[`<div><style>
.dataframe > thead > tr > th,
.dataframe > tbody > tr > td {
  text-align: right;
}
</style>
<small>shape: (2, 1)</small>`,`</div>`];


```python title="Python"
import polars

polars.DataFrame({"foo": [1, 2,]})
```

<div dangerouslySetInnerHTML={{ __html: quartoRawHtml[0] }} />

| foo |
|-----|
| i64 |
| 1   |
| 2   |

<div dangerouslySetInnerHTML={{ __html: quartoRawHtml[1] }} />

In case Docusaurus turns out to not like some Markdown table features, Quarto's html table processing can be disabled with html-table-processing: none in the metadata.

[eitsupi]

Thanks for quick update!