vscode/src/vs/workbench/test/browser/componentFixtures/codeEditor.fixture.ts

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

import { URI } from '../../../../base/common/uri.js';
import { ComponentFixtureContext, createEditorServices, defineThemedFixtureGroup, defineComponentFixture, createTextModel } from './fixtureUtils.js';
import { ICodeEditorWidgetOptions, CodeEditorWidget } from '../../../../editor/browser/widget/codeEditor/codeEditorWidget.js';


const SAMPLE_CODE = `// Welcome to VS Code
function greet(name: string): string {
	return \`Hello, \${name}!\`;
}

class Counter {
	private _count = 0;

	increment(): void {
		this._count++;
	}

	get count(): number {
		return this._count;
	}
}

const counter = new Counter();
counter.increment();
console.log(greet('World'));
console.log(\`Count: \${counter.count}\`);
`;

function renderCodeEditor({ container, disposableStore, theme }: ComponentFixtureContext): void {
	container.style.width = '600px';
	container.style.height = '400px';
	container.style.border = '1px solid var(--vscode-editorWidget-border)';

	const instantiationService = createEditorServices(disposableStore, { colorTheme: theme });

	const model = disposableStore.add(createTextModel(
		instantiationService,
		SAMPLE_CODE,
		URI.parse('inmemory://sample.ts'),
		'typescript'
	));

	const editorOptions: ICodeEditorWidgetOptions = {
		contributions: []
	};

	const editor = disposableStore.add(instantiationService.createInstance(
		CodeEditorWidget,
		container,
		{
			automaticLayout: true,
			minimap: { enabled: true },
			lineNumbers: 'on',
			scrollBeyondLastLine: false,
			fontSize: 14,
			fontFamily: 'Consolas, "Courier New", monospace',
			renderWhitespace: 'selection',
			bracketPairColorization: { enabled: true },
		},
		editorOptions
	));

	editor.setModel(model);
}

export default defineThemedFixtureGroup({ path: 'editor/' }, {
	CodeEditor: defineComponentFixture({
		labels: { kind: 'screenshot', blocksCi: true },
		render: (context) => renderCodeEditor(context),
	}),
});