0
# Editor Core
1

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

4
## Editor Creation
5

6
### Standalone Editor
7

8
```typescript { .api }
9
monaco.editor.create(
10
    domElement: HTMLElement,
11
    options?: IStandaloneEditorConstructionOptions,
12
    override?: IEditorOverrideServices
13
): IStandaloneCodeEditor
14
```
15

16
Creates a standalone code editor instance.
17

18
**Parameters:**
19
- `domElement`: HTML element to attach the editor to
20
- `options`: Editor configuration options (optional)
21
- `override`: Service overrides (optional)
22

23
**Returns:** IStandaloneCodeEditor instance
24

25
```typescript
26
const editor = monaco.editor.create(document.getElementById('container'), {
27
    value: 'function hello() {\n\tconsole.log("Hello world!");\n}',
28
    language: 'javascript',
29
    theme: 'vs-dark',
30
    readOnly: false,
31
    automaticLayout: true
32
});
33
```
34

35
### Diff Editor
36

37
```typescript { .api }
38
monaco.editor.createDiffEditor(
39
    domElement: HTMLElement,
40
    options?: IStandaloneDiffEditorConstructionOptions,
41
    override?: IEditorOverrideServices
42
): IStandaloneDiffEditor
43
```
44

45
Creates a diff editor for comparing two models.
46

47
**Parameters:**
48
- `domElement`: HTML element to attach the editor to
49
- `options`: Diff editor configuration options (optional)
50
- `override`: Service overrides (optional)
51

52
**Returns:** IStandaloneDiffEditor instance
53

54
```typescript
55
const diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
56
    theme: 'vs-dark',
57
    readOnly: true
58
});
59

60
diffEditor.setModel({
61
    original: originalModel,
62
    modified: modifiedModel
63
});
64
```
65

66
## Editor Configuration Options
67

68
### IStandaloneEditorConstructionOptions
69

70
```typescript { .api }
71
interface IStandaloneEditorConstructionOptions {
72
    value?: string;
73
    language?: string;
74
    theme?: string;
75
    readOnly?: boolean;
76
    automaticLayout?: boolean;
77
    wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded';
78
    minimap?: IEditorMinimapOptions;
79
    scrollbar?: IEditorScrollbarOptions;
80
    lineNumbers?: 'on' | 'off' | 'relative' | 'interval';
81
    fontSize?: number;
82
    fontFamily?: string;
83
    tabSize?: number;
84
    insertSpaces?: boolean;
85
    // ... many more options
86
}
87
```
88

89
### IEditorMinimapOptions
90

91
```typescript { .api }
92
interface IEditorMinimapOptions {
93
    enabled?: boolean;
94
    side?: 'right' | 'left';
95
    size?: 'proportional' | 'fill' | 'fit';
96
    showSlider?: 'always' | 'mouseover';
97
    autohide?: boolean;
98
}
99
```
100

101
### IEditorScrollbarOptions
102

103
```typescript { .api }
104
interface IEditorScrollbarOptions {
105
    vertical?: 'auto' | 'visible' | 'hidden';
106
    horizontal?: 'auto' | 'visible' | 'hidden';
107
    arrowSize?: number;
108
    useShadows?: boolean;
109
    verticalHasArrows?: boolean;
110
    horizontalHasArrows?: boolean;
111
    handleMouseWheel?: boolean;
112
    alwaysConsumeMouseWheel?: boolean;
113
}
114
```
115

116
## Editor Management
117

118
### Getting Editor Instances
119

120
```typescript { .api }
121
monaco.editor.getEditors(): ICodeEditor[]
122
```
123

124
Returns all editor instances.
125

126
```typescript { .api }
127
monaco.editor.getDiffEditors(): IDiffEditor[]
128
```
129

130
Returns all diff editor instances.
131

132
### Editor State Management
133

134
```typescript { .api }
135
editor.focus(): void
136
```
137

138
Focuses the editor.
139

140
```typescript { .api }
141
editor.hasTextFocus(): boolean
142
```
143

144
Returns true if the editor has text focus.
145

146
```typescript { .api }
147
editor.getPosition(): Position | null
148
```
149

150
Gets the current cursor position.
151

152
```typescript { .api }
153
editor.setPosition(position: IPosition): void
154
```
155

156
Sets the cursor position.
157

158
```typescript { .api }
159
editor.getSelection(): Selection | null
160
```
161

162
Gets the current selection.
163

164
```typescript { .api }
165
editor.setSelection(selection: IRange | ISelection): void
166
```
167

168
Sets the selection.
169

170
### Content Management
171

172
```typescript { .api }
173
editor.getValue(options?: IEditorStateOptions): string
174
```
175

176
Gets the editor content.
177

178
```typescript { .api }
179
editor.setValue(newValue: string): void
180
```
181

182
Sets the editor content.
183

184
```typescript { .api }
185
editor.getModel(): ITextModel | null
186
```
187

188
Gets the current model.
189

190
```typescript { .api }
191
editor.setModel(model: ITextModel | null): void
192
```
193

194
Sets the current model.
195

196
## Editor Actions
197

198
### Built-in Actions
199

200
```typescript { .api }
201
editor.trigger(source: string | null | undefined, handlerId: string, payload: any): void
202
```
203

204
Triggers an editor action.
205

206
Common action IDs:
207
- `'editor.action.formatDocument'` - Format document
208
- `'editor.action.commentLine'` - Toggle line comment
209
- `'editor.action.copyLinesDown'` - Copy lines down
210
- `'editor.action.selectAll'` - Select all content
211
- `'undo'` - Undo last change
212
- `'redo'` - Redo last undone change
213

214
```typescript
215
// Format the document
216
editor.trigger('keyboard', 'editor.action.formatDocument', null);
217

218
// Toggle line comment
219
editor.trigger('keyboard', 'editor.action.commentLine', null);
220
```
221

222
### Custom Actions
223

224
```typescript { .api }
225
editor.addAction(descriptor: IActionDescriptor): IDisposable
226
```
227

228
Adds a custom action to the editor.
229

230
```typescript { .api }
231
interface IActionDescriptor {
232
    id: string;
233
    label: string;
234
    alias?: string;
235
    precondition?: string;
236
    keybindings?: number[];
237
    keybindingContext?: string;
238
    contextMenuGroupId?: string;
239
    contextMenuOrder?: number;
240
    run(editor: ICodeEditor, ...args: any[]): void | Promise<void>;
241
}
242
```
243

244
```typescript
245
const disposable = editor.addAction({
246
    id: 'my-unique-id',
247
    label: 'My Custom Action',
248
    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],
249
    contextMenuGroupId: 'navigation',
250
    contextMenuOrder: 1.5,
251
    run: function(ed) {
252
        alert('Custom action executed!');
253
    }
254
});
255
```
256

257
### Keyboard Constants
258

259
```typescript { .api }
260
enum KeyMod {
261
    CtrlCmd = 2048,
262
    Shift = 1024,
263
    Alt = 512,
264
    WinCtrl = 256
265
}
266
```
267

268
Key modifier constants for combining with key codes in actions.
269

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

286
Keyboard key codes for use in keybinding definitions.
287

288
```typescript
289
// Common keybinding combinations
290
const saveKeybinding = monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S;
291
const formatKeybinding = monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.KEY_F;
292
```
293

294
## Event Handling
295

296
### Content Changes
297

298
```typescript { .api }
299
editor.onDidChangeModelContent(listener: (e: IModelContentChangedEvent) => void): IDisposable
300
```
301

302
Fired when the model content changes.
303

304
```typescript
305
const disposable = editor.onDidChangeModelContent((e) => {
306
    console.log('Content changed:', e);
307
});
308
```
309

310
### Cursor Position Changes
311

312
```typescript { .api }
313
editor.onDidChangeCursorPosition(listener: (e: ICursorPositionChangedEvent) => void): IDisposable
314
```
315

316
Fired when the cursor position changes.
317

318
### Selection Changes
319

320
```typescript { .api }
321
editor.onDidChangeCursorSelection(listener: (e: ICursorSelectionChangedEvent) => void): IDisposable
322
```
323

324
Fired when the selection changes.
325

326
### Focus Events
327

328
```typescript { .api }
329
editor.onDidFocusEditorText(listener: () => void): IDisposable
330
```
331

332
Fired when the editor gains focus.
333

334
```typescript { .api }
335
editor.onDidBlurEditorText(listener: () => void): IDisposable
336
```
337

338
Fired when the editor loses focus.
339

340
## Layout and Sizing
341

342
### Automatic Layout
343

344
```typescript { .api }
345
editor.layout(dimension?: IDimension): void
346
```
347

348
Instructs the editor to remeasure its container.
349

350
```typescript { .api }
351
interface IDimension {
352
    width: number;
353
    height: number;
354
}
355
```
356

357
```typescript
358
// Automatic layout on window resize
359
window.addEventListener('resize', () => {
360
    editor.layout();
361
});
362

363
// Manual layout with specific dimensions
364
editor.layout({ width: 800, height: 600 });
365
```
366

367
## Themes
368

369
### Built-in Themes
370

371
```typescript { .api }
372
monaco.editor.setTheme(themeName: string): void
373
```
374

375
Sets the global theme.
376

377
Built-in themes:
378
- `'vs'` - Light theme
379
- `'vs-dark'` - Dark theme  
380
- `'hc-black'` - High contrast black theme
381
- `'hc-light'` - High contrast light theme
382

383
```typescript
384
monaco.editor.setTheme('vs-dark');
385
```
386

387
### Custom Themes
388

389
```typescript { .api }
390
monaco.editor.defineTheme(themeName: string, themeData: IStandaloneThemeData): void
391
```
392

393
Defines a custom theme.
394

395
```typescript { .api }
396
interface IStandaloneThemeData {
397
    base: 'vs' | 'vs-dark' | 'hc-black' | 'hc-light';
398
    inherit: boolean;
399
    rules: ITokenThemeRule[];
400
    encodedTokensColors?: string[];
401
    colors: IColors;
402
}
403
```
404

405
## Disposal
406

407
### Editor Disposal
408

409
```typescript { .api }
410
editor.dispose(): void
411
```
412

413
Disposes the editor and frees resources.
414

415
```typescript
416
// Always dispose editors when done
417
editor.dispose();
418
```
419

420
### Disposable Management
421

422
```typescript { .api }
423
interface IDisposable {
424
    dispose(): void;
425
}
426
```
427

428
Many Monaco operations return disposables that should be cleaned up:
429

430
```typescript
431
const disposables: IDisposable[] = [];
432

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

437
disposables.push(editor.addAction({
438
    // Action descriptor
439
}));
440

441
// Clean up all disposables
442
disposables.forEach(d => d.dispose());
443
```