s-monaco-editor

An easy-to-use web component of Monaco Editor for any framework (Angular, React, Vue, etc.) or vanilla JS.

Demo

How to install

Use NPM

npm i @seanwong24/s-monaco-editor

Use CDN

<script type="module" src="https://unpkg.com/@seanwong24/s-monaco-editor/dist/s-monaco-editor/s-monaco-editor.esm.js"></script>
<script nomodule src="https://unpkg.com/@seanwong24/s-monaco-editor/dist/s-monaco-editor/s-monaco-editor.js"></script>

How to use

First you need to import the component to your project, then the easiest way to use the component is to put s-monaco-editor tag inside any element that you want to attach in html.

<s-monaco-editor 
    style="width: 600px; height: 500px;" 
    monaco-vs-path="./build/monaco-editor/vs"
    value="console.log('Hello Wrold!')" 
    language="javascript"
></s-monaco-editor>

Leave monaco-vs-path unset to use monaco from the CDN. To use your own version of Monaco Editor, just provide the vs path of your Monaco Editor.

Get monaco and editor instance

You can add a listener of 'componentLoad event to obtain the Monaco and current editor instance like the below example:

document.querySelector('s-monaco-editor').addEventListener('componentLoad', (event) => {
	const {monaco, editor} = event.detail;
});

Properties & attributes

To see the list of available properties and attributes, check here.

How to import

Basically, you want to call defineCustomElements() from the loader. If you want, you can optionally call applyPolyfills() first as well. For different project types, please check below sections for more details.

Vanilla JS

Script tag

First, install using NPM.
Then in the html

<!-- for ES6 -->
<script type="module" src="node_modules/@seanwong24/s-monaco-editor/dist/s-monaco-editor/s-monaco-editor.esm.js"></script>
<!-- for ES5 -->
<script nomodule src="node_modules/@seanwong24/s-monaco-editor/dist/s-monaco-editor/s-monaco-editor.js"></script>

Import statement

First, install using NPM.
Then in JS file

import { applyPolyfills, defineCustomElements } from "node_modules/@seanwong24/s-monaco-editor/loader/index.js";
applyPolyfills().then(() => {
  defineCustomElements();
});

And in html

<script type="module" src="path/to/the/js/file"></script>

Note that type="module" only works in modern browsers.

Angular

Use loader

First install using NPM.
Then include CUSTOM_ELEMENTS_SCHEMA in any module that uses s-monaco-editor. For example, in AppModule

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent],
  // add this
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

After that, in main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// add this
import { applyPolyfills, defineCustomElements } from '@seanwong24/s-monaco-editor/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

// and add this
applyPolyfills().then(() => {
  defineCustomElements()
});

React

Use loader

First install using NPM.
Then in index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// add this
import { applyPolyfills, defineCustomElements } from "@seanwong24/s-monaco-editor/loader";

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

// and add this
applyPolyfills().then(() => {
  defineCustomElements();
});

Vue

Use loader

First install using NPM. Then in main.js

import Vue from 'vue';
import App from './App.vue';

import { applyPolyfills, defineCustomElements } from '@seanwong24/s-monaco-editor/loader';

Vue.config.productionTip = false;

// add this
Vue.config.ignoredElements = ['s-monaco-editor'];

// and add this
applyPolyfills().then(() => {
  defineCustomElements();
});

new Vue({
  render: h => h(App)
}).$mount('#app');