withMathJax inside modalDialog table

Question

I am trying to include LateX formulas inside a table and I am using the MathJack library to do so. Everthing is working smoothly outside a modalDialog, but when the table is produced within the modalDialog, it does not show as expected. I guess it has do to with what is written in the help page "It only needs to be called once in an app unless the content is rendered after the page is loaded, e.g. via renderUI(), in which case we have to call it explicitly every time we write math expressions to the output.". But I can't figure out how to solve the issue.

Here is a repex :

library(shiny)

ui <- shinyUI(
  fluidPage(
    withMathJax(), 
    actionButton("open", "Open")))


server <- function(input, output, session){  
  
  output$mytable <- renderTable({  
    df <- data.frame(A = c(HTML("$$\\alpha+\\beta$$"), "$$\\alpha+\\gamma$$", "$$\\alpha+\\lambda$$"),B = c(111111, 3333333, 3123.233))  
    df  
  }, sanitize.text.function = function(x) x)
  
  
  
  observeEvent(input$open, {
    showModal(modalDialog(
      withMathJax(),
      h2("$$\\mbox{My Math example }\\sqrt{2}$$"),
      tableOutput('mytable')))
  })
}

shinyApp(ui = ui, server = server)

Answer 1

Oddly, that works like this:

  observeEvent(input$open, {
    showModal(withMathJax(modalDialog(
      h2("$$\\mbox{My Math example }\\sqrt{2}$$"),
      withMathJax(tableOutput('mytable')))))
  })

EDIT

Since there are some problems with this solution, here is a solution using KaTeX instead of MathJax:

library(shiny)

js <- " 
$(document).on('shiny:value', function(event) {
  if(event.name === 'mytable'){
    // h2 element
    var $h2 = $('#title');
    var title = $h2.html();
    var matches_title = title.match(/(%%+[^%]+%%)/g);
    var i, code;
    for(i=0; i<matches_title.length; i++){
      code = matches_title[i].slice(2,-2);
      title = title.replace(matches_title[i], katex.renderToString(code));
    }
    $h2.html(title);
    $h2.css('visibility', 'visible');
    // table:
    var matches = event.value.match(/(%%+[^%]+%%)/g);
    var newvalue = event.value;
    for(i=0; i<matches.length; i++){
      code = matches[i].slice(2,-2);
      newvalue = newvalue.replace(matches[i], katex.renderToString(code));
    }
    event.value = newvalue;
  }
})
" 

css <- "#mytable td:nth-child(3) {display: none;}"

ui <- fluidPage(
  tags$head(
    tags$link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css", integrity="sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ", crossorigin="anonymous"),
    tags$script(defer="", src="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.js", integrity="sha384-VQ8d8WVFw0yHhCk5E8I86oOhv48xLpnDZx5T9GogA/Y84DcCKWXDmSDfn13bzFZY", crossorigin="anonymous"),
    tags$script(HTML(js)),
    tags$style(HTML(css))
  ),
  titlePanel("Hello Shiny!"),
  br(),
  actionButton("open", "Open")
)

server <- function(input, output, session){  
  
  output$mytable <- renderTable({ 
    data.frame(
      A = c("%%\\alpha+\\beta%%", "%%\\alpha+\\gamma%%", "%%\\alpha+\\lambda%%"),
      B = c(111111, 3333333, 3123.233),
      ` ` = rep(input$open, 3),
      check.names = FALSE
    ) 
  }, sanitize.text.function = function(x) x)
  
  
  observeEvent(input$open, {
    showModal(modalDialog(
      h2(
        id = "title", 
        style = "visibility: hidden;", 
        "%%\\boxed{Math}\\sqrt{2}%%"
      ),
      tableOutput("mytable")
    ))
  })
  
}

shinyApp(ui, server)

Note that I include a reactive column in the dataframe:

` ` = rep(input$open, 3)

That's because the KaTeX rendering works only one time if I don't do that. Then I hide this column with some CSS.