Latex AND (LONG) Text in R Shiny selectInput/selectizeInput

Question

Before you go after me regarding duplicate posts, hear me out: I already stumbled across posts like these: latex in shiny selectInput

Which are super useful! However, the main issue is that I just don't want Greek letters... I want words AND Greek letters... But ALSO, IT IS LONG and it doesn't render the way I want it to be!! Continue further in this post to see what I mean.

Here's some example test code:

library(shiny)

ui <- shinyUI(
  fluidPage(
    tags$head(
      tags$link(rel="stylesheet", 
                href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css", integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH", 
                crossorigin="anonymous"),
      tags$script(src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js", integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm", 
                  crossorigin="anonymous")
    ),
    selectizeInput(
      inputId = "test_id", 
      label = "test_label", 
      choices = list("\\text{hahaha } \\omega \\text{ hahaha insert more text please help me...}" = 1,
                     "\\text{hahaha } \\beta \\text{ hahaha}" = 2),
      options = list(render = I("
      {
        item: function(item, escape) { 
                var html = katex.renderToString(item.label);
                return '<div>' + html + '</div>'; 
              },
        option: function(item, escape) { 
                  var html = katex.renderToString(item.label);
                  return '<div>' + html + '</div>'; 
                }
      }")
      )
    )
  )
)

server <- function(input, output, session){  
  # server side code here...
}

shinyApp(ui = ui, server = server)

Notice that when you load the app, it looks like this:

And you can see it is slightly cut off!! (And no, I don't want to increase the width of the sidebarlayout.) To summarize There are two things I want:

1. Have the remaining words of the sentence not be cut off.
2. Change the format of the text to the basic font in R Shiny. I.e, instead of the above solution where I just used \text{}, I would prefer:

Many thanks to whoever can help!

Edit: I realise that I can fix 1. by spamming "\newline" when it ends (to make it wrap as I wanted), but I feel like there may be a better solution.

Answer 1

If you do as follows then the text is wrapped so there's no truncation, but the problem is that this way assumes the same text for each choice.

    selectizeInput(
      inputId = "test_id", 
      label = "test_label", 
      choices = list("\\omega" = 1,
                     "\\beta" = 2),
      options = list(render = I("
      {
        item: function(item, escape) { 
                var html = katex.renderToString(item.label);
                return '<span>hahaha... ' + html + ' hahahahahaha insert more text here... please help me...</span>'; 
              },
        option: function(item, escape) { 
                  var html = katex.renderToString(item.label);
                  return '<span> hahaha... ' + html + ' hahahahahaha that is really funny do you agree?</span>'; 
                }
      }")
      )
    )

---

Edit

Here is how to do with individual texts:

    selectizeInput(
      inputId = "test_id", 
      label = "test_label", 
      choices = NULL,
      options = list(
        options = list(
          list(
            value = 1,
            head = "hahaha... ",
            latex = "\\omega",
            tail = " hahahahaha... insert more text here because I want to be long !! please help me !!"
          ),
          list(
            value = 2,
            head = "hohoho... ",
            latex = "\\beta",
            tail = " hohohohohoho that is really funny"
          )
        ),
        valueField = "value",
        render = I("{
        item: function(item, escape) { 
                var html = katex.renderToString(item.latex);
                return '<span>' + item.head + html + item.tail + '</span>'; 
              },
        option: function(item, escape) { 
                  var html = katex.renderToString(item.latex);
                  return '<span>' + item.head + html + item.tail + '</span>';; 
                }
      }")
      )
    )

---

Edit

Replace span with div.