tessl/npm-monaco-editor

A browser based code editor that powers Visual Studio Code

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Editor Core

Name: tessl/npm-monaco-editor
Author: tessl

Core editor creation, configuration, and management functionality for Monaco Editor instances.

Editor Creation

Standalone Editor

monaco.editor.create(
    domElement: HTMLElement,
    options?: IStandaloneEditorConstructionOptions,
    override?: IEditorOverrideServices
): IStandaloneCodeEditor

Creates a standalone code editor instance.

Parameters:

domElement: HTML element to attach the editor to
options: Editor configuration options (optional)
override: Service overrides (optional)

Returns: IStandaloneCodeEditor instance

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

Diff Editor

monaco.editor.createDiffEditor(
    domElement: HTMLElement,
    options?: IStandaloneDiffEditorConstructionOptions,
    override?: IEditorOverrideServices
): IStandaloneDiffEditor

Creates a diff editor for comparing two models.

Parameters:

domElement: HTML element to attach the editor to
options: Diff editor configuration options (optional)
override: Service overrides (optional)

Returns: IStandaloneDiffEditor instance

const diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
    theme: 'vs-dark',
    readOnly: true
});

diffEditor.setModel({
    original: originalModel,
    modified: modifiedModel
});

Editor Configuration Options

IStandaloneEditorConstructionOptions

interface IStandaloneEditorConstructionOptions {
    value?: string;
    language?: string;
    theme?: string;
    readOnly?: boolean;
    automaticLayout?: boolean;
    wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded';
    minimap?: IEditorMinimapOptions;
    scrollbar?: IEditorScrollbarOptions;
    lineNumbers?: 'on' | 'off' | 'relative' | 'interval';
    fontSize?: number;
    fontFamily?: string;
    tabSize?: number;
    insertSpaces?: boolean;
    // ... many more options
}

IEditorMinimapOptions

interface IEditorMinimapOptions {
    enabled?: boolean;
    side?: 'right' | 'left';
    size?: 'proportional' | 'fill' | 'fit';
    showSlider?: 'always' | 'mouseover';
    autohide?: boolean;
}

IEditorScrollbarOptions

interface IEditorScrollbarOptions {
    vertical?: 'auto' | 'visible' | 'hidden';
    horizontal?: 'auto' | 'visible' | 'hidden';
    arrowSize?: number;
    useShadows?: boolean;
    verticalHasArrows?: boolean;
    horizontalHasArrows?: boolean;
    handleMouseWheel?: boolean;
    alwaysConsumeMouseWheel?: boolean;
}

Editor Management

Getting Editor Instances

monaco.editor.getEditors(): ICodeEditor[]

Returns all editor instances.

monaco.editor.getDiffEditors(): IDiffEditor[]

Returns all diff editor instances.

Editor State Management

editor.focus(): void

Focuses the editor.

editor.hasTextFocus(): boolean

Returns true if the editor has text focus.

editor.getPosition(): Position | null

Gets the current cursor position.

editor.setPosition(position: IPosition): void

Sets the cursor position.

editor.getSelection(): Selection | null

Gets the current selection.

editor.setSelection(selection: IRange | ISelection): void

Sets the selection.

Content Management

editor.getValue(options?: IEditorStateOptions): string

Gets the editor content.

editor.setValue(newValue: string): void

Sets the editor content.

editor.getModel(): ITextModel | null

Gets the current model.

editor.setModel(model: ITextModel | null): void

Sets the current model.

Editor Actions

Built-in Actions

editor.trigger(source: string | null | undefined, handlerId: string, payload: any): void

Triggers an editor action.

Common action IDs:

'editor.action.formatDocument' - Format document
'editor.action.commentLine' - Toggle line comment
'editor.action.copyLinesDown' - Copy lines down
'editor.action.selectAll' - Select all content
'undo' - Undo last change
'redo' - Redo last undone change

// Format the document
editor.trigger('keyboard', 'editor.action.formatDocument', null);

// Toggle line comment
editor.trigger('keyboard', 'editor.action.commentLine', null);

Custom Actions

editor.addAction(descriptor: IActionDescriptor): IDisposable

Adds a custom action to the editor.

interface IActionDescriptor {
    id: string;
    label: string;
    alias?: string;
    precondition?: string;
    keybindings?: number[];
    keybindingContext?: string;
    contextMenuGroupId?: string;
    contextMenuOrder?: number;
    run(editor: ICodeEditor, ...args: any[]): void | Promise<void>;
}

const disposable = editor.addAction({
    id: 'my-unique-id',
    label: 'My Custom Action',
    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],
    contextMenuGroupId: 'navigation',
    contextMenuOrder: 1.5,
    run: function(ed) {
        alert('Custom action executed!');
    }
});

Keyboard Constants

enum KeyMod {
    CtrlCmd = 2048,
    Shift = 1024,
    Alt = 512,
    WinCtrl = 256
}

Key modifier constants for combining with key codes in actions.

enum KeyCode {
    F1 = 59, F2 = 60, F3 = 61, F4 = 62, F5 = 63, F6 = 64, F7 = 65, F8 = 66, F9 = 67, F10 = 68,
    F11 = 69, F12 = 70,
    Enter = 3, Escape = 9, Space = 10, Tab = 2,
    KEY_A = 31, KEY_B = 32, KEY_C = 33, KEY_D = 34, KEY_E = 35, KEY_F = 36, KEY_G = 37,
    KEY_H = 38, KEY_I = 39, KEY_J = 40, KEY_K = 41, KEY_L = 42, KEY_M = 43, KEY_N = 44,
    KEY_O = 45, KEY_P = 46, KEY_Q = 47, KEY_R = 48, KEY_S = 49, KEY_T = 50, KEY_U = 51,
    KEY_V = 52, KEY_W = 53, KEY_X = 54, KEY_Y = 55, KEY_Z = 56,
    KEY_0 = 21, KEY_1 = 22, KEY_2 = 23, KEY_3 = 24, KEY_4 = 25, KEY_5 = 26, KEY_6 = 27,
    KEY_7 = 28, KEY_8 = 29, KEY_9 = 30,
    Backspace = 1, Delete = 20, Insert = 19, Home = 14, End = 13, PageUp = 15, PageDown = 16,
    LeftArrow = 17, RightArrow = 18, UpArrow = 11, DownArrow = 12
}

Keyboard key codes for use in keybinding definitions.

// Common keybinding combinations
const saveKeybinding = monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S;
const formatKeybinding = monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.KEY_F;

Event Handling

Content Changes

editor.onDidChangeModelContent(listener: (e: IModelContentChangedEvent) => void): IDisposable

Fired when the model content changes.

const disposable = editor.onDidChangeModelContent((e) => {
    console.log('Content changed:', e);
});

Cursor Position Changes

editor.onDidChangeCursorPosition(listener: (e: ICursorPositionChangedEvent) => void): IDisposable

Fired when the cursor position changes.

Selection Changes

editor.onDidChangeCursorSelection(listener: (e: ICursorSelectionChangedEvent) => void): IDisposable

Fired when the selection changes.

Focus Events

editor.onDidFocusEditorText(listener: () => void): IDisposable

Fired when the editor gains focus.

editor.onDidBlurEditorText(listener: () => void): IDisposable

Fired when the editor loses focus.

Layout and Sizing

Automatic Layout

editor.layout(dimension?: IDimension): void

Instructs the editor to remeasure its container.

interface IDimension {
    width: number;
    height: number;
}

// Automatic layout on window resize
window.addEventListener('resize', () => {
    editor.layout();
});

// Manual layout with specific dimensions
editor.layout({ width: 800, height: 600 });

Themes

Built-in Themes

monaco.editor.setTheme(themeName: string): void

Sets the global theme.

Built-in themes:

'vs' - Light theme
'vs-dark' - Dark theme
'hc-black' - High contrast black theme
'hc-light' - High contrast light theme

monaco.editor.setTheme('vs-dark');

Custom Themes

monaco.editor.defineTheme(themeName: string, themeData: IStandaloneThemeData): void

Defines a custom theme.

interface IStandaloneThemeData {
    base: 'vs' | 'vs-dark' | 'hc-black' | 'hc-light';
    inherit: boolean;
    rules: ITokenThemeRule[];
    encodedTokensColors?: string[];
    colors: IColors;
}

Disposal

Editor Disposal

editor.dispose(): void

Disposes the editor and frees resources.

// Always dispose editors when done
editor.dispose();

Disposable Management

interface IDisposable {
    dispose(): void;
}

Many Monaco operations return disposables that should be cleaned up:

const disposables: IDisposable[] = [];

disposables.push(editor.onDidChangeModelContent(() => {
    // Handle content change
}));

disposables.push(editor.addAction({
    // Action descriptor
}));

// Clean up all disposables
disposables.forEach(d => d.dispose());