Support colorization of injected text with NES (microsoft#239236)

fix microsoft/vscode-copilot#12426

Author: benibenj

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineDiffView.ts

@@ -12,6 +12,7 @@ import { LineSource, renderLines, RenderOptions } from '../../../../../browser/w
 import { diffAddDecoration } from '../../../../../browser/widget/diffEditor/registrations.contribution.js';
 import { applyViewZones, IObservableViewZone } from '../../../../../browser/widget/diffEditor/utils.js';
 import { EditorOption } from '../../../../../common/config/editorOptions.js';
+import { OffsetRange } from '../../../../../common/core/offsetRange.js';
 import { Range } from '../../../../../common/core/range.js';
 import { AbstractText } from '../../../../../common/core/textEdit.js';
 import { DetailedLineRangeMapping } from '../../../../../common/diff/rangeMapping.js';
@@ -36,6 +37,8 @@ export class OriginalEditorInlineDiffView extends Disposable implements IInlineE
 
 	readonly isHovered = constObservable(false);
 
+	private readonly _tokenizationFinished = modelTokenizationFinished(this._modifiedTextModel);
+
 	constructor(
 		private readonly _originalEditor: ICodeEditor,
 		private readonly _state: IObservable<IOriginalEditorInlineDiffViewState | undefined>,
@@ -55,8 +58,6 @@ export class OriginalEditorInlineDiffView extends Disposable implements IInlineE
 
 		const editor = observableCodeEditor(this._originalEditor);
 
-		const tokenizationFinished = modelTokenizationFinished(_modifiedTextModel);
-
 		const originalViewZones = derived(this, (reader) => {
 			const originalModel = editor.model.read(reader);
 			if (!originalModel) { return []; }
@@ -73,7 +74,7 @@ export class OriginalEditorInlineDiffView extends Disposable implements IInlineE
 					continue;
 				}
 
-				tokenizationFinished.read(reader); // Update view-zones once tokenization completes
+				this._tokenizationFinished.read(reader); // Update view-zones once tokenization completes
 
 				const source = new LineSource(diff.modified.mapToLineArray(l => this._modifiedTextModel.tokenization.getLineTokens(l)));
 
@@ -217,15 +218,26 @@ export class OriginalEditorInlineDiffView extends Disposable implements IInlineE
 						// when the injected text becomes long, the editor will split it into multiple spans
 						// to be able to get the border around the start and end of the text, we need to split it into multiple segments
 						const textSegments = insertedText.length > 3 ?
-							[{ text: insertedText.slice(0, 1), extraClasses: ['start'] }, { text: insertedText.slice(1, -1), extraClasses: [] }, { text: insertedText.slice(-1), extraClasses: ['end'] }] :
-							[{ text: insertedText, extraClasses: ['start', 'end'] }];
-
-						for (const { text, extraClasses } of textSegments) {
+							[
+								{ text: insertedText.slice(0, 1), extraClasses: ['start'], offsetRange: new OffsetRange(i.modifiedRange.startColumn - 1, i.modifiedRange.startColumn) },
+								{ text: insertedText.slice(1, -1), extraClasses: [], offsetRange: new OffsetRange(i.modifiedRange.startColumn, i.modifiedRange.endColumn - 2) },
+								{ text: insertedText.slice(-1), extraClasses: ['end'], offsetRange: new OffsetRange(i.modifiedRange.endColumn - 2, i.modifiedRange.endColumn - 1) }
+							] :
+							[
+								{ text: insertedText, extraClasses: ['start', 'end'], offsetRange: new OffsetRange(i.modifiedRange.startColumn - 1, i.modifiedRange.endColumn) }
+							];
+
+						// Tokenization
+						this._tokenizationFinished.read(reader); // reconsider when tokenization is finished
+						const lineTokens = this._modifiedTextModel.tokenization.getLineTokens(i.modifiedRange.startLineNumber);
+
+						for (const { text, extraClasses, offsetRange } of textSegments) {
 							originalDecorations.push({
 								range: Range.fromPositions(i.originalRange.getEndPosition()),
 								options: {
 									description: 'inserted-text',
 									before: {
+										tokens: lineTokens.getTokensInRange(offsetRange),
 										content: text,
 										inlineClassName: classNames(
 											'inlineCompletions-char-insert',

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/view.css

@@ -177,22 +177,19 @@
 		border-radius: 4px;
 		border: 1px solid var(--vscode-editorHoverWidget-border);
 		margin: -2px 0 0 -2px;
-		padding: 2px;
 	}
 
 	.inlineCompletions-char-insert.single-line-inline { /* Inline Decoration */
-		padding: 2px 0;
+		padding: 1px 0;
 		border-top: 1px solid var(--vscode-editorHoverWidget-border);
 		border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
 	}
 	.inlineCompletions-char-insert.single-line-inline.start {
-		padding-left: 2px;
 		border-top-left-radius: 4px;
 		border-bottom-left-radius: 4px;
 		border-left: 1px solid var(--vscode-editorHoverWidget-border);
 	}
 	.inlineCompletions-char-insert.single-line-inline.end {
-		padding-right: 2px;
 		border-top-right-radius: 4px;
 		border-bottom-right-radius: 4px;
 		border-right: 1px solid var(--vscode-editorHoverWidget-border);