monaco-shiny {monaco}

Shiny bindings for Monaco editor

Description

Output and render functions for using Monaco editors within Shiny applications and interactive Rmd documents.

Usage

monacoOutput(outputId, width = "100%", height = "400px")

renderMonaco(expr, env = parent.frame(), quoted = FALSE)

Arguments

outputId

output variable to read from

width, height

CSS measurements like "100%", "400px", "auto", or a number, which will be coerced to a string and have "px" appended

expr

an expression that creates a Monaco editor with monaco

env

the environment in which to evaluate expr

quoted

logical, whether expr is a quoted expression

Examples

library(monaco)
library(shiny)

ui <- fluidPage(
  monacoOutput("ed", height = "400px")
)

server <- function(input, output){

  output[["ed"]] <- renderMonaco({
    monaco(
      system.file("exampleFiles", "JavaScript.js", package = "monaco")
    )
  })

}

if(interactive()){
  shinyApp(ui, server)
}


# Customizing the input range, using the 'sass' package ####

library(monaco)
library(shiny)
library(sass)

ui <- fluidPage(

  uiOutput("style"),

  titlePanel("Customized range input"),

  fluidRow(
    column(
      width = 4,
      actionButton("sass", "Compile to CSS", class = "btn-primary btn-block")
    ),
    column(
      width = 8,
      tags$input(type = "range", min = 0, max = 10, step = 0.1)
    )
  ),

  br(),

  fluidRow(
    column(
      width = 6,
      monacoOutput("scss", height = "75vh")
    ),
    column(
      width = 6,
      monacoOutput("css", height = "75vh")
    )
  )
)

server <- function(input, output){

  output[["scss"]] <- renderMonaco({
    monaco(
      system.file(
        "htmlwidgets", "customRangeInput", "customRangeInput.scss",
        package = "monaco"
      ),
      header = FALSE
    )
  })

  css <- eventReactive(input[["sass"]], {
    sass(input[["scss"]])
  })

  output[["css"]] <- renderMonaco({
    monaco(css(), language = "css", header = FALSE)
  })

  output[["style"]] <- renderUI({
    tags$head(tags$style(HTML(input[["css"]])))
  })

}

if(interactive()){
  shinyApp(ui, server)
}