wc-monaco-editor
wc-monaco-editor copied to clipboard
A vanilla Monaco Editor web component
<wc-monaco-editor> Easily Embed a Monaco Editor
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 (defaulteditor
) -
src
- load the source from an external file -
language
- set the source language -
font-size
- set the font size (default14px
); -
tab-size
- set the tab size (in spaces) (default2
) -
style
- CSS styling (defaultheight: 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 (defaultnone
)
Note: The ID attribute is required if there are multiple editors
Properties
-
editor
- the Monaco editor instance -
src
- get/set thesrc
attribute from JS -
value
- get/set the editor's contents -
tabSize
- get/set thetab-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.
Contributing
See CONTRIBUTING.md