README

The shinyEditor package enables Shiny application developers to use the Ace text editor and monaco editor in their applications. All current modes (languages) and themes are supported in this package. The mode, theme, and current text can be defined when the element is initialized in ui.R or afterwards using the shinyjs::runjs() function. The editor registers itself as a reactive Shiny input, so the current value of the editor can easily be pulled from server.R using shinyEditor::getAceValue(outputId).

-> Text Comparison

-> Spell Checking (Enable in Ace Editor)

-> Extra SAS Code Highlight Mode (Enable in Ace Editor)

Installing

install.packages("shinyEditor") # Not available

If you prefer, you can also install this package straight from GitHub via devtools::install_github():

devtools::install_github("zearoby/shinyEditor")

Getting Started

01-ace_editor

shiny::runApp(system.file("examples/01-ace_editor", package="shinyEditor"))

02-ace_diff

shiny::runApp(system.file("examples/02-ace_diff", package="shinyEditor"))

03-ace_diff

shiny::runApp(system.file("examples/03-ace_diff", package="shinyEditor"))

04-monaco_editor

shiny::runApp(system.file("examples/04-monaco_editor", package="shinyEditor"))

05-monaco_diff

shiny::runApp(system.file("examples/05-monaco_diff", package="shinyEditor"))

Simple Examples

1. Ace Editor

library(shiny)
library(shinyEditor)

ui <- shiny::fluidPage(
   style = "padding: 0px;",
   shiny::div(
      style = "height: 100vh; display: flex; flex-direction: column;",
      shinyEditor::aceEditorOutput("editor", height = "100%")
   )
)

server <- function(input, output, session) {
   output$editor <- shinyEditor::renderAceEditor({
      shinyEditor::aceEditor(
         value = "# This is a comment",
         mode = "ace/mode/r",
         tabSize = 3,
         printMarginColumn = 80
      )
   })
}

shinyApp(ui, server)

2. Ace Diff Editor

library(shiny)
library(shinyEditor)

ui <- shiny::fluidPage(
   style = "padding: 0px;",
   shiny::div(
      style = "height: 100vh; display: flex; flex-direction: column;",
      shinyEditor::aceDiffEditorOutput("editor", height = "100%")
   )
)

server <- function(input, output, session) {
   output$editor <- shinyEditor::renderAceDiffEditor({
      shinyEditor::aceDiffEditor(
         valueA = "123333333",
         valueB = "321333333"
      )
   })
}

shinyApp(ui, server)

3. Create Diff View for Exist Editors

library(shiny)
library(shinyjs)
library(shinyEditor)
library(htmltools)

ui <- shiny::fluidPage(
   style = "padding: 0; height: 100vh;",
   shinyjs::useShinyjs(),
   htmltools::div(
      style = "display: flex; flex-direction: column; height: 100%; width: 100%;",
      htmltools::div(
         shiny::actionButton("create", "Create Diff View"),
         shiny::actionButton("remove", "Remove Diff View")
      ),
      htmltools::div(
         style = "display: flex; flex: 1;",
         shinyEditor::aceEditorOutput("editor1", height = "100%"),
         shinyEditor::aceEditorOutput("editor2", height = "100%")
      )
   )
)

server <- function(input, output, session) {
   output1_id <- "editor1"
   output2_id <- "editor2"
   
   output[[output1_id]] <- shinyEditor::renderAceEditor({
      shinyEditor::aceEditor(
         value = readLines('../../../R/aceEditor.R'),
         mode = "ace/mode/r"
      )
   })
   
   output[[output2_id]] <- shinyEditor::renderAceEditor({
      shinyEditor::aceEditor(
         value = readLines('../../../R/aceDiffEditor.R'),
         mode = "ace/mode/r"
      )
   })
   
   shiny::observeEvent(input$create, {
      shinyEditor::createAceDiffView(editorAId = output1_id, editorBId = output2_id)
   })
   
   shiny::observeEvent(input$remove, {
      shinyEditor::removeAceDiffView(outputId = output1_id)
   })
}

shinyApp(ui, server)

4. Monaco Editor

library(shiny)
library(shinyEditor)

ui <- shiny::fluidPage(
   style = "padding: 0px;",
   shiny::div(
      style = "height: 100vh; display: flex; flex-direction: column;",
      shinyEditor::monacoEditorOutput("editor", height = "100%")
   )
)

server <- function(input, output, session) {
   output$editor <- shinyEditor::renderMonacoEditor({
      shinyEditor::monacoEditor(
         value = 'readLines("./inst/examples/01-editor/ui.R")'
      )
   })
}

shinyApp(ui, server)

Notice

value <- "new text"
shinyjs::runjs(
   paste0(
      "const editor = ace.edit('", session$ns(outputId), "');",
      "editor.setValue(", jsonlite::toJSON(value, auto_unbox = TRUE), ");"
   )
)

visible <- FALSE
shinyjs::runjs(
   paste0(
      "const editor = ace.edit('", session$ns(outputId), "');",
      'editor.setOption("showLineNumbers", ', tolower(visible), ');',
      "editor.renderer.setShowGutter(", tolower(visible), ");"
   )
)

shinyEditor