Put footnotes on the same line with fmt_markdown() in Quarto

NEWS.md

@@ -55,6 +55,8 @@
 
 * Fixed a bug where spanners didn't render correctly in Quarto (#1839).
 
+* Improved footnote rendering in Quarto with `fmt_markdown()` (@olivroy, #1773)
+
 # gt 0.11.0
 
 ## New features

R/quarto.R

@@ -40,12 +40,14 @@ process_md_quarto <- function(text, md_engine_fn) {
       }
     )
 
+  # Remove paragraph
+  non_na_text_processed <- gsub("^<p>|</p>\n$", "", non_na_text_processed)
   # Use base64 encoding to avoid issues with escaping internal double
   # quotes; used in conjunction with the 'data-qmd-base64' attribute
   # that is recognized by Quarto
   non_na_text <-
     vapply(
-      non_na_text,
+      non_na_text_processed,
       FUN.VALUE = character(1L),
       USE.NAMES = FALSE,
       FUN = function(text) {
@@ -55,12 +57,12 @@ process_md_quarto <- function(text, md_engine_fn) {
     )
 
   # Tweak start and end of non_na_text
-  non_na_text <- paste0("<div data-qmd-base64=\"", non_na_text, "\">")
+  non_na_text <- paste0("<span data-qmd-base64=\"", non_na_text, "\">")
 
   non_na_text <-
     paste0(
-      non_na_text, "<div class='gt_from_md'>",
-      non_na_text_processed, "</div></div>"
+      non_na_text, "<span class='gt_from_md'>",
+      non_na_text_processed, "</span></span>"
     )
 
   text[nzchar(text, keepNA = FALSE)] <- non_na_text

R/z_utils_render_footnotes.R

@@ -651,7 +651,7 @@ place_footnote_on_left <- function(text, mark, context) {
         gsub("<div class='gt_from_md'><p>", "", text, fixed = TRUE)
       )
   } else if (context == "html" && startsWith(text, "<div data-qmd-base64")) {
-    # FIXME #1737, figure out how to tweak the regex (in Quarto)
+    # FIXME #1773, figure out how to tweak the regex (in Quarto)
     text <- paste(mark, text, sep = "\U000A0")
 
   } else if (context == "word" || context == "latex") {
@@ -684,7 +684,7 @@ place_footnote_on_right <- function(text, mark, context) {
       )
 
   } else if (endsWith(text, "</p>\n</div></div>")) {
-    # Processing html
+    # Processing html (This code may not be valid as of #1860)
     # FIXME possibly the place where we could fix #1773
     text <- apply_footnotes_method[[context]](text, mark)
   } else {

tests/testthat/_snaps/quarto.md

@@ -3,5 +3,5 @@
     Code
       render_as_html(gt_tbl)
     Output
-      [1] "<table class=\"gt_table\" data-quarto-disable-processing=\"false\" data-quarto-bootstrap=\"false\">\n  <thead>\n    <tr class=\"gt_heading\">\n      <td colspan=\"3\" class=\"gt_heading gt_title gt_font_normal gt_bottom_border\" style><div data-qmd-base64=\"dGl0bGU=\"><div class='gt_from_md'><p>title</p>\n</div></div></td>\n    </tr>\n    \n    <tr class=\"gt_col_headings gt_spanner_row\">\n      <th class=\"gt_col_heading gt_columns_bottom_border gt_right\" rowspan=\"2\" colspan=\"1\" scope=\"col\" id=\"num\">num</th>\n      <th class=\"gt_center gt_columns_top_border gt_column_spanner_outer\" rowspan=\"1\" colspan=\"2\" scope=\"colgroup\" id=\"problem\">\n        <div class=\"gt_column_spanner\"><div data-qmd-base64=\"cHJvYmxlbQ==\"><div class='gt_from_md'><p>problem</p>\n</div></div></div>\n      </th>\n    </tr>\n    <tr class=\"gt_col_headings\">\n      <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\" scope=\"col\" id=\"char\">char<span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>1</sup></span></th>\n      <th class=\"gt_col_heading gt_columns_bottom_border gt_center\" rowspan=\"1\" colspan=\"1\" scope=\"col\" id=\"fctr\"><div data-qmd-base64=\"RmFjdG9y\"><div class='gt_from_md'><p>Factor</p>\n</div></div><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>2</sup></span></th>\n    </tr>\n  </thead>\n  <tbody class=\"gt_table_body\">\n    <tr><td headers=\"num\" class=\"gt_row gt_right\"><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>3</sup></span> <div data-qmd-base64=\"MC4xMTEx\"><div class='gt_from_md'><p>0.1111</p>\n</div></div></td>\n<td headers=\"char\" class=\"gt_row gt_left\">apricot</td>\n<td headers=\"fctr\" class=\"gt_row gt_center\">one</td></tr>\n    <tr><td headers=\"num\" class=\"gt_row gt_right\"><div data-qmd-base64=\"Mi4yMjI=\"><div class='gt_from_md'><p>2.222</p>\n</div></div></td>\n<td headers=\"char\" class=\"gt_row gt_left\">banana</td>\n<td headers=\"fctr\" class=\"gt_row gt_center\">two</td></tr>\n    <tr><td headers=\"num\" class=\"gt_row gt_right\"><div data-qmd-base64=\"MzMuMzM=\"><div class='gt_from_md'><p>33.33</p>\n</div></div></td>\n<td headers=\"char\" class=\"gt_row gt_left\">coconut</td>\n<td headers=\"fctr\" class=\"gt_row gt_center\">three</td></tr>\n    <tr><td headers=\"num\" class=\"gt_row gt_right\"><div data-qmd-base64=\"NDQ0LjQ=\"><div class='gt_from_md'><p>444.4</p>\n</div></div></td>\n<td headers=\"char\" class=\"gt_row gt_left\">durian</td>\n<td headers=\"fctr\" class=\"gt_row gt_center\">four</td></tr>\n    <tr><td headers=\"num\" class=\"gt_row gt_right\"><div data-qmd-base64=\"NTU1MA==\"><div class='gt_from_md'><p>5550</p>\n</div></div></td>\n<td headers=\"char\" class=\"gt_row gt_left\">NA</td>\n<td headers=\"fctr\" class=\"gt_row gt_center\">five</td></tr>\n  </tbody>\n  \n  <tfoot class=\"gt_footnotes\">\n    <tr>\n      <td class=\"gt_footnote\" colspan=\"3\"><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>1</sup></span> Not a problem</td>\n    </tr>\n    <tr>\n      <td class=\"gt_footnote\" colspan=\"3\"><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>2</sup></span> A problem because fctr is labelled with md</td>\n    </tr>\n    <tr>\n      <td class=\"gt_footnote\" colspan=\"3\"><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>3</sup></span> <div data-qmd-base64=\"UHJvYmxlbSBiZWNhdXNlIG51bSByb3cgMSBpcyBmbXRfbWFya2Rvd24oKSArIGFsc28gdGhlIGZvb3Rub3RlIGlzIHdyYXBwZWQgaW4gbWQu\"><div class='gt_from_md'><p>Problem because num row 1 is fmt_markdown() + also the footnote is wrapped in md.</p>\n</div></div></td>\n    </tr>\n  </tfoot>\n</table>"
+      [1] "<table class=\"gt_table\" data-quarto-disable-processing=\"false\" data-quarto-bootstrap=\"false\">\n  <thead>\n    <tr class=\"gt_heading\">\n      <td colspan=\"3\" class=\"gt_heading gt_title gt_font_normal gt_bottom_border\" style><span data-qmd-base64=\"dGl0bGU=\"><span class='gt_from_md'>title</span></span></td>\n    </tr>\n    \n    <tr class=\"gt_col_headings gt_spanner_row\">\n      <th class=\"gt_col_heading gt_columns_bottom_border gt_right\" rowspan=\"2\" colspan=\"1\" scope=\"col\" id=\"num\">num</th>\n      <th class=\"gt_center gt_columns_top_border gt_column_spanner_outer\" rowspan=\"1\" colspan=\"2\" scope=\"colgroup\" id=\"problem\">\n        <div class=\"gt_column_spanner\"><span data-qmd-base64=\"cHJvYmxlbQ==\"><span class='gt_from_md'>problem</span></span></div>\n      </th>\n    </tr>\n    <tr class=\"gt_col_headings\">\n      <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\" scope=\"col\" id=\"char\">char<span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>1</sup></span></th>\n      <th class=\"gt_col_heading gt_columns_bottom_border gt_center\" rowspan=\"1\" colspan=\"1\" scope=\"col\" id=\"fctr\"><span data-qmd-base64=\"RmFjdG9y\"><span class='gt_from_md'>Factor</span></span><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>2</sup></span></th>\n    </tr>\n  </thead>\n  <tbody class=\"gt_table_body\">\n    <tr><td headers=\"num\" class=\"gt_row gt_right\"><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>3</sup></span> <span data-qmd-base64=\"MC4xMTEx\"><span class='gt_from_md'>0.1111</span></span></td>\n<td headers=\"char\" class=\"gt_row gt_left\">apricot</td>\n<td headers=\"fctr\" class=\"gt_row gt_center\">one</td></tr>\n    <tr><td headers=\"num\" class=\"gt_row gt_right\"><span data-qmd-base64=\"Mi4yMjI=\"><span class='gt_from_md'>2.222</span></span></td>\n<td headers=\"char\" class=\"gt_row gt_left\">banana</td>\n<td headers=\"fctr\" class=\"gt_row gt_center\">two</td></tr>\n    <tr><td headers=\"num\" class=\"gt_row gt_right\"><span data-qmd-base64=\"MzMuMzM=\"><span class='gt_from_md'>33.33</span></span></td>\n<td headers=\"char\" class=\"gt_row gt_left\">coconut</td>\n<td headers=\"fctr\" class=\"gt_row gt_center\">three</td></tr>\n    <tr><td headers=\"num\" class=\"gt_row gt_right\"><span data-qmd-base64=\"NDQ0LjQ=\"><span class='gt_from_md'>444.4</span></span></td>\n<td headers=\"char\" class=\"gt_row gt_left\">durian</td>\n<td headers=\"fctr\" class=\"gt_row gt_center\">four</td></tr>\n    <tr><td headers=\"num\" class=\"gt_row gt_right\"><span data-qmd-base64=\"NTU1MA==\"><span class='gt_from_md'>5550</span></span></td>\n<td headers=\"char\" class=\"gt_row gt_left\">NA</td>\n<td headers=\"fctr\" class=\"gt_row gt_center\">five</td></tr>\n  </tbody>\n  \n  <tfoot class=\"gt_footnotes\">\n    <tr>\n      <td class=\"gt_footnote\" colspan=\"3\"><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>1</sup></span> Not a problem</td>\n    </tr>\n    <tr>\n      <td class=\"gt_footnote\" colspan=\"3\"><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>2</sup></span> A problem because fctr is labelled with md</td>\n    </tr>\n    <tr>\n      <td class=\"gt_footnote\" colspan=\"3\"><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>3</sup></span> <span data-qmd-base64=\"UHJvYmxlbSBiZWNhdXNlIG51bSByb3cgMSBpcyBmbXRfbWFya2Rvd24oKSArIGFsc28gdGhlIGZvb3Rub3RlIGlzIHdyYXBwZWQgaW4gbWQu\"><span class='gt_from_md'>Problem because num row 1 is fmt_markdown() + also the footnote is wrapped in md.</span></span></td>\n    </tr>\n  </tfoot>\n</table>"
 

tests/testthat/_snaps/tab_footnote.md

@@ -400,6 +400,20 @@
     Output
       [1] "<table class=\"gt_table\" data-quarto-disable-processing=\"false\" data-quarto-bootstrap=\"false\">\n  <thead>\n    <tr class=\"gt_col_headings\">\n      <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\" scope=\"col\" id=\"char\">char</th>\n    </tr>\n  </thead>\n  <tbody class=\"gt_table_body\">\n    <tr><td headers=\"char\" class=\"gt_row gt_left\"><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>1</sup></span> <span class='gt_from_md'>apricot</span></td></tr>\n  </tbody>\n  \n  <tfoot class=\"gt_footnotes\">\n    <tr>\n      <td class=\"gt_footnote\" colspan=\"1\"><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>1</sup></span> note</td>\n    </tr>\n  </tfoot>\n</table>"
 
+# Footnotes are correctly placed with text produced by `fmt_markdown()` in Quarto (#1773)
+
+    Code
+      render_as_html(gt_tbl)
+    Output
+      [1] "<table class=\"gt_table\" data-quarto-disable-processing=\"false\" data-quarto-bootstrap=\"false\">\n  <thead>\n    <tr class=\"gt_col_headings\">\n      <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\" scope=\"col\" id=\"char\">char</th>\n    </tr>\n  </thead>\n  <tbody class=\"gt_table_body\">\n    <tr><td headers=\"char\" class=\"gt_row gt_left\"><span data-qmd-base64=\"YXByaWNvdA==\"><span class='gt_from_md'>apricot</span></span><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>1</sup></span></td></tr>\n  </tbody>\n  \n  <tfoot class=\"gt_footnotes\">\n    <tr>\n      <td class=\"gt_footnote\" colspan=\"1\"><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>1</sup></span> note</td>\n    </tr>\n  </tfoot>\n</table>"
+
+---
+
+    Code
+      render_as_html(gt_tbl)
+    Output
+      [1] "<table class=\"gt_table\" data-quarto-disable-processing=\"false\" data-quarto-bootstrap=\"false\">\n  <thead>\n    <tr class=\"gt_col_headings\">\n      <th class=\"gt_col_heading gt_columns_bottom_border gt_left\" rowspan=\"1\" colspan=\"1\" scope=\"col\" id=\"char\">char</th>\n    </tr>\n  </thead>\n  <tbody class=\"gt_table_body\">\n    <tr><td headers=\"char\" class=\"gt_row gt_left\"><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>1</sup></span> <span data-qmd-base64=\"YXByaWNvdA==\"><span class='gt_from_md'>apricot</span></span></td></tr>\n  </tbody>\n  \n  <tfoot class=\"gt_footnotes\">\n    <tr>\n      <td class=\"gt_footnote\" colspan=\"1\"><span class=\"gt_footnote_marks\" style=\"white-space:nowrap;font-style:italic;font-weight:normal;line-height: 0;\"><sup>1</sup></span> note</td>\n    </tr>\n  </tfoot>\n</table>"
+
 # Footnotes work with group labels in 2-column stub arrangements
 
     Code

tests/testthat/test-tab_footnote.R

@@ -1052,6 +1052,36 @@ test_that("Footnotes are correctly placed with text produced by `fmt_markdown()`
   expect_snapshot_html(gt_tbl_foot_left)
 })
 
+test_that("Footnotes are correctly placed with text produced by `fmt_markdown()` in Quarto (#1773)", {
+  withr::local_envvar("QUARTO_BIN_PATH" = "path")
+  gt_tbl_foot_right <- exibble[1, 2] %>%
+    gt() %>%
+    fmt_markdown(columns = char) %>%
+    tab_footnote(footnote = "note", locations = cells_body(char, 1), placement = "auto")
+
+  gt_tbl_foot_right %>%
+    render_as_html() %>%
+    xml2::read_html() %>%
+    selection_text("[class='gt_row gt_left']") %>%
+    expect_equal("apricot1")
+
+  expect_snapshot_html(gt_tbl_foot_right)
+
+  # placement = left
+  gt_tbl_foot_left <- exibble[1, 2] %>%
+    gt() %>%
+    fmt_markdown(columns = char) %>%
+    tab_footnote(footnote = "note", locations = cells_body(char, 1), placement = "left")
+
+  gt_tbl_foot_left %>%
+    render_as_html() %>%
+    xml2::read_html() %>%
+    selection_text("[class='gt_row gt_left']") %>%
+    expect_equal(paste0("1", "\U000A0", "apricot"))
+
+  expect_snapshot_html(gt_tbl_foot_left)
+})
+
 test_that("Footnotes work with group labels in 2-column stub arrangements", {
 
   gt_tbl <-