<wc-monaco-editor> Easily Embed a Monaco Editor

Installation

Installation

npm i @vanillawc/wc-monaco-editor

Import from NPM

<script type="module" src="https://raw.githubusercontent.com/vanillawc/wc-monaco-editor/main/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="https://raw.githubusercontent.com/vanillawc/wc-monaco-editor/main/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.

Contributing

See CONTRIBUTING.md