https://github.com/larsgroeber/monaco-element

🖥 Webcomponent wrapper for the monaco editor.
https://github.com/larsgroeber/monaco-element

monaco-editor polymer webcomponent

Last synced: about 1 month ago
JSON representation

🖥 Webcomponent wrapper for the monaco editor.

• Host: GitHub
• URL: https://github.com/larsgroeber/monaco-element
• Owner: larsgroeber
• License: mit
• Created: 2018-08-25T19:06:46.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-29T05:44:47.000Z (over 1 year ago)
• Last Synced: 2024-10-09T08:43:46.053Z (about 1 month ago)
• Topics: monaco-editor, polymer, webcomponent
• Language: JavaScript
• Homepage: https://larsg7.github.io/monaco-element/build/default/
• Size: 7.49 MB
• Stars: 5
• Watchers: 1
• Forks: 7
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# \

Webcomponent wrapper for the monaco editor implementing basic functionality.

[![GitHub license](https://img.shields.io/github/license/Larsg7/monaco-element.svg)](https://github.com/Larsg7/monaco-element/blob/master/LICENSE)

[![NPM](https://nodei.co/npm/monaco-element.png?compact=true)](https://nodei.co/npm/monaco-element/)

[DEMO](https://larsg7.github.io/monaco-element/build/default/)

## Installation

```

npm install monaco-element

```

## Usage (Polymer 3)

```js

import '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 `/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](https://github.com/PolymerVis/monaco-editor)

## Licence

[MIT](https://github.com/Larsg7/monaco-element/blob/master/LICENSE)