<monaco-element>
Webcomponent wrapper for the monaco editor implementing basic functionality.
Installation
npm install monaco-element
Usage (Polymer 3)
; ... <monaco-element value="print('Hello World')" language="python" theme="vs-light" on-value-changed="handleEvent"></monaco-element>
Caveats
Monaco Editor only works in light DOM, to make it work inside a custom component an iframe
is created which loads loader.js
(usually found in node_modules/monaco-editor/min/vs
). When using this component <libPath>/loader.js
has to be accessible.
Polymer
Add node_modules/monaco-editor/min/**
to your extraDependencies
in polymer.json
to make the script available on polymer build
.
Angular 6
Add this to the assets
section of your angular.json
:
{
"glob": "**/*",
"input": "./node_modules/monaco-editor/min/vs/",
"output": "/node_modules/monaco-editor/min/vs/"
}
Acknowledgements
Inspired by PolymerVis/monaco-editor