<wc-monaco-editor> Easily Embed a Monaco Editor
## Installation
*Installation*
```sh
npm i @vanillawc/wc-monaco-editor
```
*Import from NPM*
```html
```
*Import from CDN*
```html
```
## Demo
Try it out [here](https://vanillawc.github.io/wc-monaco-editor/demo/index.html)
## 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
```html
```
### Language Support
Language support enables syntax highlighting, code completion, etc.
```html
```
### External Source
Load an external source file with the `src` attribute
```html
```
### Advanced Configuration
A config can be provided for advanced use cases that require the full spectrum of Monaco Editor options.
```html
```
*config.json*
```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.*
[EditorOptions]: https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#editoroptions
## Contributing
See [CONTRIBUTING.md](https://github.com/vanillawc/vanillawc/blob/main/CONTRIBUTING.md)
