Code Editor

The code editor field is a custom field that allows you to edit code in a monaco editor, which supports a wide range of programming languages.

Note: The code editor loads the Monaco editor from a CDN on first load. If the CDN is not available, the code editor will fall back to a plain text area.

Samples

CSS Example (Default Language)

1.3ms 932 allocs
View Source 
<%
  code_field = :text_area_value
  form.object.text_area_value = <<~CSS
    .example {
      color: red;
    }
  CSS
%>
<%= render 'shared/fields/code_editor', form: form, method: code_field %>

JS Example

1.0ms 864 allocs
View Source 
<%
  code_field = :text_area_value
  form.object.text_area_value = <<~JS
    import { Component } from "@hotwired/stimulus"

    export default class extends Component {
      connect() {
        console.log("Hello, world!");
      }
    }
  JS
%>
<%= render 'shared/fields/code_editor', form: form, method: code_field, language: :javascript %>

HTML Example

0.4ms 693 allocs
View Source 
<%
  code_field = :text_area_value
  form.object.text_area_value = <<~HTML
    <div class="example">Hello, world!</div>
  HTML
%>
<%= render 'shared/fields/code_editor', form: form, method: code_field, language: :html %>

Options

Name Required Type Default Description 
language
 
String
 
"css"
 
The coding language of the editor
 
theme_light
 
String
 
"vs"
 
The theme of the editor in light mode
 
theme_dark
 
String
 
"vs-dark"
 
The theme of the editor in dark mode
 
monaco_config
 
String
 

              
Extra config properties to pass to the monaco editor

        

        

              
code_field_options

              
                
              
              
String

              

              
Options to pass to the wrapper div of the code editor e.g. for custom data-action properties