https://github.com/vanillawc/wc-monaco-editor
A vanilla Monaco Editor web component
https://github.com/vanillawc/wc-monaco-editor
editor monaco vanilla web-components
Last synced: 6 months ago
JSON representation
A vanilla Monaco Editor web component
- Host: GitHub
- URL: https://github.com/vanillawc/wc-monaco-editor
- Owner: vanillawc
- License: mit
- Created: 2019-11-01T21:33:38.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2021-11-11T19:41:09.000Z (almost 4 years ago)
- Last Synced: 2024-04-26T23:02:53.504Z (over 1 year ago)
- Topics: editor, monaco, vanilla, web-components
- Language: JavaScript
- Homepage:
- Size: 18.6 MB
- Stars: 113
- Watchers: 4
- Forks: 12
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
<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)