TinyMCE reverts to basic text box when it doesn't start visible, or is removed and returned to visibility.

[yogat3ch]

TinyMCE reverts to basic text box when it doesn't start visible, or is removed and returned to visibility.

[Graham-McCracken]

Hi @yogat3ch,

Came across your issue coincidentally a few days after highlighting my same issue of stackoverflow (https://stackoverflow.com/questions/74498688/alternate-the-renderui-state-of-tinymce-editor-in-r-shiny/74502172#74502172).

I used a shinyjs workaround for the show/hide functionality:

library(shiny)
library(ShinyEditor)
library(shinyjs)

ui <- fluidPage(
  use_editor("API-KEY"),
  useShinyjs(),
  uiOutput("tiny"),
  actionButton( "toggle", "Toggle TinyMCE" ))
server <- function(input, output, session) {

    output$tiny = renderUI( editor('textcontent'))
  observe({if(input$toggle %% 2 == 0) {
    hide('tiny')
  } else {
    show('tiny')
  }
  })
}
shinyApp(ui = ui, server = server)

I hope that helps somewhat.

[yogat3ch]

Hi @deepanshu88,
I think I've fixed the issue where showing/hiding the element cause it to render as a text area when made visible again. However it required a substantial overhaul to the package.
There are still outstanding issues with modalDialog and renderUI where the element renders as a normal textarea when the modal or the uiOutput is not yet in the DOM when the TinyMCE.init method runs. Further discussion on PR #6.
I've PR'd these changes in #6 if you want to add them!

[yogat3ch]

Here's a working example that shows/hides the TinyMCE:

devtools::install_github("yogat3ch/ShinyEditor")
# UI
ui <- fluidPage(
  tags$head(
    # Setup
    use_editor(Sys.getenv("TINYMCE_KEY")),
    shinyjs::useShinyjs()
  ),
  titlePanel("TinyMCE Bug when beginning non-visible"),
  absolutePanel(
    id = "note_panel",
    class = "shinyjs-hide",
    shiny::div(
      ShinyEditor::editor_ui(
        "textcontent",
        init_text = ""
      )
    ),
    top = "45px",
    left = "40px",
    draggable = TRUE
  ),
  # Text Input 1
  fluidRow(
    column(6,
           actionButton(
             "notepad",
             "Notepad",
             shiny::icon("book")
           )),
    column(
      width = 6,

      )
  )

)

# Server
server <- function(input, output, session) {
  content <- reactiveVal("")
  # Generate HTML
  hide <- TRUE

  editor_server("textcontent",
                options = list(
                  branding = FALSE,
                  plugins = c('lists', 'table', 'link', 'image', 'code'),
                  toolbar1 = 'bold italic forecolor backcolor | formatselect fontselect fontsizeselect | alignleft aligncenter alignright alignjustify',
                  toolbar2 = 'undo redo removeformat bullist numlist table blockquote code superscript  subscript strikethrough link image'
                ),
    inputId = "mytext")


  observeEvent(input$notepad, {
    hide <<- if (hide) {
      FALSE
    } else {
      content(enc2utf8(rlang::`%||%`(input$mytext, content())))
      TRUE
    }
    browser()
    shinyjs::toggleClass("note_panel", asis = TRUE, class = "shinyjs-hide")
  }, priority = -1)



}

# Run App
shinyApp(ui = ui, server = server)