DeckDeckGo - Monaco Editor

A web component to easily embed the Monaco Editor in your application.

Installation

npm i @deckdeckgo/monaco-editor

Usage

1. Import the component in your application, for example with an import script.

import @deckdeckgo/monaco-editor

2. Copy the pre-compiled workers to your output - e.g. www, public, dist - folder or sub-folder(s) - e.g. www/build/workers.

copy: [
    {src: `${__dirname}/node_modules/@deckdeckgo/monaco-editor/workers/`, dest: `${__dirname}/public`}
]

3. Configure where the worker scripts are located i.e. add following script in your application (update the path ./ if you have copied the scripts in sub-folders).

self.MonacoEnvironment = {
    getWorkerUrl: function (_moduleId, label) {
      if (label === 'json') {
        return './json.worker.js';
      }
      if (label === 'css' || label === 'scss' || label === 'less') {
        return './css.worker.js';
      }
      if (label === 'html' || label === 'handlebars' || label === 'razor') {
        return './html.worker.js';
      }
      if (label === 'typescript' || label === 'javascript') {
        return './ts.worker.js';
      }
      return './editor.worker.js';
    }
};

4. Use the component

<deckgo-monaco-editor></deckgo-monaco-editor>

License

MIT © David Dal Busco and Nicolas Mattia