the library aims to setup monaco editor into your browser
npm install @monaco-editor/loaderThe utility to easy setup monaco-editor into your browser
Configure and download monaco sources via its loader script, without needing to use webpack's (or any other module bundler's) configuration files
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.
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
#### Contents
* Installation
* Introduction
* Usage
* .config
* .init
* Notes
* For electron users
* For Next.js users
``bash`
npm install @monaco-editor/loader
or
`bash`
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.
The library exports types and the utility called loader, the last one has two methods
`javascript
import loader from '@monaco-editor/loader';
loader.init().then(monaco => {
monaco.editor.create(/ editor container, e.g. document.body /, {
value: '// some comment',
language: 'javascript',
});
});
`
#### .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
`javascript
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 => { / ... / });
`
#### Configure the loader to load the monaco as an npm package
`javascript
import loader from '@monaco-editor/loader';
import * as monaco from 'monaco-editor';
loader.config({ monaco });
loader.init().then(monacoInstance => { / ... / });
`
#### .init
The .init method handles the initialization process. It returns the monaco instance, wrapped with cancelable promise
`javascript
import loader from '@monaco-editor/loader';
loader.init().then(monaco => {
console.log('Here is the monaco instance', monaco);
});
`
`javascript
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();
`
#### 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:
`javascript
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:
`javascript
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:
`javascript
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.