Math in dashboard card titles ignores position in title

[e-miz]

Bug description

Last dashboard issue today, I promise!

Inline math in a dashboard card title seems to come after all words in the title.

Inspecting the output shows something's probably gone wrong with the placement of the inline math div:

I'm not actually sure how to come up with a workaround for this one, but I can also probably live without math in my card titles.

Steps to reproduce

---
title: "Test Dashboard"
format: dashboard
---

##
::: {.card title="Math $y=mx+b$ between words"}

Math $y=mx+b$ between words

:::

Expected behavior

No response

Actual behavior

No response

Your environment

IDE: VSCode 1.91.1
OS: Windows 10 WSL2

Quarto check output

Quarto 1.5.55
[✓] 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.55
      Path: /opt/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2023.10
      Chromium: 869685

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

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

[✓] Checking Python 3 installation....OK
      Version: 3.9.7 (Conda)
      Path: /home/emiz/miniconda3/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/

[mcanouil]

What if you try without the attribute syntax?

::: {.card}
## Math $y=mx+b$ between words

Math $y=mx+b$ between words
:::

[cscheid]

(incidentally, please keep the issues coming!)

[cscheid]

What if you try without the attribute syntax?

::: {.card}
## Math $y=mx+b$ between words

Math $y=mx+b$ between words
:::

This doesn't work even without math, Quarto doesn't turn the heading into a title:

[mcanouil]

Seems inconsistent compared to other div features such as call-outs.
I would have swear it was a thing 😅

[cscheid]

Seems inconsistent compared to other div features such as call-outs.

Agreed.

[cscheid]

It's the processing here that's broken:

quarto-cli/src/format/dashboard/format-dashboard-card.ts

Lines 155 to 180 in 3fd660e

	const looseText: string[] = [];
	// See if there is a toolbar in the header
	const cardToolbarEl = cardHeaderEl.querySelector(`.${kCardToolbarClass}`);
	for (const headerChildNode of cardHeaderEl.childNodes) {
	if (
	headerChildNode.nodeType === Node.TEXT_NODE &&
	headerChildNode.textContent.trim() !== ""
	) {
	looseText.push(headerChildNode.textContent.trim());
	headerChildNode.parentNode?.removeChild(headerChildNode);
	}
	}
	if (looseText.length > 0) {
	// Inject the text into a div that we can use for layout
	const classes = [kCardTitleClass];
	const titleTextDiv = makeEl("DIV", { classes }, doc);
	titleTextDiv.innerText = looseText.join(" ");
	if (cardToolbarEl) {
	cardToolbarEl.insertBefore(titleTextDiv, cardToolbarEl.firstChild);
	} else {
	cardHeaderEl.insertBefore(titleTextDiv, cardHeaderEl.firstChild);
	}

We need to move more than just "loose text".

[cscheid]

Concretely, the problem is not just with math. Any formatted text breaks in the same way, like *emphasis*, etc.