MonacoEditor Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a MonacoEditor LWC ReadMe for each Vlocity release.

Managed Package app icon This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The MonacoEditor Lightning Web Component is a code editor tool used inside Salesforce.

Available c-monaco-editor Attributes

Attribute	Value	Type	Required	Description
config	object	string	yes	Sets the options to create the editor.
value		string		Adds default code inside the editor.
height	css	string		To adjust the height of the editor, set this value. Supports all css height value options such as units (for example, 'px', 'em', an so on) and functions (for example, 'calc').
editor-src-url	url	string		Defines the source of the editor. By default, editor-src-url points to the static resource. Used for off-platform support.
modal	true, false (Default: false)	boolean		Adds support for monaco editor to open in a modal.

Example c-monaco-editor Component

<c-monaco-editor
    onchange={valueChnged}
    editor-src-url={url}
    config={editorConfig}
    value="var t = 10"
    height="calc(100vh - 350px)"
></c-monaco-editor>

<!-- Monaco Editor as modal-->
 <c-modal size="large" icon-url={iconUrl}>
    <div slot="header">
      <h1>Monaco Editor</h1>
    </div>
    <div slot="content">
      <c-monaco-editor
        onchange={valueChnged}
        modal="true"
        editor-src-url={url}
        config={editorModalConfig}
        value="var t = 10"
        height="calc(100vh - 350px)"
    ></c-monaco-editor>
    </div>
  </c-modal>

Available Methods

updateConfig(Type,Value)

Updates the editor's configuration settings.

Option	Value	Description
theme	vs, vs-dark, hc-black	Sets the theme for the editor.
language	html, css, json, typescript	Sets the language of the editor.
options	object	Sets the editor options such as readOnly.

let editor = this.template.querySelector("c-monaco-editor");
// set theme
editor.updateConfig("theme", "vs");
// set language
editor.updateConfig("language", "html");
// set readOnly
editor.updateConfig("options", { readOnly:true });

Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The MonacoEditor Lightning Web Component is a code editor tool used inside Salesforce.

Available c-monaco-editor Attributes

Attribute	Value	Type	Required	Description
config	object	string	yes	Sets the options to create the editor.
value		string		Adds default code inside the editor.
height	css	string		To adjust the height of the editor, set this value. Supports all css height value options such as units (for example, `px', `em', an so on) and functions (for example, `calc').
editor-src-url	url	string		Defines the source of the editor. By default, editor-src-url points to the static resource. Used for off-platform support.
modal	true, false (Default: false)	boolean		Adds support for monaco editor to open in a modal.

Example c-monaco-editor Component

<c-monaco-editor
    onchange={valueChnged}
    editor-src-url={url}
    config={editorConfig}
    value="var t == 10"
    height="calc(100vh - 350px)"
></c-monaco-editor>

<!-- Monaco Editor as modal-->
 <c-modal size="large" icon-url={iconUrl}>
    <div slot="header">
      <h1>Monaco Editor</h1>
    </div>
    <div slot="content">
      <c-monaco-editor
        onchange={valueChnged}
        modal="true"
        editor-src-url={url}
        config={editorModalConfig}
        value="var t == 10"
        height="calc(100vh - 350px)"
    ></c-monaco-editor>
    </div>
  </c-modal>

Available Methods

updateConfig(Type,Value)

Updates the editor’s configuration settings.

Option	Value	Description
theme	vs, vs-dark, hc-black	Sets the theme for the editor.
language	html, css, json, typescript	Sets the language of the editor.
options	object	Sets the editor options such as readOnly.

let editor == this.template.querySelector("c-monaco-editor");
// set theme
editor.updateConfig("theme", "vs");
// set language
editor.updateConfig("language", "html");
// set readOnly
editor.updateConfig("options", { readOnly:true });