Need To Display Dynamic Text Generated From Server Onto UI Within A TextArea(with Syntax Highlighting)

I am trying to push a randomly generated string onto a textarea on UI. New to HTML/Shiny/JS but I know a few basics. My end goal is to use CodeMirror (Whole download) or ShinyAce

Solution 1:

Hi I have commented out you css and java scripts because I don't the where the problem. Your problem is the same as in this question

How to create a variable hyperlink in an R Shiny App

Here is a working version of your code

library(shiny)

if (interactive()) {

  ui <- shinyUI(
    fluidPage(
      tags$head(tags$title("Title")
                # tags$link(rel = "stylesheet", href = "codemirror.css"),
                # tags$link(rel = "stylesheet", href = "cobalt.css"),
                # tags$script(src = "codemirror.js"),
                # tags$script(src = "r.js")
      ),
      uiOutput(outputId = "textStringToDisplay")
#       tags$script(
#         'var editorR = CodeMirror.fromTextArea(textBox, {
#         mode: "r",
#         lineNumbers: true,
#         smartindent: true
# });
#         editorR.setOption("theme", "cobalt");
#         editorR.setSize("50%","100%");')
))

  server <- function(input, output){
    output$textStringToDisplay <- renderUI(
      tags$textarea(id="textBox", name = "Feedback", paste0(sample(letters,15),collapse = "")))
  }

  shinyApp(ui = ui, server = server)
}

Solution 2:

Here's my final implementation. Would like to thank @Bertil for his suggestion regarding renderUI. Had to use shinyjs package and the runjs function to get the JS script running. Also it only works when paired with an event (like clicking a button). Do not know how to trigger it when the app loads(will post another question about this sometime later).

library(shiny) 
library(shinyjs)

if (interactive()) {
     ui <- shinyUI(
    fluidPage(
      useShinyjs(),
      tags$head(tags$title("Title"),
                tags$link(rel = "stylesheet", href = "codemirror.css"),
                tags$link(rel = "stylesheet", href = "cobalt.css"),
                tags$script(src = "codemirror.js"),
                tags$script(src = "r.js")
      ),
      actionButton("btn1","Click to see code"),
      uiOutput(outputId = "textStringToDisplay")))
     server <- function(input, output){
    output$textStringToDisplay <- renderUI(
      tags$textarea(id="textBox", name = "Feedback", paste0(sample(letters,15),collapse = "")))

    ButtonPressCounter <- 0

    observeEvent(input$btn1,
                 {
                   ButtonPressCounter <<- ButtonPressCounter + 1 # Need it to happen only once
                   if(ButtonPressCounter <= 1){
                     shinyjs::runjs(
                       'var editorR = CodeMirror.fromTextArea(textBox, {
                       mode: "r",
                       lineNumbers: true,
                       smartindent: true});
                       editorR.setOption("theme", "cobalt");
                       editorR.setSize("100%","100%");')
                   }
                 })
       }
     shinyApp(ui = ui, server = server) }