monaco-editor
Polymer 2.0 element for Monaco Editor, a browser-based code editor that also powers Microsoft Visual Studio.
[ This description is mirrored from README.md at github.com/samie/monaco-editor on 2019-05-10 ]
monaco-editor
<monaco-schemas
keys="vega-lite"
schemas="{{schemas}}"></monaco-schemas>
<monaco-editor
style="width:520px;"
value="[[value]]"
language="json"
schemas="[[schemas]]">
<div slot="monaco-value">{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
{"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
{"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"}
}
}</div>
</monaco-editor>
Installation
bower install --save PolymerVis/monaco-editor
Documentation and demos
More examples and documentation can be found at monaco-editor
webcomponents page.
The demos can be found at the monaco-editor
Github page.
Special notes on styling and demo
The layout of the hints are out for the demo because of the way the original monaco editor is styled and the way webcomponents.org renders the demo. It is very difficult for me to isolate the conflicts.
You can still view the demo at the monaco-editor
Github page.
Very important note on external dependencies when building/bundling your app
monaco-editor
loads most of the required modules dynamically, hence polymer-build
will not be able to properly detect these external modules. You will need to manually add bower_components/monaco-editor/node_modules/monaco-editor/min/vs/**/*
into the extraDependencies
to ensure these modules are exported together.
Important note on "hack" to allow Monaco Editor to work inside a custom element
Monaco Editor only works properly in the light DOM and there are a few functions that access or check on document.body
. The selection is also dependent on document.caretPositionFromPoint
or its variant. Hence, there are only a few solutions:
- make a pull request and update the source code: but the source code seems to reside somewhere in Visual Studio Code repo instead of a proper
monaco-editor-core
repo, - attach the element (which Monaco Editor will be anchoring to) in the
document.body
, and try to sync the position, size, and style with themonaco-editor
custom element, - create an iFrame and attach the iFrame to the
monaco-editor
custom element's shadowRoot.
The current approach now is, if the parent node of the monaco-editor
is in the light DOM (it is not inside another custom element), the anchoring element will be insert as a slot (so that it remains in the light DOM), otherwise an iFrame will be created. In this case, a monaco
, and editor
proxy object will be created so that the some functions will be proxied into the iFrame.
Disclaimers
PolymerVis is a personal project and is NOT in any way affliated with Microsoft, Polymer or Google.
monaco-editor
monaco-editor
is a Polymer 2.0 element for Monaco Editor, a browser-based code editor which also powers Visual Studio Code.
Quick start
<!-- enable code folding, minimap, and dark theme -->
<monaco-editor
folding
minimap
theme="vs-dark"
language="javascript"></monaco-editor>
Please look at the documentation for all the available options.
Pre-populated with codes
- Populate with the
value
property.
var codes = `// this is a comment line
var helloworld = "hello world";
`;
<!-- 2-way binding is available for `value` -->
<monaco-editor
language="javascript"
value="{{codes}}"></monaco-editor>
- Populate with a
monaco-value
slot
element.
Note that thetext
in theslot
element is only loaded once during initialization. Subsequent changes to the slot will not change thevalue
.
<!-- text is only loaded once, and not updated upon subsequent changes -->
<monaco-editor
language="javascript"
value="{{codes}}">
<div slot="monaco-value">// comment line
var helloworld = "hello world";</div>
</monaco-editor>
monaco-schemas
monaco-schemas
is a Polymer 2.0 element to where you can retrieve a list of JSON schemas through a space-separated key string. These schemas can then be passed into monaco-editor
.
monaco-schemas
currently only has the schemas for Vega v3.0 and Vega-Lite v2.0. However, you can easily add additional schemas into monaco-schemas
.
<!-- extract `schemas` by definiting a space-separated string, `keys`. -->
<monaco-schemas keys="vega-lite" schemas="{{schemas}}"></monaco-schemas>
<!--
pass the `schemas` array to `json-schemas` and set `json-validate` flag
to enable hints, suggestions, and validation of the inputs.
-->
<monaco-editor json-validate language="json"
json-schemas="[[schemas]]"></monaco-editor>
You can define your own schemas by providing the uri
to the schema. monaco-schemas
will automatically retrieve the schema from the uri
if the schema
field is empty.
var data = {
"vega-lite-uri": {
"uri": "https://vega.github.io/schema/vega-lite/v2.json",
"schema": null,
"fileMatch": ["*"]
}
}
<!-- retrieve an array of schemas "vega-lite" and "vega-lite-uri". -->
<monaco-schemas keys="vega-lite vega-lite-uri"
schemas="{{schemas}}"
data="[[data]]"></monaco-schemas>
You can also define a custom schema directly.
var data_w_cat = {
"cat": {
"schema": {
"title": "Cat",
"type": "object",
"properties": {
"name": {
"description": "Name of the cat",
"type": "string"
},
"breed": {
"description": "Breed of the cat",
"type": "string"
},
"age": {
"description": "Age of the cat",
"type": "string",
"enum": ["kitten", "young adult", "adult", "old cat"]
}
}
},
"fileMatch": ["*"]
}
};
<!-- retrieve custom schema "cat". -->
<monaco-schemas keys="cat"
schemas="{{schemas}}"
data="[[data_w_cat]]"></monaco-schemas>
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- polymer#Polymer/polymer#^2.0.0
- polymer-vis#PolymerVis/polymer-vis#^2.0.1
- Released
- 2019-04-27
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 2.0+
- Browser
- Browser Independent
monaco-editor - Vaadin Add-on Directory
Polymer 2.0 element for Monaco Editor, a browser-based code editor that also powers Microsoft Visual Studio.monaco-editor version 2.0.5
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* polymer-vis#PolymerVis/polymer-vis#^2.0.1