@monaco-editor/loader ·

The utility to easy setup monaco-editor into your browser

Synopsis

Configure and download monaco sources via its loader script, without needing to use webpack's (or any other module bundler's) configuration files

Motivation

It's been a while we are working with monaco editor. It's a great library and provides a powerful editor out of the box. Anyway, there were couple of problems related to the setup process. The main problem is the need to do some additional webpack configuration; that's not bad, but some quite useful tools, like CRA, aren't happy with that fact. The library @monaco-editor/react was being created to solve that problem - monaco editor wrapper for easy/one-line integration with React applications without needing to use webpack's (or any other module bundler's) configuration files. In that library, there was a utility that cares about the initialization process of monaco and overcomes the additional use of webpack configuration. That utility grows over time and now it's a separate library. Now, you can easily setup monaco into your browser, create your own editors, wrappers for React/Vue/Angular of whatever you want.

How it works

Monaco editor provides a script called loader, which itself provides tooling to download monaco sources. The library, under the hood, handles the configuration and loading part and gives us an easy-to-use API to interact with it

Documentation

Contents

• Installation
• Introduction
• Usage
  • .config
  • .init
• Notes
  • For electron users
  • For Next.js users

Installation

npm install @monaco-editor/loader

or

yarn add @monaco-editor/loader

NOTE: For TypeScript type definitions, this package uses the monaco-editor package as a peer dependency. So, if you need types and don't already have the monaco-editor package installed, you will need to do so.

Introduction

The library exports types and the utility called loader, the last one has two methods

• .config
• .init

Usage

import loader from '@monaco-editor/loader';

loader.init().then(monaco => {
  monaco.editor.create(/* editor container, e.g. document.body */, {
    value: '// some comment',
    language: 'javascript',
  });
});

codesandbox

.config

By using the .config method we can configure the monaco loader. By default all sources come from CDN, you can change that behavior and load them from wherever you want

import loader from '@monaco-editor/loader';

// you can change the source of the monaco files
loader.config({ paths: { vs: '...' } });

// you can configure the locales
loader.config({ 'vs/nls': { availableLanguages: { '*': 'de' } } });

// or
loader.config({
  paths: {
    vs: '...',
  },
  'vs/nls' : {
    availableLanguages: {
      '*': 'de',
    },
  },
});

loader.init().then(monaco => { /* ... */ });

codesandbox

Configure the loader to load the monaco as an npm package

import loader from '@monaco-editor/loader';
import * as monaco from 'monaco-editor';

loader.config({ monaco });

loader.init().then(monacoInstance => { /* ... */ });

codesandbox

.init

The .init method handles the initialization process. It returns the monaco instance, wrapped with cancelable promise

import loader from '@monaco-editor/loader';

loader.init().then(monaco => {
  console.log('Here is the monaco instance', monaco);
});

codesandbox

import loader from '@monaco-editor/loader';

const cancelable = loader.init();

cancelable.then(monaco => {
  console.log('You will not see it, as it is canceled');
});

cancelable.cancel();

codesandbox

Notes

For electron users

In general it works fine with electron, but there are several cases that developers usually face to and sometimes it can be confusing. Here they are:

1. Download process fails or if you use @monaco-editor/react You see loading screen stuck Usually, it's because your environment doesn't allow you to load external sources. By default, it loads monaco sources from CDN. You can see the default configuration. But sure you can change that behavior; the library is fully configurable. Read about it here. So, if you want to download it from your local files, you can do it like this:

import loader from '@monaco-editor/loader';

loader.config({ paths: { vs: '../path-to-monaco' } });

or, if you want to use it as an npm package, you can do it like this:

import loader from '@monaco-editor/loader';
import * as monaco from 'monaco-editor';

loader.config({ monaco });

loader.init().then(monacoInstance => { /* ... */ });

2. Based on your electron environment it can be required to have an absolute URL The utility function taken from here can help you to achieve that. Let's imagine you have monaco-editor package installed and you want to load monaco from the node_modules rather than from CDN: in that case, you can write something like this:

function ensureFirstBackSlash(str) {
    return str.length > 0 && str.charAt(0) !== '/'
        ? '/' + str
        : str;
}

function uriFromPath(_path) {
    const pathName = path.resolve(_path).replace(/\\/g, '/');
    return encodeURI('file://' + ensureFirstBackSlash(pathName));
}

loader.config({
  paths: {
    vs: uriFromPath(
      path.join(__dirname, '../node_modules/monaco-editor/min/vs')
    )
  }
});

or, just use it as an npm package.

There were several issues about this topic that can be helpful too - 1 2 3 4

And if you use electron with monaco and have faced an issue different than the above-discribed ones, please let us know to make this section more helpful.

For Next.js users

The part of the source that should be pre-parsed is optimized for server-side rendering, so, in usual cases, it will work fine, but if you want to have access, for example, to monacoInstance you should be aware that it wants to access the document object, and it requires browser environment. Basically you just need to avoid running that part out of browser environment, there are several ways to do that. One of them is described here.

And if you use monaco with Next.js and have faced an issue different than the above-described one, please let us know to make this section more helpful.

License

MIT