Adding widthInEm field to injected text options

build/lib/stylelint/vscode-known-variables.json

@@ -1115,6 +1115,8 @@
 		"--scroll-shadow-surface",
 		"--vscode-chat-list-background",
 		"--vscode-chat-persistent-content-height",
+		"--vscode-colorPicker-colorDecoratorMargin",
+		"--vscode-colorPicker-colorDecoratorWidth",
 		"--vscode-editorCodeLens-fontFamily",
 		"--vscode-editorCodeLens-fontFamilyDefault",
 		"--vscode-editorCodeLens-fontFeatureSettings",

src/vs/editor/browser/view/domLineBreaksComputer.ts

@@ -12,7 +12,7 @@ import { WrappingIndent } from '../../common/config/editorOptions.js';
 import { StringBuilder } from '../../common/core/stringBuilder.js';
 import { InjectedTextOptions } from '../../common/model.js';
 import { ILineBreaksComputer, ILineBreaksComputerContext, ILineBreaksComputerFactory, ModelLineProjectionData } from '../../common/modelLineProjectionData.js';
-import { LineInjectedText } from '../../common/textModelEvents.js';
+import { FixedWidthInjectedTextRange, LineInjectedText } from '../../common/textModelEvents.js';
 import { FontInfo } from '../../common/config/fontInfo.js';
 
 const ttPolicy = createTrustedTypesPolicy('domLineBreaksComputer', { createHTML: value => value });
@@ -78,10 +78,13 @@ function createLineBreaks(targetWindow: Window, context: ILineBreaksComputerCont
 	const wrappedTextIndentLengths: number[] = [];
 	const renderLineContents: string[] = [];
 	const allCharOffsets: number[][] = [];
+	const allSpanStartOffsets: number[][] = [];
 	const allVisibleColumns: number[][] = [];
 	for (let i = 0; i < lineNumbers.length; i++) {
 		const lineNumber = lineNumbers[i];
-		const lineContent = LineInjectedText.applyInjectedText(context.getLineContent(lineNumber), context.getLineInjectedText(lineNumber));
+		const injectedTexts = context.getLineInjectedText(lineNumber);
+		const lineContent = LineInjectedText.applyInjectedText(context.getLineContent(lineNumber), injectedTexts);
+		const fixedWidthRanges = LineInjectedText.getFixedWidthInjectedTextRanges(injectedTexts);
 
 		let firstNonWhitespaceIndex = 0;
 		let wrappedTextIndentLength = 0;
@@ -97,14 +100,20 @@ function createLineBreaks(targetWindow: Window, context: ILineBreaksComputerCont
 				// Track existing indent
 
 				for (let i = 0; i < firstNonWhitespaceIndex; i++) {
-					const charWidth = (
-						lineContent.charCodeAt(i) === CharCode.Tab
-							? (tabSize - (wrappedTextIndentLength % tabSize))
-							: 1
-					);
-					wrappedTextIndentLength += charWidth;
+					const fixedWidthRange = fixedWidthRanges[0];
+					const isFixedWidthStart = fixedWidthRange && fixedWidthRange.startOffset === i;
+					if (isFixedWidthStart) {
+						firstNonWhitespaceIndex = i;
+						break;
+					} else {
+						const charWidth = (
+							lineContent.charCodeAt(i) === CharCode.Tab
+								? (tabSize - (wrappedTextIndentLength % tabSize))
+								: 1
+						);
+						wrappedTextIndentLength += charWidth;
+					}
 				}
-
 				const indentWidth = Math.ceil(fontInfo.spaceWidth * wrappedTextIndentLength);
 
 				// Force sticking to beginning of line if no character would fit except for the indentation
@@ -118,11 +127,19 @@ function createLineBreaks(targetWindow: Window, context: ILineBreaksComputerCont
 		}
 
 		const renderLineContent = lineContent.substr(firstNonWhitespaceIndex);
-		const tmp = renderLine(renderLineContent, wrappedTextIndentLength, tabSize, width, sb, additionalIndentLength);
+		const shiftedFixedWidthRanges = firstNonWhitespaceIndex === 0
+			? fixedWidthRanges
+			: fixedWidthRanges.map(range => ({
+				startOffset: Math.max(0, range.startOffset - firstNonWhitespaceIndex),
+				endOffset: range.endOffset - firstNonWhitespaceIndex,
+				widthInEm: range.widthInEm
+			}));
+		const tmp = renderLine(renderLineContent, wrappedTextIndentLength, tabSize, width, sb, additionalIndentLength, shiftedFixedWidthRanges);
 		firstNonWhitespaceIndices[i] = firstNonWhitespaceIndex;
 		wrappedTextIndentLengths[i] = wrappedTextIndentLength;
 		renderLineContents[i] = renderLineContent;
 		allCharOffsets[i] = tmp[0];
+		allSpanStartOffsets[i] = tmp[2];
 		allVisibleColumns[i] = tmp[1];
 	}
 	const html = sb.build();
@@ -149,7 +166,7 @@ function createLineBreaks(targetWindow: Window, context: ILineBreaksComputerCont
 	for (let i = 0; i < lineNumbers.length; i++) {
 		const lineNumber = lineNumbers[i];
 		const lineDomNode = lineDomNodes[i];
-		const breakOffsets: number[] | null = readLineBreaks(range, lineDomNode, renderLineContents[i], allCharOffsets[i]);
+		const breakOffsets: number[] | null = readLineBreaks(range, lineDomNode, renderLineContents[i], allCharOffsets[i], allSpanStartOffsets[i]);
 		if (breakOffsets === null) {
 			result[i] = createEmptyLineBreakWithPossiblyInjectedText(lineNumber);
 			continue;
@@ -193,7 +210,7 @@ const enum Constants {
 	SPAN_MODULO_LIMIT = 16384
 }
 
-function renderLine(lineContent: string, initialVisibleColumn: number, tabSize: number, width: number, sb: StringBuilder, wrappingIndentLength: number): [number[], number[]] {
+function renderLine(lineContent: string, initialVisibleColumn: number, tabSize: number, width: number, sb: StringBuilder, wrappingIndentLength: number, fixedWidthRanges: readonly FixedWidthInjectedTextRange[]): [number[], number[], number[]] {
 
 	if (wrappingIndentLength !== 0) {
 		const hangingOffset = String(wrappingIndentLength);
@@ -214,14 +231,51 @@ function renderLine(lineContent: string, initialVisibleColumn: number, tabSize:
 	const len = lineContent.length;
 	let visibleColumn = initialVisibleColumn;
 	let charOffset = 0;
+	let fixedWidthRangeIndex = 0;
 	const charOffsets: number[] = [];
+	const spanStartOffsets: number[] = [0];
 	const visibleColumns: number[] = [];
 	let nextCharCode = (0 < len ? lineContent.charCodeAt(0) : CharCode.Null);
+	let spanOpen = true;
 
 	sb.appendString('<span>');
 	for (let charIndex = 0; charIndex < len; charIndex++) {
-		if (charIndex !== 0 && charIndex % Constants.SPAN_MODULO_LIMIT === 0) {
+		let fixedWidthRange = fixedWidthRanges[fixedWidthRangeIndex];
+		const startsFixedWidth = fixedWidthRange && fixedWidthRange.startOffset === charIndex;
+		if (startsFixedWidth) {
+			if (spanOpen) {
+				sb.appendString('</span>');
+			}
+			// Injected text that only reserves horizontal space covers no character, so it gets a span of
+			// its own. Rendering it inside the span of the character below would make that character fixed
+			// width as well. Several such injections can sit at the same offset.
+			while (fixedWidthRange && fixedWidthRange.startOffset === charIndex && fixedWidthRange.endOffset === charIndex) {
+				sb.appendString('<span style="display:inline-block;box-sizing:border-box;white-space:nowrap;width:');
+				sb.appendString(String(fixedWidthRange.widthInEm));
+				sb.appendString('em;">');
+				sb.appendString('</span>');
+				spanStartOffsets.push(charOffset);
+				fixedWidthRange = fixedWidthRanges[++fixedWidthRangeIndex];
+			}
+			// The character below goes into a fixed width span if one still covers it, a normal one
+			// otherwise. At most one such range can start here: injections at the same column are laid
+			// out one after the other, so only an empty one leaves the next starting at the same offset.
+			if (fixedWidthRange && fixedWidthRange.startOffset === charIndex) {
+				sb.appendString('<span style="display:inline-block;box-sizing:border-box;white-space:nowrap;width:');
+				sb.appendString(String(fixedWidthRange.widthInEm));
+				sb.appendString('em;">');
+			} else {
+				sb.appendString('<span>');
+			}
+			spanStartOffsets.push(charOffset);
+			spanOpen = true;
+		} else if (!spanOpen) {
+			sb.appendString('<span>');
+			spanStartOffsets.push(charOffset);
+			spanOpen = true;
+		} else if ((!fixedWidthRange || charIndex < fixedWidthRange.startOffset) && charIndex !== 0 && charIndex % Constants.SPAN_MODULO_LIMIT === 0) {
 			sb.appendString('</span><span>');
+			spanStartOffsets.push(charOffset);
 		}
 		charOffsets[charIndex] = charOffset;
 		visibleColumns[charIndex] = visibleColumn;
@@ -286,26 +340,38 @@ function renderLine(lineContent: string, initialVisibleColumn: number, tabSize:
 
 		charOffset += producedCharacters;
 		visibleColumn += charWidth;
+
+		// A range that covers no character has already been closed above, and must not be consumed here:
+		// its `endOffset` equals its `startOffset`, so this condition would hold one character too early.
+		if (fixedWidthRange && fixedWidthRange.startOffset < fixedWidthRange.endOffset && charIndex + 1 === fixedWidthRange.endOffset) {
+			sb.appendString('</span>');
+			spanOpen = false;
+			fixedWidthRangeIndex++;
+		}
+	}
+	if (spanOpen) {
+		sb.appendString('</span>');
 	}
-	sb.appendString('</span>');
+	// A spacing-only injection at the very end of the line is left out on purpose: nothing follows it,
+	// so it cannot move a break point. `MonospaceLineBreaksComputer` ignores it for the same reason.
 
 	charOffsets[lineContent.length] = charOffset;
 	visibleColumns[lineContent.length] = visibleColumn;
 
 	sb.appendString('</div>');
 
-	return [charOffsets, visibleColumns];
+	return [charOffsets, visibleColumns, spanStartOffsets];
 }
 
-function readLineBreaks(range: Range, lineDomNode: HTMLDivElement, lineContent: string, charOffsets: number[]): number[] | null {
+function readLineBreaks(range: Range, lineDomNode: HTMLDivElement, lineContent: string, charOffsets: number[], spanStartOffsets: number[]): number[] | null {
 	if (lineContent.length <= 1) {
 		return null;
 	}
 	const spans = <HTMLSpanElement[]>Array.prototype.slice.call(lineDomNode.children, 0);
 
 	const breakOffsets: number[] = [];
 	try {
-		discoverBreaks(range, spans, charOffsets, 0, null, lineContent.length - 1, null, breakOffsets);
+		discoverBreaks(range, spans, charOffsets, spanStartOffsets, 0, null, lineContent.length - 1, null, breakOffsets);
 	} catch (err) {
 		console.error(err);
 		return null;
@@ -319,13 +385,13 @@ function readLineBreaks(range: Range, lineDomNode: HTMLDivElement, lineContent:
 	return breakOffsets;
 }
 
-function discoverBreaks(range: Range, spans: HTMLSpanElement[], charOffsets: number[], low: number, lowRects: DOMRectList | null, high: number, highRects: DOMRectList | null, result: number[]): void {
+function discoverBreaks(range: Range, spans: HTMLSpanElement[], charOffsets: number[], spanStartOffsets: number[], low: number, lowRects: DOMRectList | null, high: number, highRects: DOMRectList | null, result: number[]): void {
 	if (low === high) {
 		return;
 	}
 
-	lowRects = lowRects || readClientRect(range, spans, charOffsets[low], charOffsets[low + 1]);
-	highRects = highRects || readClientRect(range, spans, charOffsets[high], charOffsets[high + 1]);
+	lowRects = lowRects || readClientRect(range, spans, charOffsets[low], charOffsets[low + 1], spanStartOffsets);
+	highRects = highRects || readClientRect(range, spans, charOffsets[high], charOffsets[high + 1], spanStartOffsets);
 
 	if (Math.abs(lowRects[0].top - highRects[0].top) <= 0.1) {
 		// same line
@@ -340,13 +406,34 @@ function discoverBreaks(range: Range, spans: HTMLSpanElement[], charOffsets: num
 	}
 
 	const mid = low + ((high - low) / 2) | 0;
-	const midRects = readClientRect(range, spans, charOffsets[mid], charOffsets[mid + 1]);
-	discoverBreaks(range, spans, charOffsets, low, lowRects, mid, midRects, result);
-	discoverBreaks(range, spans, charOffsets, mid, midRects, high, highRects, result);
+	const midRects = readClientRect(range, spans, charOffsets[mid], charOffsets[mid + 1], spanStartOffsets);
+	discoverBreaks(range, spans, charOffsets, spanStartOffsets, low, lowRects, mid, midRects, result);
+	discoverBreaks(range, spans, charOffsets, spanStartOffsets, mid, midRects, high, highRects, result);
 }
 
-function readClientRect(range: Range, spans: HTMLSpanElement[], startOffset: number, endOffset: number): DOMRectList {
-	range.setStart(spans[(startOffset / Constants.SPAN_MODULO_LIMIT) | 0].firstChild!, startOffset % Constants.SPAN_MODULO_LIMIT);
-	range.setEnd(spans[(endOffset / Constants.SPAN_MODULO_LIMIT) | 0].firstChild!, endOffset % Constants.SPAN_MODULO_LIMIT);
+function readClientRect(range: Range, spans: HTMLSpanElement[], startOffset: number, endOffset: number, spanStartOffsets: number[]): DOMRectList {
+	if (!spanStartOffsets) {
+		range.setStart(spans[(startOffset / Constants.SPAN_MODULO_LIMIT) | 0].firstChild!, startOffset % Constants.SPAN_MODULO_LIMIT);
+		range.setEnd(spans[(endOffset / Constants.SPAN_MODULO_LIMIT) | 0].firstChild!, endOffset % Constants.SPAN_MODULO_LIMIT);
+		return range.getClientRects();
+	}
+	const startSpanIndex = findSpanIndex(spanStartOffsets, startOffset);
+	const endSpanIndex = findSpanIndex(spanStartOffsets, endOffset);
+	range.setStart(spans[startSpanIndex].firstChild!, startOffset - spanStartOffsets[startSpanIndex]);
+	range.setEnd(spans[endSpanIndex].firstChild!, endOffset - spanStartOffsets[endSpanIndex]);
 	return range.getClientRects();
 }
+
+function findSpanIndex(spanStartOffsets: readonly number[], offset: number): number {
+	let low = 0;
+	let high = spanStartOffsets.length;
+	while (low < high) {
+		const mid = (low + high) >>> 1;
+		if (spanStartOffsets[mid] <= offset) {
+			low = mid + 1;
+		} else {
+			high = mid;
+		}
+	}
+	return low - 1;
+}

src/vs/editor/common/model.ts

@@ -347,6 +347,12 @@ export interface InjectedTextOptions {
 	 */
 	readonly inlineClassNameAffectsLetterSpacing?: boolean;
 
+	/**
+	 * Sets the width used to wrap this injected text in editor-font em units.
+	 * @internal
+	 */
+	readonly widthInEm?: number;
+
 	/**
 	 * This field allows to attach data to this injected text.
 	 * The data can be read when injected texts at a given position are queried.

src/vs/editor/common/model/textModel.ts

@@ -2463,6 +2463,7 @@ export class ModelDecorationInjectedTextOptions implements model.InjectedTextOpt
 	public readonly tokens: TokenArray | null;
 	readonly inlineClassName: string | null;
 	readonly inlineClassNameAffectsLetterSpacing: boolean;
+	readonly widthInEm: number | undefined;
 	readonly attachedData: unknown | null;
 	readonly cursorStops: model.InjectedTextCursorStops | null;
 
@@ -2471,6 +2472,7 @@ export class ModelDecorationInjectedTextOptions implements model.InjectedTextOpt
 		this.tokens = options.tokens ?? null;
 		this.inlineClassName = options.inlineClassName || null;
 		this.inlineClassNameAffectsLetterSpacing = options.inlineClassNameAffectsLetterSpacing || false;
+		this.widthInEm = options.widthInEm !== undefined && Number.isFinite(options.widthInEm) && options.widthInEm >= 0 ? options.widthInEm : undefined;
 		this.attachedData = options.attachedData || null;
 		this.cursorStops = options.cursorStops || null;
 	}

src/vs/editor/common/textModelEvents.ts

@@ -234,6 +234,24 @@ export class ModelRawFlush {
 	public readonly changeType = RawContentChangedType.Flush;
 }
 
+/**
+ * Represents a fixed-width injected text range within a line.
+ * @internal
+ */
+export interface FixedWidthInjectedTextRange {
+	readonly startOffset: number;
+	readonly endOffset: number;
+	readonly widthInEm: number;
+}
+
+/**
+ * Whether injected text takes up space on a line, either through its content or, when it is
+ * width-only (e.g. `{ content: '', widthInEm: 1 }`), through the horizontal space it reserves.
+ */
+function occupiesHorizontalSpace(options: InjectedTextOptions): boolean {
+	return options.content.length > 0 || (options.widthInEm !== undefined && options.widthInEm > 0);
+}
+
 /**
  * Represents text injected on a line
  * @internal
@@ -257,7 +275,7 @@ export class LineInjectedText {
 	public static fromDecorations(decorations: IModelDecoration[]): LineInjectedText[] {
 		const result: LineInjectedText[] = [];
 		for (const decoration of decorations) {
-			if (decoration.options.before && decoration.options.before.content.length > 0) {
+			if (decoration.options.before && occupiesHorizontalSpace(decoration.options.before)) {
 				result.push(new LineInjectedText(
 					decoration.ownerId,
 					decoration.range.startLineNumber,
@@ -266,7 +284,7 @@ export class LineInjectedText {
 					0,
 				));
 			}
-			if (decoration.options.after && decoration.options.after.content.length > 0) {
+			if (decoration.options.after && occupiesHorizontalSpace(decoration.options.after)) {
 				result.push(new LineInjectedText(
 					decoration.ownerId,
 					decoration.range.endLineNumber,
@@ -288,6 +306,32 @@ export class LineInjectedText {
 		return result;
 	}
 
+	/**
+	 * The ranges of `applyInjectedText(...)` that are rendered at a fixed width. Width-only injected
+	 * text produces an empty range (`startOffset === endOffset`) which reserves horizontal space
+	 * without covering any character.
+	 *
+	 * `injectedTexts` must be sorted by column, which is what `fromDecorations` produces and what
+	 * `applyInjectedText` already requires. The result is then sorted by `startOffset` and never
+	 * overlaps: injections at the same column are laid out one after the other, so only an injection
+	 * with empty content leaves the next one starting at the same offset.
+	 */
+	public static getFixedWidthInjectedTextRanges(injectedTexts: readonly LineInjectedText[] | null): FixedWidthInjectedTextRange[] {
+		const result: FixedWidthInjectedTextRange[] = [];
+		let injectedTextLength = 0;
+		for (const injectedText of injectedTexts ?? []) {
+			const length = injectedText.options.content.length;
+			const startOffset = injectedText.column - 1 + injectedTextLength;
+			const endOffset = startOffset + length;
+			const widthInEm = injectedText.options.widthInEm;
+			if (widthInEm !== undefined) {
+				result.push({ startOffset, endOffset, widthInEm });
+			}
+			injectedTextLength += length;
+		}
+		return result;
+	}
+
 	constructor(
 		public readonly ownerId: number,
 		public readonly lineNumber: number,

src/vs/editor/common/viewLayout/lineDecorations.ts

@@ -92,7 +92,9 @@ export class LineDecoration {
 	}
 
 	private static _typeCompare(a: InlineDecorationType, b: InlineDecorationType): number {
-		const ORDER = [2, 0, 1, 3];
+		// WidthOnly, Before, After, Regular, RegularAffectingLetterSpacing.
+		// Width only decorations come from injected text, which renders before any other decoration.
+		const ORDER = [3, 1, 2, 4, 0];
 		return ORDER[a] - ORDER[b];
 	}