Product
Introducing Java Support in Socket
We're excited to announce that Socket now supports the Java programming language.
@monaco-editor/loader
Advanced tools
@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.
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'
});
});
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.
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.
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.
The 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
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.
The library exports types and the utility called loader
, the last one has two methods
import loader from '@monaco-editor/loader';
loader.init().then(monaco => {
monaco.editor.create(/* editor container, e.g. document.body */, {
value: '// some comment',
language: 'javascript',
});
});
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 => { /* ... */ });
import loader from '@monaco-editor/loader';
import * as monaco from 'monaco-editor';
loader.config({ monaco });
loader.init().then(monacoInstance => { /* ... */ });
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);
});
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();
electron
usersIn 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:
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 => { /* ... */ });
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.
Next.js
usersThe 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.
1.4.0
FAQs
the library aims to setup monaco editor into your browser
The npm package @monaco-editor/loader receives a total of 601,383 weekly downloads. As such, @monaco-editor/loader popularity was classified as popular.
We found that @monaco-editor/loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.
Security News
Deno 2.0 is now available with enhanced package management, full Node.js and npm compatibility, improved performance, and support for major JavaScript frameworks.