DplMonaco Web Component

DplMonaco is a web component that wraps the Monaco Editor, providing a customizable code editor in your web applications.

Adding to a page

just add the following script tag to your page: <script type="module" src="https://components.dynamicplatform.com/components/dpl-monaco/1.0.0/dpl-monaco.js"></script>

Usage

To use the DplMonaco component in your HTML:

<dpl-monaco language="json">{"a": 1}</dpl-monaco>

more advanced usage:

<dpl-monaco
  model-uri="inmemory://model.json"
  language="json"
  automatic-layout
  line-numbers
  rounded-selection
  last-line
  read-only
  theme="vs-dark"
  word-wrap
  wrap-column="80"
  wrapping-indent="same"
>{"a": 1}<dpl-monaco>

Attributes

• model-uri: The internal file name used for default schema matching and other features. Default is inmemory://model.json.
• language: The language mode of the editor. Default is json.
• automatic-layout: Enables or disables automatic layout of the editor. No default is true
• line-numbers: Controls the visibility of line numbers. can be on or off. Default is on.
• rounded-selection: Enables or disables rounded selection. can be on or off
• last-line: Ensures the last line is always visible. No default value specified, presence of attribute enables the feature.
• read-only: If present, the editor will be in read-only mode.
• theme: Sets the theme of the editor. Example values are vs-dark, vs-light, etc.
• word-wrap: Enables or disables word wrapping..
• wrap-column: The column where the editor will wrap. Default is 80.
• wrapping-indent: The indent strategy for wrapped lines. Possible values are none, same, indent or deepIndent.

JavaScript API

You can interact with the Monaco editor instance through the following JavaScript property accessors:

const editorComponent = document.querySelector('dpl-monaco');

// Get or set the content of the editor
let currentValue = editorComponent.value;
editorComponent.value = "your new content";

// Get or set the theme of the editor
let currentTheme = editorComponent.theme;
editorComponent.theme = "vs-dark";

// Get or set the language of the editor
let currentLanguage = editorComponent.language;
editorComponent.language = "javascript"; 

// Access the editor's container
let containerElement = editorComponent.container;

// Access the monaco editor instance
let monacoEditorInstance = editorComponent.editor;

// Access the monaco module
let monacoModule = editorComponent.monaco;

// Access the editor's model
let editorModel = editorComponent.model;

// Get the currently selected text in the editor
let selectedText = editorComponent.selectedText;


// more advanced...

// JSON schema...
// you can add a JSON schema to the editor, and it will be used for validation and intellisense
// the schema will be added to the monaco editor's schema registry
// - uri: the uri of the schema
// - schema: the schema object (parsed not json)
// - validate: if true, the schema's will be used for validation, affects whole editor, not just this schema
// - fileMatch: a (single) uri, if this matched the model-uri the schema will be applied without a $schema property
addJsonSchema(uri, schema, validate = true, fileMatch = undefined)

// disposes the current moanco model and creates a new one
// - value: the text for the editor body
// - language: the language mode of the editor
// - uri: the model-uri of the model
setModel(value, language, uri)

// sets the options of the monaco editor
// calls editor updateOptions internally
setOptions(options)

Release Notes

• v1.0.0 [2023-11-08] first release version (87e930358172db02ab8853af4b267412c36bfa0f)