Editor Layer

import { ITextModel } from 'vs/editor/common/model';
import { URI } from 'vs/base/common/uri';

// Text model represents the document content
export interface ITextModel {
	// Content access
	getValue(): string;
	getLineContent(lineNumber: number): string;
	getLineCount(): number;

	// Editing
	applyEdits(operations: IIdentifiedSingleEditOperation[]): void;
	pushEditOperations(
		beforeSelections: Selection[],
		operations: IIdentifiedSingleEditOperation[],
		cursorStateComputer: ICursorStateComputer
	): Selection[];

	// Events
	onDidChangeContent(listener: (e: IModelContentChangedEvent) => void): IDisposable;
	onDidChangeLanguage(listener: (e: IModelLanguageChangedEvent) => void): IDisposable;

	// Metadata
	getLanguageId(): string;
	getVersionId(): number;
	getAlternativeVersionId(): number;
}

// Create a model
import { createTextModel } from 'vs/editor/common/model/textModel';

const model = createTextModel(
	'function hello() {\n\tconsole.log("Hello");\n}',
	'javascript',
	URI.file('/path/to/file.js')
);

console.log(model.getLineCount()); // 3
console.log(model.getLineContent(2)); // '\tconsole.log("Hello");'

import { Range } from 'vs/editor/common/core/range';
import { IIdentifiedSingleEditOperation } from 'vs/editor/common/model';

// Define an edit operation
const edit: IIdentifiedSingleEditOperation = {
	range: new Range(1, 1, 1, 9), // Start and end position
	text: 'async function', // New text
	forceMoveMarkers: true
};

// Apply edits to model
model.applyEdits([edit]);

// Batch multiple edits
const edits: IIdentifiedSingleEditOperation[] = [
	{
		range: new Range(1, 1, 1, 1),
		text: '// TODO: '
	},
	{
		range: new Range(3, 1, 3, 1),
		text: '\t// End of function\n'
	}
];

model.pushEditOperations([], edits, () => null);

import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
import { ITextModel } from 'vs/editor/common/model';

// ICodeEditor is the main editor interface
export interface ICodeEditor extends IEditor {
	// Model
	getModel(): ITextModel | null;
	setModel(model: ITextModel | null): void;

	// Selections
	getSelection(): Selection | null;
	getSelections(): Selection[] | null;
	setSelection(selection: IRange): void;
	setSelections(selections: readonly ISelection[]): void;

	// View manipulation
	revealLine(lineNumber: number): void;
	revealRange(range: IRange): void;
	revealRangeInCenter(range: IRange): void;

	// Layout
	layout(dimension?: IDimension): void;
	focus(): void;

	// Decorations
	createDecorationsCollection(decorations?: IModelDeltaDecoration[]): IEditorDecorationsCollection;
}

import * as monaco from 'vs/editor/editor.main';
import { IStandaloneCodeEditor } from 'vs/editor/standalone/browser/standaloneCodeEditor';

// Create standalone editor
const editor: IStandaloneCodeEditor = monaco.editor.create(container, {
	value: 'console.log("Hello, world!");',
	language: 'javascript',
	theme: 'vs-dark',
	minimap: { enabled: true },
	lineNumbers: 'on',
	renderWhitespace: 'selection',
	automaticLayout: true
});

// Get model
const model = editor.getModel();

// Listen to changes
editor.onDidChangeModelContent(e => {
	console.log('Content changed:', e.changes);
});

// Get current value
const code = editor.getValue();

// Set cursor position
editor.setPosition({ lineNumber: 1, column: 1 });

// Execute command
editor.trigger('source', 'editor.action.formatDocument', {});

import { FindController } from 'vs/editor/contrib/find/browser/findController';

// Programmatic find
const findController = editor.getContribution<FindController>('editor.contrib.findController');

findController?.start({
	seedSearchStringFromSelection: true,
	shouldFocus: FindStartFocusAction.FocusFindInput,
	shouldAnimate: true
});

// Find next
findController?.moveToNextMatch();

// Replace
findController?.replace();

// Replace all
findController?.replaceAll();

import { SuggestController } from 'vs/editor/contrib/suggest/browser/suggestController';
import { CompletionItemProvider } from 'vs/editor/common/languages';

// Register completion provider
monaco.languages.registerCompletionItemProvider('javascript', {
	provideCompletionItems: (model, position) => {
		return {
			suggestions: [
				{
					label: 'console',
					kind: monaco.languages.CompletionItemKind.Variable,
					insertText: 'console',
					detail: 'Console object'
				},
				{
					label: 'log',
					kind: monaco.languages.CompletionItemKind.Method,
					insertText: 'log(${1:message})',
					insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
					documentation: 'Outputs a message to the console'
				}
			]
		};
	}
});

// Trigger suggest programmatically
const suggestController = editor.getContribution<SuggestController>('editor.contrib.suggestController');
suggestController?.triggerSuggest();

import { HoverController } from 'vs/editor/contrib/hover/browser/hoverController';

// Register hover provider
monaco.languages.registerHoverProvider('javascript', {
	provideHover: (model, position) => {
		const word = model.getWordAtPosition(position);
		if (!word) {
			return null;
		}

		return {
			range: new monaco.Range(
				position.lineNumber,
				word.startColumn,
				position.lineNumber,
				word.endColumn
			),
			contents: [
				{ value: `**${word.word}**` },
				{ value: 'This is a helpful tooltip' }
			]
		};
	}
});

import { IEditorOptions } from 'vs/editor/common/config/editorOptions';

const options: IEditorOptions = {
	// Basic options
	value: 'initial content',
	language: 'typescript',
	theme: 'vs-dark',
	readOnly: false,

	// Rendering options
	lineNumbers: 'on', // 'on' | 'off' | 'relative'
	glyphMargin: true,
	folding: true,
	foldingStrategy: 'auto',
	renderWhitespace: 'selection',
	renderLineHighlight: 'all',

	// Minimap
	minimap: {
		enabled: true,
		maxColumn: 120,
		scale: 1
	},

	// Scrolling
	scrollBeyondLastLine: true,
	scrollbar: {
		vertical: 'visible',
		horizontal: 'visible',
		useShadows: true
	},

	// Editing
	acceptSuggestionOnEnter: 'on',
	quickSuggestions: true,
	tabCompletion: 'on',
	wordWrap: 'off',
	wrapIndent: 'same',

	// Font
	fontSize: 14,
	fontFamily: 'Menlo, Monaco, Courier New',
	fontWeight: 'normal',
	lineHeight: 21,
	letterSpacing: 0
};

// Create editor with options
const editor = monaco.editor.create(container, options);

// Update options
editor.updateOptions({
	readOnly: true,
	fontSize: 16
});

import { IViewZone } from 'vs/editor/browser/editorBrowser';

// Add custom content between lines
const viewZone: IViewZone = {
	afterLineNumber: 10,
	heightInLines: 3,
	domNode: (() => {
		const div = document.createElement('div');
		div.className = 'custom-view-zone';
		div.textContent = 'Custom content here';
		return div;
	})()
};

// Add view zone
editor.changeViewZones(accessor => {
	const zoneId = accessor.addZone(viewZone);
});

import { IContentWidget, ContentWidgetPositionPreference } from 'vs/editor/browser/editorBrowser';

class MyContentWidget implements IContentWidget {
	private readonly domNode: HTMLElement;

	constructor() {
		this.domNode = document.createElement('div');
		this.domNode.className = 'my-content-widget';
		this.domNode.textContent = 'Widget content';
	}

	getId(): string {
		return 'my.content.widget';
	}

	getDomNode(): HTMLElement {
		return this.domNode;
	}

	getPosition(): IContentWidgetPosition {
		return {
			position: { lineNumber: 5, column: 10 },
			preference: [ContentWidgetPositionPreference.ABOVE]
		};
	}
}

// Add widget
const widget = new MyContentWidget();
editor.addContentWidget(widget);

// Remove widget
editor.removeContentWidget(widget);