@vanillawc/wc-monaco-editor NPM

Installation

Installation

npm i @vanillawc/wc-monaco-editor

Import from NPM

<script type="module" src="node_modules/@vanillawc/wc-monaco-editor/index.js"></script>

Import from CDN

<script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/wc-monaco-editor@1/index.js"></script>

Demo

Try it out here

Usage

Attributes

id - the editor id (default editor)
src - load the source from an external file
language - set the source language
font-size - set the font size (default 14px);
tab-size - set the tab size (in spaces) (default 2)
style - CSS styling (default height: 100%; width: 100%;)
no-minimap - disables the source minimap when present
word-wrap - enables word wrapping when present
wrap-indent - set the indent ['none','same','indent','deepindent'] for word wrapped lines (default none)

Note: The ID attribute is required if there are multiple editors

Properties

editor - the Monaco editor instance
src - get/set the src attribute from JS
value - get/set the editor's contents
tabSize - get/set the tab-index attribute from JS

Basic Usage

To edit plaintext

<wc-monaco-editor></wc-monaco-editor>

Language Support

Language support enables syntax highlighting, code completion, etc.

<wc-monaco-editor language="javascript"></wc-monaco-editor>

External Source

Load an external source file with the src attribute

<wc-monaco-editor src="sample.js" language="javascript"></wc-monaco-editor>

Advanced Configuration

A config can be provided for advanced use cases that require the full spectrum of Monaco Editor options.

<wc-monaco-editor config="config.json"></wc-monaco-editor>

config.json

{
  "language": "javascript",
  "minimap": {
    "enabled": false
  },
  "tabSize": 2,
  "fontSize": 16,
  "wordWrap": "on",
  "lineNumbersMinChars": 3,
  "wrappingIndent": "same",
  "mouseWheelZoom": true,
  "copyWithSyntaxHighlighting": false
}

Note: See the EditorOptions official documentation for all available options.