Allowing to define variable line heights

src/vs/editor/browser/editorBrowser.ts

@@ -1068,6 +1068,11 @@ export interface ICodeEditor extends editorCommon.IEditor {
 	 */
 	getTopForPosition(lineNumber: number, column: number): number;
 
+	/**
+	 * Get the line height for the line number.
+	 */
+	getLineHeightForLineNumber(lineNumber: number): number;
+
 	/**
 	 * Set the model ranges that will be hidden in the view.
 	 * Hidden areas are stored per source.

src/vs/editor/browser/services/abstractCodeEditorService.ts

@@ -458,6 +458,7 @@ class DecorationTypeOptionsProvider implements IModelDecorationOptionsProvider {
 	public afterContentClassName: string | undefined;
 	public glyphMarginClassName: string | undefined;
 	public isWholeLine: boolean;
+	public lineHeight?: number;
 	public overviewRuler: IModelDecorationOverviewRulerOptions | undefined;
 	public stickiness: TrackedRangeStickiness | undefined;
 	public beforeInjectedText: InjectedTextOptions | undefined;
@@ -518,6 +519,7 @@ class DecorationTypeOptionsProvider implements IModelDecorationOptionsProvider {
 
 		const options = providerArgs.options;
 		this.isWholeLine = Boolean(options.isWholeLine);
+		this.lineHeight = options.lineHeight;
 		this.stickiness = options.rangeBehavior;
 
 		const lightOverviewRulerColor = options.light && options.light.overviewRulerColor || options.overviewRulerColor;
@@ -547,6 +549,7 @@ class DecorationTypeOptionsProvider implements IModelDecorationOptionsProvider {
 			className: this.className,
 			glyphMarginClassName: this.glyphMarginClassName,
 			isWholeLine: this.isWholeLine,
+			lineHeight: this.lineHeight,
 			overviewRuler: this.overviewRuler,
 			stickiness: this.stickiness,
 			before: this.beforeInjectedText,

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

@@ -61,6 +61,10 @@ export abstract class RestrictedRenderingContext {
 		return this._viewLayout.getVerticalOffsetAfterLineNumber(lineNumber, includeViewZones);
 	}
 
+	public getLineHeightForLineNumber(lineNumber: number): number {
+		return this._viewLayout.getLineHeightForLineNumber(lineNumber);
+	}
+
 	public getDecorationsInViewport(): ViewModelDecoration[] {
 		return this.viewportData.getDecorationsInViewport();
 	}

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

@@ -456,7 +456,7 @@ class ViewLayerRenderer<T extends IVisibleLine> {
 
 		for (let i = startIndex; i <= endIndex; i++) {
 			const lineNumber = rendLineNumberStart + i;
-			lines[i].layoutLine(lineNumber, deltaTop[lineNumber - deltaLN], this._viewportData.lineHeight);
+			lines[i].layoutLine(lineNumber, deltaTop[lineNumber - deltaLN], this._lineHeightForLineNumber(lineNumber));
 		}
 	}
 
@@ -560,7 +560,8 @@ class ViewLayerRenderer<T extends IVisibleLine> {
 					continue;
 				}
 
-				const renderResult = line.renderLine(i + rendLineNumberStart, deltaTop[i], this._viewportData.lineHeight, this._viewportData, sb);
+				const renderedLineNumber = i + rendLineNumberStart;
+				const renderResult = line.renderLine(renderedLineNumber, deltaTop[i], this._lineHeightForLineNumber(renderedLineNumber), this._viewportData, sb);
 				if (!renderResult) {
 					// line does not need rendering
 					continue;
@@ -590,7 +591,8 @@ class ViewLayerRenderer<T extends IVisibleLine> {
 					continue;
 				}
 
-				const renderResult = line.renderLine(i + rendLineNumberStart, deltaTop[i], this._viewportData.lineHeight, this._viewportData, sb);
+				const renderedLineNumber = i + rendLineNumberStart;
+				const renderResult = line.renderLine(renderedLineNumber, deltaTop[i], this._lineHeightForLineNumber(renderedLineNumber), this._viewportData, sb);
 				if (!renderResult) {
 					// line does not need rendering
 					continue;
@@ -605,4 +607,11 @@ class ViewLayerRenderer<T extends IVisibleLine> {
 			}
 		}
 	}
+
+	private _lineHeightForLineNumber(lineNumber: number): number {
+		if (this._viewportData.specialLineHeights.has(lineNumber)) {
+			return this._viewportData.specialLineHeights.get(lineNumber)!;
+		}
+		return this._viewportData.lineHeight;
+	}
 }

src/vs/editor/browser/viewParts/contentWidgets/contentWidgets.ts

@@ -198,7 +198,6 @@ class Widget {
 	private readonly _fixedOverflowWidgets: boolean;
 	private _contentWidth: number;
 	private _contentLeft: number;
-	private _lineHeight: number;
 
 	private _primaryAnchor: PositionPair = new PositionPair(null, null);
 	private _secondaryAnchor: PositionPair = new PositionPair(null, null);
@@ -227,7 +226,6 @@ class Widget {
 		this._fixedOverflowWidgets = options.get(EditorOption.fixedOverflowWidgets);
 		this._contentWidth = layoutInfo.contentWidth;
 		this._contentLeft = layoutInfo.contentLeft;
-		this._lineHeight = options.get(EditorOption.lineHeight);
 
 		this._affinity = null;
 		this._preference = [];
@@ -246,7 +244,6 @@ class Widget {
 
 	public onConfigurationChanged(e: viewEvents.ViewConfigurationChangedEvent): void {
 		const options = this._context.configuration.options;
-		this._lineHeight = options.get(EditorOption.lineHeight);
 		if (e.hasChanged(EditorOption.layoutInfo)) {
 			const layoutInfo = options.get(EditorOption.layoutInfo);
 			this._contentLeft = layoutInfo.contentLeft;
@@ -403,12 +400,12 @@ class Widget {
 	 * The content widget should touch if possible the secondary anchor.
 	 */
 	private _getAnchorsCoordinates(ctx: RenderingContext): { primary: AnchorCoordinate | null; secondary: AnchorCoordinate | null } {
-		const primary = getCoordinates(this._primaryAnchor.viewPosition, this._affinity, this._lineHeight);
+		const primary = getCoordinates(this._primaryAnchor.viewPosition, this._affinity);
 		const secondaryViewPosition = (this._secondaryAnchor.viewPosition?.lineNumber === this._primaryAnchor.viewPosition?.lineNumber ? this._secondaryAnchor.viewPosition : null);
-		const secondary = getCoordinates(secondaryViewPosition, this._affinity, this._lineHeight);
+		const secondary = getCoordinates(secondaryViewPosition, this._affinity);
 		return { primary, secondary };
 
-		function getCoordinates(position: Position | null, affinity: PositionAffinity | null, lineHeight: number): AnchorCoordinate | null {
+		function getCoordinates(position: Position | null, affinity: PositionAffinity | null): AnchorCoordinate | null {
 			if (!position) {
 				return null;
 			}
@@ -421,6 +418,7 @@ class Widget {
 			// Left-align widgets that should appear :before content
 			const left = (position.column === 1 && affinity === PositionAffinity.LeftOfInjectedText ? 0 : horizontalPosition.left);
 			const top = ctx.getVerticalOffsetForLineNumber(position.lineNumber) - ctx.scrollTop;
+			const lineHeight = ctx.getLineHeightForLineNumber(position.lineNumber);
 			return new AnchorCoordinate(top, left, lineHeight);
 		}
 	}

src/vs/editor/browser/viewParts/viewCursors/viewCursor.ts

@@ -193,7 +193,8 @@ export class ViewCursor {
 			}
 
 			const top = ctx.getVerticalOffsetForLineNumber(position.lineNumber) - ctx.bigNumbersDelta;
-			return new ViewCursorRenderData(top, left, paddingLeft, width, this._lineHeight, textContent, textContentClassName);
+			const height = this._context.viewLayout.getLineHeightForLineNumber(position.lineNumber);
+			return new ViewCursorRenderData(top, left, paddingLeft, width, height, textContent, textContentClassName);
 		}
 
 		const visibleRangeForCharacter = ctx.linesVisibleRangesForRange(new Range(position.lineNumber, position.column, position.lineNumber, position.column + nextGrapheme.length), false);
@@ -223,7 +224,7 @@ export class ViewCursor {
 		}
 
 		let top = ctx.getVerticalOffsetForLineNumber(position.lineNumber) - ctx.bigNumbersDelta;
-		let height = this._lineHeight;
+		let height = this._context.viewLayout.getLineHeightForLineNumber(position.lineNumber);
 
 		// Underline might interfere with clicking
 		if (this._cursorStyle === TextEditorCursorStyle.Underline || this._cursorStyle === TextEditorCursorStyle.UnderlineThin) {

src/vs/editor/browser/viewParts/viewLines/viewLine.ts

@@ -163,7 +163,8 @@ export class ViewLine implements IVisibleLine {
 			options.renderWhitespace,
 			options.renderControlCharacters,
 			options.fontLigatures !== EditorFontLigatures.OFF,
-			selectionsOnLine
+			selectionsOnLine,
+			lineHeight
 		);
 
 		if (this._renderedViewLine && this._renderedViewLine.input.equals(renderLineInput)) {
@@ -175,6 +176,8 @@ export class ViewLine implements IVisibleLine {
 		sb.appendString(String(deltaTop));
 		sb.appendString('px;height:');
 		sb.appendString(String(lineHeight));
+		sb.appendString('px;line-height:');
+		sb.appendString(String(lineHeight));
 		sb.appendString('px;" class="');
 		sb.appendString(ViewLine.CLASS_NAME);
 		sb.appendString('">');

src/vs/editor/browser/viewParts/whitespace/whitespace.ts

@@ -146,7 +146,7 @@ export class WhitespaceOverlay extends DynamicViewOverlay {
 		const fauxIndentLength = lineData.minColumn - 1;
 		const onlyBoundary = (this._options.renderWhitespace === 'boundary');
 		const onlyTrailing = (this._options.renderWhitespace === 'trailing');
-		const lineHeight = this._options.lineHeight;
+		const lineHeight = ctx.getLineHeightForLineNumber(lineNumber);
 		const middotWidth = this._options.middotWidth;
 		const wsmiddotWidth = this._options.wsmiddotWidth;
 		const spaceWidth = this._options.spaceWidth;

src/vs/editor/browser/widget/codeEditor/codeEditorWidget.ts

@@ -594,6 +594,13 @@ export class CodeEditorWidget extends Disposable implements editorBrowser.ICodeE
 		return CodeEditorWidget._getVerticalOffsetAfterPosition(this._modelData, lineNumber, maxCol, includeViewZones);
 	}
 
+	public getLineHeightForLineNumber(lineNumber: number): number {
+		if (!this._modelData) {
+			return -1;
+		}
+		return this._modelData.viewModel.viewLayout.getLineHeightForLineNumber(lineNumber);
+	}
+
 	public setHiddenAreas(ranges: IRange[], source?: unknown, forceUpdate?: boolean): void {
 		this._modelData?.viewModel.setHiddenAreas(ranges.map(r => Range.lift(r)), source, forceUpdate);
 	}

src/vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer.ts

@@ -680,7 +680,8 @@ class View extends Disposable {
 			options.get(EditorOption.renderWhitespace),
 			options.get(EditorOption.renderControlCharacters),
 			options.get(EditorOption.fontLigatures) !== EditorFontLigatures.OFF,
-			null
+			null,
+			options.get(EditorOption.lineHeight)
 		));
 
 		return r.html;

src/vs/editor/browser/widget/diffEditor/components/diffEditorViewZones/renderLines.ts

@@ -201,7 +201,8 @@ function renderOriginalLine(
 		options.renderWhitespace,
 		options.renderControlCharacters,
 		options.fontLigatures !== EditorFontLigatures.OFF,
-		null // Send no selections, original line cannot be selected
+		null, // Send no selections, original line cannot be selected
+		options.lineHeight
 	), sb);
 
 	sb.appendString('</div>');

src/vs/editor/common/editorCommon.ts

@@ -634,6 +634,7 @@ export interface IThemeDecorationRenderOptions {
 	fontStyle?: string;
 	fontWeight?: string;
 	fontSize?: string;
+	lineHeight?: number;
 	textDecoration?: string;
 	cursor?: string;
 	color?: string | ThemeColor;

src/vs/editor/common/model.ts

@@ -19,7 +19,7 @@ import { IWordAtPosition } from './core/wordHelper.js';
 import { FormattingOptions } from './languages.js';
 import { ILanguageSelection } from './languages/language.js';
 import { IBracketPairsTextModelPart } from './textModelBracketPairs.js';
-import { IModelContentChange, IModelContentChangedEvent, IModelDecorationsChangedEvent, IModelLanguageChangedEvent, IModelLanguageConfigurationChangedEvent, IModelOptionsChangedEvent, IModelTokensChangedEvent, InternalModelContentChangeEvent, ModelInjectedTextChangedEvent } from './textModelEvents.js';
+import { IModelContentChange, IModelContentChangedEvent, IModelDecorationsChangedEvent, IModelLanguageChangedEvent, IModelLanguageConfigurationChangedEvent, IModelOptionsChangedEvent, IModelTokensChangedEvent, InternalModelContentChangeEvent, ModelInjectedTextChangedEvent, ModelSpecialLineHeightChangedEvent } from './textModelEvents.js';
 import { IGuidesTextModelPart } from './textModelGuides.js';
 import { ITokenizationTextModelPart } from './tokenizationTextModelPart.js';
 import { UndoRedoGroup } from '../../platform/undoRedo/common/undoRedo.js';
@@ -218,6 +218,10 @@ export interface IModelDecorationOptions {
 	 * with the specified {@link IModelDecorationGlyphMarginOptions} in the glyph margin.
 	 */
 	glyphMargin?: IModelDecorationGlyphMarginOptions | null;
+	/**
+	 * If set, the decoration will override the line height of the lines it spans. This can only increase the line height, not decrease it.
+	 */
+	lineHeight?: number | null;
 	/**
 	 * If set, the decoration will be rendered in the lines decorations with this CSS class name.
 	 */
@@ -1233,6 +1237,12 @@ export interface ITextModel {
 	 * @event
 	 */
 	readonly onDidChangeDecorations: Event<IModelDecorationsChangedEvent>;
+	/**
+	 * An event emitted when line heights from decorations changes
+	 * @internal
+	 * @event
+	 */
+	readonly onDidChangeSpecialLineHeight: Event<ModelSpecialLineHeightChangedEvent>;
 	/**
 	 * An event emitted when the model options have changed.
 	 * @event