A web component wrapper for monaco-editor.
MIT License
@hey-web-components/monaco-editor
is a web component wrapper for monaco-editor.
Getting started to use monaco-editor with code as simple as:
<script type="module" src="https://unpkg.com/@hey-web-components/monaco-editor"></script>
<hey-monaco-editor></hey-monaco-editor>
See demos and docs.
npm i @hey-web-components/monaco-editor
To obtain it directly from the CDN, it can be imported by simply adding a script
tag like this:
<script
type="module"
src="https://unpkg.com/@hey-web-components/monaco-editor"
></script>
If it is installed locally, then it can be imported by adding a script
tag like this:
<script
type="module"
src="node_modules/@hey-web-components/monaco-editor/dist/cdn/index.js"
></script>
Assuming it is installed locally by using NPM, then it can be imported like this:
import '@hey-web-components/monaco-editor';
This import
statement would define the custom elements automatically.
For standard editor:
<hey-monaco-editor></hey-monaco-editor>
For diff editor:
<hey-monaco-diff-editor></hey-monaco-diff-editor>
More details can be found from demos and docs.
vs
path (optional)This wrapper does not contain the monaco-editor library, it will fetch the library accroding to the vs
path (from the AMD bundle of the monaco-editor library). Thus, different versions of monaco-editor
can be used. The default vs
path value is set to a CDN url but it can be replaced with a custom path.
To set a custom vs
path, simply import and call setVsPath()
function before loading the components.
import {setVsPath} from '@hey-web-components/monaco-editor';
setVsPath('the/custom/path');
Alternatively, the vs
path can be set by setting __MONACO_VS_PATH__
property of the window
object.
window.__MONACO_VS_PATH__ = 'the/custom/path';