28 | {
29 | "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
30 | "description": "A simple bar chart with embedded data.",
31 | "data": {
32 | "values": [
33 | {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
34 | {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
35 | {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
36 | ]
37 | },
38 | "mark": "bar",
39 | "encoding": {
40 | "x": {"field": "a", "type": "ordinal"},
41 | "y": {"field": "b", "type": "quantitative"}
42 | }
43 | }
44 |
45 | ```
46 |
47 | ## Installation
48 | ```
49 | bower install --save PolymerVis/monaco-editor
50 | ```
51 |
52 | ## Documentation and demos
53 | More examples and documentation can be found at `monaco-editor` [webcomponents page](https://www.webcomponents.org/element/PolymerVis/monaco-editor).
54 |
55 | The demos can be found at the [`monaco-editor` Github page](https://PolymerVis.github.io/monaco-editor/build/demo).
56 |
57 | ## Special notes on styling and demo
58 | 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.
59 |
60 | You can still view the demo at the [`monaco-editor` Github page](https://PolymerVis.github.io/monaco-editor/build/demo).
61 |
62 | ## Very important note on external dependencies when building/bundling your app
63 | `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.
64 |
65 | ## Important note on "hack" to allow Monaco Editor to work inside a custom element
66 | 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:
67 |
68 | - make a pull request and update the source code: but the source code seems to reside somewhere in [Visual Studio Code repo](https://github.com/Microsoft/vscode) instead of a proper `monaco-editor-core` repo,
69 | - attach the element (which Monaco Editor will be anchoring to) in the `document.body`, and try to sync the position, size, and style with the `monaco-editor` custom element,
70 | - create an iFrame and attach the iFrame to the `monaco-editor` custom element's shadowRoot.
71 |
72 | 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.
73 |
74 | ## Disclaimers
75 | PolymerVis is a personal project and is NOT in any way affliated with Microsoft, Polymer or Google.
76 |
77 | # `monaco-editor`
78 | `monaco-editor` is a Polymer 2.0 element for [Monaco Editor](https://microsoft.github.io/monaco-editor/), a browser-based code editor which also powers Visual Studio Code.
79 |
80 | ## Quick start
81 | ```html
82 |
83 |