Monaco Editor

Understanding the core abstractions of Monaco Editor is essential for effective usage:

• Models: The heart of the editor. A model represents a single file's content, its language, and its edit history. You interact with models to manage content.
• URIs: Every model is uniquely identified by a URI. You should treat the editor as a virtual file system. If you don't provide a URI, Monaco assigns one using the pattern inmemory://model/[number].
• Editors: The user-facing view of a model. An editor is attached to a DOM element and is responsible for displaying the model, managing view state, and executing commands.
• Providers: These enable smart features like autocompletion and hover information. Providers operate on models and often rely on the model's URI (e.g., for TypeScript import resolution or JSON schema application).

Relationship Summary: An Editor displays a Model. The Model is identified by a URI. Providers use the Model and its URI to supply intelligence.

The easiest way to integrate the ESM version of Monaco Editor with Webpack is by using the community-authored monaco-editor-webpack-plugin. This plugin allows you to pass options to select only specific editor features or languages, helping to reduce bundle size.

To use it, install the plugin and add it to your webpack.config.js plugins array. Ensure you have loaders for .css and .ttf files configured.

// index.js
import * as monaco from 'monaco-editor';

monaco.editor.create(document.getElementById('container'), {
	value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
	language: 'javascript'
});

// webpack.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');

module.exports = {
	entry: './index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'app.js'
	},
	module: {
		rules: [
			{
				test: /\.css$/, 
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.ttf$/, 
				use: ['file-loader']
			}
		]
	},
	plugins: [new MonacoWebpackPlugin()]
};

If you prefer not to use the specialized Webpack plugin, you can configure Webpack manually. This requires two main steps:

1. Configure Webpack Entry Points: You must explicitly define entry points for the main application and each language worker (e.g., json.worker, css.worker, ts.worker) by pointing to the corresponding files in monaco-editor/esm/vs/....
2. Configure self.MonacoEnvironment: In your application code, you must implement self.MonacoEnvironment.getWorkerUrl to map language labels to the specific bundle filenames you created in your Webpack configuration.

Note: Set output.globalObject to 'self' in your Webpack config to ensure compatibility with web workers.

// index.js
import * as monaco from 'monaco-editor';

self.MonacoEnvironment = {
	getWorkerUrl: function (moduleId, label) {
		if (label === 'json') {
			return './json.worker.bundle.js';
		}
		if (label === 'css' || label === 'scss' || label === 'less') {
			return './css.worker.bundle.js';
		}
		if (label === 'html' || label === 'handlebars' || label === 'razor') {
			return './html.worker.bundle.js';
		}
		if (label === 'typescript' || label === 'javascript') {
			return './ts.worker.bundle.js';
		}
		return './editor.worker.bundle.js';
	}
};

monaco.editor.create(document.getElementById('container'), {
	value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
	language: 'javascript'
});

// webpack.config.js
const path = require('path');

module.exports = {
	entry: {
		app: './index.js',
		'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
		'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
		'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
		'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
		'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
	},
	output: {
		globalObject: 'self',
		filename: '[name].bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.css$/, 
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.ttf$/, 
				use: ['file-loader']
			}
		]
	}
};

When using Parcel, you must build the language workers separately from your main source code.

1. Implement self.MonacoEnvironment.getWorkerUrl: Map language labels to the expected worker filenames (e.g., ./json.worker.js).
2. Build Workers: Use a script (like a bash script) to run parcel build on each individual worker file located in node_modules/monaco-editor/esm/vs/....
3. Execution: Run the build script followed by parcel index.html. This ensures workers are built into your distribution directory.

Note: The paths in getWorkerUrl are relative to the build directory of your main bundle.

// index.js
import * as monaco from 'monaco-editor';

self.MonacoEnvironment = {
	getWorkerUrl: function (moduleId, label) {
		if (label === 'json') {
			return './json.worker.js';
		}
		if (label === 'css' || label === 'scss' || label === 'less') {
			return './css.worker.js';
		}
		if (label === 'html' || label === 'handlebars' || label === 'razor') {
			return './html.worker.js';
		}
		if (label === 'typescript' || label === 'javascript') {
			return './ts.worker.js';
		}
		return './editor.worker.js';
	}
};

monaco.editor.create(document.getElementById('container'), {
	value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
	language: 'javascript'
});

// build_workers.sh
ROOT=$PWD/node_modules/monaco-editor/esm/vs
OPTS="--no-source-maps --log-level 1"

parcel build $ROOT/language/json/json.worker.js $OPTS
parcel build $ROOT/language/css/css.worker.js $OPTS
parcel build $ROOT/language/html/html.worker.js $OPTS
parcel build $ROOT/language/typescript/ts.worker.js $OPTS
parcel build $ROOT/editor/editor.worker.js $OPTS