Package 'monaco'

Monaco languages

Description

Get the list of available languages in the Monaco editor.

Usage

getMonacoLanguages()

---

Monaco themes

Description

Get the list of available themes of the Monaco editor. All themes are dark, excepted "vs".

Usage

getMonacoThemes()

---

Monaco editor

Description

Open the Monaco editor.

Usage

monaco(
  contents,
  language = NULL,
  theme = NULL,
  tabSize = NULL,
  fontSize = 14,
  header = TRUE,
  width = NULL,
  height = NULL,
  elementId = NULL
)

Arguments

contents	this can be the path to a file, NULL to open an empty editor, missing to open the file currently open in RStudio, or a character vector which corresponds to the lines of a file
language	the language of the contents; if NULL and the contents are read from a file, the mode is guessed from the extension of the file; run getMonacoLanguages to get the list of available languages
theme	the theme of the editor; run getMonacoThemes to get the list of available themes
tabSize	number of spaces for the indentation (usually 2 or 4); if NULL, it is set to the one used in RStudio
fontSize	font size in pixels
header	logical, whether to display the header of the widget
width, height	dimensions; the default values are nice for usage in the RStudio viewer pane
elementId	a HTML id for the container; this is useless for common usage

Examples

# in RStudio, `monaco()` opens the current file:
monaco()

# opens a new, empty JavaScript file:
monaco(NULL, language = "javascript")

# opens an existing file:
monaco(system.file("exampleFiles", "JavaScript.js", package = "monaco"))

# try the SVG viewer; you can zoom and pan the image:
monaco(system.file("exampleFiles", "react.svg", package = "monaco"))

# a dirty Markdown file, try to prettify it:
monaco(system.file("exampleFiles", "Markdown.md", package = "monaco"))


# opens two editors side-by-side:
library(monaco)
library(htmltools)

ed1 <- monaco(
  system.file("exampleFiles", "JavaScript.js", package = "monaco")
)
ed2 <- monaco(
  system.file("exampleFiles", "react.svg", package = "monaco")
)

if(interactive()){
  browsable(
    div(
      div(ed1, style="position: fixed; left: 1vw; right: 51vw;"),
      div(ed2, style="position: fixed; left: 51vw; right: 1vw;")
    )
  )
}


# stacks two editors:
library(monaco)
library(htmltools)

ed1 <- monaco(
  system.file("exampleFiles", "JavaScript.js", package = "monaco"),
  height = "calc(50vh - 40px)"
)
ed2 <- monaco(
  system.file("exampleFiles", "react.svg", package = "monaco"),
  height = "calc(50vh - 40px)"
)

if(interactive()){
  browsable(
    tagList(
      tags$style(HTML(
        ".editor {",
        "  position: fixed;",
        "  left: 1vw;",
        "  width: 98vw;",
        "}"
      )),
      div(
        div(ed1, class = "editor", style = "bottom: calc(50vh + 5px);"),
        div(ed2, class = "editor", style = "top: calc(50vh + 5px);")
      )
    )
  )
}

---

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)
}

---