or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

editor-core.md index.md languages-and-providers.md models-and-uris.md other-languages.md typescript-language.md workers-and-environment.md

tile.json

tessl/npm-monaco-editor

A browser based code editor that powers Visual Studio Code

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/monaco-editor@0.52.x

To install, run

npx @tessl/cli install tessl/npm-monaco-editor@0.52.0

Monaco Editor

Monaco Editor is a browser-based code editor that powers Visual Studio Code. It provides a comprehensive editing experience with syntax highlighting, IntelliSense, error detection, and support for multiple programming languages in web environments.

Package Information

Package Name: monaco-editor
Package Type: npm
Language: TypeScript/JavaScript
Installation: npm install monaco-editor

Core Imports

For ES Modules:

import * as monaco from 'monaco-editor';

For AMD (RequireJS):

require(['vs/editor/editor.main'], function(monaco) {
    // Use monaco
});

For specific sub-modules (ES Modules):

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

For Node.js environments:

const monaco = require('monaco-editor');

For script tag usage:

<script src="./node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': './node_modules/monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
    // Monaco is now available as global
});
</script>

Basic Usage

import * as monaco from 'monaco-editor';

// Configure worker environment
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';
    }
};

// Create an editor instance
const editor = monaco.editor.create(document.getElementById('container'), {
    value: 'console.log("Hello, Monaco!");',
    language: 'javascript'
});

Architecture

Monaco Editor is built around several key concepts:

Models

Models represent the text content and metadata of files. Each model is identified by a unique URI and contains the text content, language information, edit history, and diagnostic markers.

Editors

Editors are visual components that display and allow editing of models. Monaco provides standalone editors for single files and diff editors for comparing two versions.

Providers

Providers supply language-specific features like code completion, hover information, and error diagnostics. They work with models based on language and URI patterns.

Disposables

Many Monaco objects implement a .dispose() method for proper cleanup and resource management.

Core Capabilities

Editor Management

Creating, configuring, and managing editor instances including standalone and diff editors, themes, and view options.

const editor = monaco.editor.create(container, options);
const diffEditor = monaco.editor.createDiffEditor(container, options);

Models and URIs

Managing text models, URIs, and content operations including model creation, content manipulation, and cleanup.

const model = monaco.editor.createModel(content, language, uri);
const uri = monaco.Uri.parse('file:///example.ts');

Language Support

Language registration, tokenization, and provider registration for IntelliSense features across 80+ supported languages.

monaco.languages.register({ id: 'myLanguage' });
monaco.languages.setMonarchTokensProvider('myLanguage', definition);

TypeScript Language Service

Advanced TypeScript and JavaScript language features including full compiler API access, type checking, and IntelliSense.

monaco.languages.typescript.typescriptDefaults.setCompilerOptions(options);
monaco.languages.typescript.typescriptDefaults.addExtraLib(libSource, filePath);

Other Language Services

JSON schema validation, CSS/SCSS/Less support, and HTML/Handlebars language features.

monaco.languages.json.jsonDefaults.setDiagnosticsOptions(options);
monaco.languages.css.cssDefaults.setOptions(options);

Workers and Environment

Web worker configuration, cross-domain setup, and environment configuration for optimal performance.

self.MonacoEnvironment = {
    getWorker: function(moduleId, label) {
        return new Worker('./worker.js');
    }
};