Awesome
<h1 align="center"><wc-monaco-editor> Easily Embed a Monaco Editor</h1> <div align="center"> <a href="https://github.com/vanillawc/wc-monaco-editor/releases"><img src="https://badgen.net/github/tag/vanillawc/wc-monaco-editor" alt="GitHub Releases"></a> <a href="https://www.npmjs.com/package/@vanillawc/wc-monaco-editor"><img src="https://badgen.net/npm/v/@vanillawc/wc-monaco-editor" alt="NPM Releases"></a> <a href="https://github.com/vanillawc/wc-monaco-editor/actions"><img src="https://github.com/vanillawc/wc-monaco-editor/workflows/Latest/badge.svg" alt="Latest Status"></a> <a href="https://github.com/vanillawc/wc-monaco-editor/actions"><img src="https://github.com/vanillawc/wc-monaco-editor/workflows/Release/badge.svg" alt="Release Status"></a><a href="https://discord.gg/aSWYgtybzV"><img alt="Discord" src="https://img.shields.io/discord/723296249121603604?color=%23738ADB"></a> <a href="https://www.webcomponents.org/element/vanillawc/wc-monaco-editor"><img src="https://img.shields.io/badge/webcomponents.org-published-blue.svg" alt="Published on WebComponents.org"></a>
<!-- <a href="https://bundlephobia.com/result?p=@vanillawc/wc-monaco-editor"><img src="https://badgen.net/bundlephobia/minzip/@vanillawc/wc-monaco-editor" alt="Bundlephobia"></a> --> </div>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 filelanguage
- set the source languagefont-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 presentword-wrap
- enables word wrapping when presentwrap-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 instancesrc
- get/set thesrc
attribute from JSvalue
- get/set the editor's contentstabSize
- 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