Merge pull request #12288 from benkeks/fix-katex-crossref-previews

Fix KaTeX rendering in crossref previews

Author: cderv

news/changelog-1.8.md

@@ -2,13 +2,17 @@ All changes included in 1.8:
 
 ## Formats
 
+### `html`
+
+- ([#12259](https://github.com/quarto-dev/quarto-cli/issues/12259)): Fix conflict between `html-math-method: katex` and crossref popups (author: @benkeks).
+
 ### `revealjs`
 
 - ([#12598](https://github.com/quarto-dev/quarto-cli/pull/12598)): Ensure `.fragment` on an image with caption applies to whole figure.
 
 ### `docx`
 
-- ([#8392](https://github.com/quarto-dev/quarto-cli/issues/8392)): Fix `docx` generation issues in tables 
+- ([#8392](https://github.com/quarto-dev/quarto-cli/issues/8392)): Fix `docx` generation issues in tables
 
 ## Projects
 

src/resources/formats/html/pandoc/template.html

@@ -31,7 +31,7 @@
     var macros = [];
     for (var i = 0; i < mathElements.length; i++) {
       var texText = mathElements[i].firstChild;
-      if (mathElements[i].tagName == "SPAN") {
+      if (mathElements[i].tagName == "SPAN" && texText && texText.data) {
         window.katex.render(texText.data, mathElements[i], {
           displayMode: mathElements[i].classList.contains('display'),
           throwOnError: false,

tests/docs/playwright/html/math/katex/crossref-popup.qmd

@@ -0,0 +1,21 @@
+---
+title: "Reproducible Quarto Document"
+format: html
+html-math-method: katex
+---
+
+:::{#thm-with-math}
+### Theorem with math
+
+Text with math $\mathcal P (\mathbb N) ≠ \varnothing$.
+:::
+
+:::{#thm-without-math}
+### Theorem without math
+
+Just text!
+:::
+
+Reference to @thm-with-math. (Popup does not render correctly)
+
+Reference to @thm-without-math. (Popup does render.)

tests/integration/playwright/tests/html-math-katex.spec.ts

@@ -15,3 +15,15 @@ test.describe('KaTeX math rendering in Jupyter engine document', () => {
     });
   }
 });
+
+
+test('KaTeX does not prevent crossref pop to be rendered', async ({ page }) => {
+  await page.goto('html/math/katex/crossref-popup.html');
+  const Thm1Ref = page.getByRole('link', { name: 'Theorem 1' });
+  await expect(Thm1Ref).toBeVisible();
+  await Thm1Ref.hover();
+  // hover box should be visible
+  await expect(page.getByRole('tooltip', { name: 'Theorem 1 (Theorem with math' })).toBeVisible();
+  // Katex Math should be rendered in the hover box
+  await expect(page.getByRole('tooltip', { name: 'Theorem 1 (Theorem with math' })).toContainText('∅');
+})