@monaco-editor/loader

What is @monaco-editor/loader?

@monaco-editor/loader is an npm package that provides a convenient way to load the Monaco Editor, which is the code editor that powers Visual Studio Code. It simplifies the process of integrating the Monaco Editor into web applications by handling the loading and configuration of the editor.

What are @monaco-editor/loader's main functionalities?

Loading the Monaco Editor

This feature allows you to load the Monaco Editor and create an instance of it in a specified HTML container. The code sample demonstrates initializing the editor with some JavaScript code.

const monacoLoader = require('@monaco-editor/loader');

monacoLoader.init().then(monaco => {
  const editor = monaco.editor.create(document.getElementById('container'), {
    value: 'function hello() {\n\tconsole.log("Hello, world!");\n}',
    language: 'javascript'
  });
});

Configuring the Monaco Editor

This feature allows you to configure various options for the Monaco Editor, such as the theme, language, and read-only mode. The code sample demonstrates setting the editor to use the 'vs-dark' theme and making it read-only.

const monacoLoader = require('@monaco-editor/loader');

monacoLoader.init().then(monaco => {
  const editor = monaco.editor.create(document.getElementById('container'), {
    value: 'function hello() {\n\tconsole.log("Hello, world!");\n}',
    language: 'javascript',
    theme: 'vs-dark',
    readOnly: true
  });
});

Loading Monaco Editor with custom paths

This feature allows you to specify custom paths for loading the Monaco Editor. The code sample demonstrates configuring the loader to use a CDN for loading the editor.

const monacoLoader = require('@monaco-editor/loader');

monacoLoader.config({
  paths: {
    vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.21.2/min/vs'
  }
});

monacoLoader.init().then(monaco => {
  const editor = monaco.editor.create(document.getElementById('container'), {
    value: 'function hello() {\n\tconsole.log("Hello, world!");\n}',
    language: 'javascript'
  });
});

Other packages similar to @monaco-editor/loader

monaco-editor

The 'monaco-editor' package is the core package for the Monaco Editor. It provides the full functionality of the editor but requires more manual setup compared to @monaco-editor/loader. It is suitable for users who need more control over the editor's configuration and loading process.

react-monaco-editor

The 'react-monaco-editor' package is a React component for the Monaco Editor. It simplifies the integration of the Monaco Editor into React applications by providing a React component wrapper. It is ideal for users who are building applications with React and want to use the Monaco Editor.

ngx-monaco-editor

The 'ngx-monaco-editor' package is an Angular component for the Monaco Editor. It provides an Angular component wrapper for the Monaco Editor, making it easier to integrate into Angular applications. It is suitable for users who are building applications with Angular and want to use the Monaco Editor.

README

@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 => { /* ... */ });

1. 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

Changelog

1.4.0

Oct 1, 2023

• monaco-editor: update to the latest version (0.43.0)