deepanshu88/shinyeditor

Rich Text Editor in Shiny App

shinyeditor's Issues

Editor in modal dialog doesn't work correctly on 2nd open

Hi -
See this example where the editor is within a modal dialog. When you open it the first time, it's fine. Open it again and it's just a text area input box.

library(shiny)
library(ShinyEditor)

# UI
ui <- fluidPage(
  
  # Setup
  use_editor(Sys.getenv("TINY_EDITOR_API_KEY")),
  titlePanel("Editor in Modal Dialog Bug"),
  
  # Text Input 1
  fluidRow(
    column(
      width = 6,
      p("Open modal, dismiss, then open again"),
      actionButton(
        "show_modal",
        "Show Modal"
      ))
  )
  
)

# Server
server <- function(input, output, session) {
  
  # Generate HTML
  observeEvent(input$show_modal, {
    showModal(
      modalDialog(
        editor("editor",text = "<p>Some HTML</p>")
      )
    )
  
    
  })

  
}

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

How to use editor under renderUI?

First off - excellent package from what I have used so far!

The issue I have come across is that when I have an editor updated by a reactive element, it loads OK initially and then after the update defaults to a plain textArea input.

I am building an app at the moment where we store comments about KPIs in a local MySQL database.
But the same comment field will be used and then have it's content updated depending on which region you select in an input.

output$stx_pnu <- renderUI({
  #NOTE: Import Data from local DB based on region input
  db <- dbxConnect(adapter = RMariaDB::MariaDB(), group = "SCERr-db")
  df <- dbGetQuery(db, paste0("SELECT id, comment FROM comments WHERE id = '", input$region, "_pnu'"))
  dbxDisconnect(db)

  #SAMPLE DATA: (with image removed)
  # df <- data.frame(
  #              id=c("Eastern_pnu"),
  #              comment=c("<p>Test this <strong>out</strong></p><p><span style="background-color: #fbeeb8;">new test</span></p><p><em>Hello&nbsp;<strong>Goodbye</strong></em></p>")
  #       )

  #NOTE: UI output
  fluidRow(
    fluidRow(
      column(
        width = 12,
          editor('TINYtx_comment_pnu',
                 text = as.character(df$comment),
                 options = "branding: false,
                           height: 600,
                           plugins: ['autoresize', 'image', 'lists', 'charmap', 'insertdatetime', 'table', 'emoticons'],
                           toolbar1: 'undo redo | bold italic forecolor backcolor | fontselect fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist table blockquote link image',
                           menubar: false"
          )
      )
    ),
    br(),
    #NOTE: Submit button to save changes to DB
    fluidRow(
      actionButton("tx_submit_pnu", label = "Save changes", icon = icon("floppy-disk", lib = "glyphicon"), class = "btn-success")
    )
  )
})

This is on first load from the database info:

Then after I change an input:

UpdateEditor

Hi !
First, thanks for this usefull package.
UpdateEditor does not seem to update the editor, even the minimum exemple.
Would you have a suggestion ?.
Ben

library(shiny)
library(ShinyEditor)

# UI
ui <- fluidPage(
  
  # Setup
  use_editor("API-Key"),
  titlePanel("HTML Generator"),
  editor(id='textcontent'),
  actionButton("updatedata", "Update Editor", icon = icon("edit"))
)


# Server
server <- function(input, output, session) {
  
  
  observeEvent(input$updatedata, {
    print("ok")
    UpdateEditor(session,
                 id = "textcontent",
                 text = "ca marche !")
    
  })
  
}

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

Here is my sessionInfo()

R version 4.0.5 (2021-03-31)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 20.04.2 LTS

Matrix products: default
BLAS:   /usr/lib/x86_64-linux-gnu/blas/libblas.so.3.9.0
LAPACK: /usr/lib/x86_64-linux-gnu/lapack/liblapack.so.3.9.0

locale:
 [1] LC_CTYPE=fr_FR.UTF-8       LC_NUMERIC=C               LC_TIME=fr_FR.UTF-8        LC_COLLATE=fr_FR.UTF-8     LC_MONETARY=fr_FR.UTF-8    LC_MESSAGES=fr_FR.UTF-8   
 [7] LC_PAPER=fr_FR.UTF-8       LC_NAME=C                  LC_ADDRESS=C               LC_TELEPHONE=C             LC_MEASUREMENT=fr_FR.UTF-8 LC_IDENTIFICATION=C       

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] ShinyEditor_0.1.0 shiny_1.6.0      

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.6        digest_0.6.27     later_1.1.0.1     mime_0.10         R6_2.5.0          jsonlite_1.7.2    lifecycle_1.0.0   xtable_1.8-4      magrittr_2.0.1   
[10] cachem_1.0.4      rlang_0.4.10      promises_1.2.0.1  jquerylib_0.1.3   bslib_0.2.4       ellipsis_0.3.1    tools_4.0.5       httpuv_1.5.5      fastmap_1.1.0    
[19] compiler_4.0.5    htmltools_0.5.1.1 sass_0.3.1 

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

Hi @deepanshu88,
Just found this package and hoping it will work for our use case!

I'm finding that the editor shows up as a basic text box if it doesn't start visible and is made visible by user action. Alternatively, if it starts visible, it loads, but when it's hidden and then made visible again, it's back to a basic textbox.

A reprex is as follows:

library(shiny)
library(ShinyEditor)
require(shinyjs)
require(rlang)
# UI
ui <- fluidPage(
  tags$head(
    # Setup
    use_editor(Sys.getenv("TINYMCE_KEY")),
    shinyjs::useShinyjs()
  ),
  titlePanel("TinyMCE Bug when beginning non-visible"),

  # Text Input 1
  fluidRow(
    column(6,
           actionButton(
             "notepad",
             "Notepad",
             shiny::icon("book")
           )),
    column(
      width = 6,
      uiOutput("note_panel")
      )
  )

)

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

    editorText(session, editorid = 'textcontent', outputid = 'mytext')
    content(enc2utf8(rlang::`%||%`(input$mytext, "")))
    hide <<- if (hide)
      FALSE
    else
      TRUE
  })

  output$note_panel <- renderUI({
    absolutePanel(
      class = ifelse(hide, "shinyjs-hide", ""),
      shiny::div(
        ShinyEditor::editor(
          "textcontent",
          text = content(),
          options = "branding: false,
           height: 300,
           plugins: ['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'"
        )
      ),
      top = "45px",
      left = "40px",
      draggable = TRUE
    )

  })

}

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

Any ideas on how to fix the issue?

How to trigger editorText output?

Hi -
First, thanks for a useful package! I have just started using it, but I am running into an issue. See below for a slightly modified version of your minimal example. Note that you have to press the button twice to actually get the output text to print. On the first press, the value is NULL. How can I access the output text/html immediately after editorText()? For example, if I wanted to write the text to a file.

library(shiny)
library(ShinyEditor)

# UI
ui <- fluidPage(
  
  # Setup
  use_editor(Sys.getenv("TINY_EDITOR_API_KEY")),
  titlePanel("HTML Generator"),
  
  # Text Input 1
  fluidRow(
    column(
      width = 6,
      editor('textcontent'),
      br(),
      actionButton(
        "print",
        "Print HTML to Console"
      ))
  )
  
)

# Server
server <- function(input, output, session) {
  
  # Generate HTML
  observeEvent(input$print, {
    
    editorText(session, editorid = 'textcontent', outputid = 'mytext')
    print(input$mytext)
    
  })
  
}

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