Allowing to define variable line heights

src/vs/editor/browser/controller/editContext/native/nativeEditContext.ts

@@ -405,20 +405,21 @@ export class NativeEditContext extends AbstractEditContext {
 			return;
 		}
 		const options = this._context.configuration.options;
-		const lineHeight = options.get(EditorOption.lineHeight);
 		const contentLeft = options.get(EditorOption.layoutInfo).contentLeft;
 		const parentBounds = this._parent.getBoundingClientRect();
-		const modelStartPosition = this._primarySelection.getStartPosition();
-		const viewStartPosition = this._context.viewModel.coordinatesConverter.convertModelPositionToViewPosition(modelStartPosition);
-		const verticalOffsetStart = this._context.viewLayout.getVerticalOffsetForLineNumber(viewStartPosition.lineNumber);
+		const viewSelection = this._context.viewModel.coordinatesConverter.convertModelRangeToViewRange(this._primarySelection);
+		const verticalOffsetStart = this._context.viewLayout.getVerticalOffsetForLineNumber(viewSelection.startLineNumber);
 
 		const top = parentBounds.top + verticalOffsetStart - this._scrollTop;
-		const height = (this._primarySelection.endLineNumber - this._primarySelection.startLineNumber + 1) * lineHeight;
+		let height = 0;
+		for (let line = viewSelection.startLineNumber; line <= viewSelection.endLineNumber; line++) {
+			height += this._context.viewLayout.getLineHeightForLineNumber(line);
+		}
 		let left = parentBounds.left + contentLeft - this._scrollLeft;
 		let width: number;
 
 		if (this._primarySelection.isEmpty()) {
-			const linesVisibleRanges = ctx.visibleRangeForPosition(viewStartPosition);
+			const linesVisibleRanges = ctx.visibleRangeForPosition(viewSelection.getStartPosition());
 			if (linesVisibleRanges) {
 				left += linesVisibleRanges.left;
 			}
@@ -438,7 +439,6 @@ export class NativeEditContext extends AbstractEditContext {
 		}
 		const options = this._context.configuration.options;
 		const typicalHalfWidthCharacterWidth = options.get(EditorOption.fontInfo).typicalHalfwidthCharacterWidth;
-		const lineHeight = options.get(EditorOption.lineHeight);
 		const contentLeft = options.get(EditorOption.layoutInfo).contentLeft;
 		const parentBounds = this._parent.getBoundingClientRect();
 
@@ -452,7 +452,8 @@ export class NativeEditContext extends AbstractEditContext {
 			const characterModelRange = Range.fromPositions(characterStartPosition, characterEndPosition);
 			const characterViewRange = this._context.viewModel.coordinatesConverter.convertModelRangeToViewRange(characterModelRange);
 			const characterLinesVisibleRanges = this._visibleRangeProvider.linesVisibleRangesForRange(characterViewRange, true) ?? [];
-			const characterVerticalOffset = this._context.viewLayout.getVerticalOffsetForLineNumber(characterViewRange.startLineNumber);
+			const lineNumber = characterViewRange.startLineNumber;
+			const characterVerticalOffset = this._context.viewLayout.getVerticalOffsetForLineNumber(lineNumber);
 			const top = parentBounds.top + characterVerticalOffset - this._scrollTop;
 
 			let left = 0;
@@ -464,7 +465,8 @@ export class NativeEditContext extends AbstractEditContext {
 					break;
 				}
 			}
-			characterBounds.push(new DOMRect(parentBounds.left + contentLeft + left - this._scrollLeft, top, width, lineHeight));
+			const height = this._context.viewLayout.getLineHeightForLineNumber(lineNumber);
+			characterBounds.push(new DOMRect(parentBounds.left + contentLeft + left - this._scrollLeft, top, width, height));
 		}
 		this._editContext.updateCharacterBounds(e.rangeStart, characterBounds);
 	}

src/vs/editor/browser/controller/editContext/native/screenReaderSupport.ts

@@ -27,7 +27,6 @@ export class ScreenReaderSupport {
 	private _contentLeft: number = 1;
 	private _contentWidth: number = 1;
 	private _contentHeight: number = 1;
-	private _lineHeight: number = 1;
 	private _fontInfo!: FontInfo;
 	private _accessibilityPageSize: number = 1;
 	private _ignoreSelectionChangeTime: number = 0;
@@ -73,7 +72,6 @@ export class ScreenReaderSupport {
 		this._contentWidth = layoutInfo.contentWidth;
 		this._contentHeight = layoutInfo.height;
 		this._fontInfo = options.get(EditorOption.fontInfo);
-		this._lineHeight = options.get(EditorOption.lineHeight);
 		this._accessibilityPageSize = options.get(EditorOption.accessibilityPageSize);
 	}
 
@@ -119,15 +117,17 @@ export class ScreenReaderSupport {
 		}
 
 		const editorScrollTop = this._context.viewLayout.getCurrentScrollTop();
-		const top = this._context.viewLayout.getVerticalOffsetForLineNumber(this._primarySelection.positionLineNumber) - editorScrollTop;
+		const lineNumber = this._primarySelection.positionLineNumber;
+		const top = this._context.viewLayout.getVerticalOffsetForLineNumber(lineNumber) - editorScrollTop;
 		if (top < 0 || top > this._contentHeight) {
 			// cursor is outside the viewport
 			this._renderAtTopLeft();
 			return;
 		}
 
-		this._doRender(top, this._contentLeft, this._contentWidth, this._lineHeight);
-		this._setScrollTop();
+		const height = this._context.viewLayout.getLineHeightForLineNumber(lineNumber);
+		this._doRender(top, this._contentLeft, this._contentWidth, height);
+		this._setScrollTop(height);
 	}
 
 	private _renderAtTopLeft(): void {
@@ -137,21 +137,21 @@ export class ScreenReaderSupport {
 	private _doRender(top: number, left: number, width: number, height: number): void {
 		// For correct alignment of the screen reader content, we need to apply the correct font
 		applyFontInfo(this._domNode, this._fontInfo);
-
+		this._domNode.setLineHeight(height);
 		this._domNode.setTop(top);
 		this._domNode.setLeft(left);
 		this._domNode.setWidth(width);
 		this._domNode.setHeight(height);
 	}
 
-	private _setScrollTop(): void {
+	private _setScrollTop(lineHeight: number): void {
 		if (!this._screenReaderContentState) {
 			return;
 		}
 		// Setting position within the screen reader content by modifying scroll position
 		const textContentBeforeSelection = this._screenReaderContentState.value.substring(0, this._screenReaderContentState.selectionStart);
 		const numberOfLinesOfContentBeforeSelection = newlinecount(textContentBeforeSelection);
-		this._domNode.domNode.scrollTop = numberOfLinesOfContentBeforeSelection * this._lineHeight;
+		this._domNode.domNode.scrollTop = numberOfLinesOfContentBeforeSelection * lineHeight;
 	}
 
 	public setAriaOptions(options: IEditorAriaOptions): void {

src/vs/editor/browser/controller/editContext/textArea/textAreaEditContext.ts

@@ -125,7 +125,6 @@ export class TextAreaEditContext extends AbstractEditContext {
 	private _contentWidth: number;
 	private _contentHeight: number;
 	private _fontInfo: FontInfo;
-	private _lineHeight: number;
 	private _emptySelectionClipboard: boolean;
 	private _copyWithSyntaxHighlighting: boolean;
 
@@ -169,7 +168,6 @@ export class TextAreaEditContext extends AbstractEditContext {
 		this._contentWidth = layoutInfo.contentWidth;
 		this._contentHeight = layoutInfo.height;
 		this._fontInfo = options.get(EditorOption.fontInfo);
-		this._lineHeight = options.get(EditorOption.lineHeight);
 		this._emptySelectionClipboard = options.get(EditorOption.emptySelectionClipboard);
 		this._copyWithSyntaxHighlighting = options.get(EditorOption.copyWithSyntaxHighlighting);
 
@@ -591,7 +589,6 @@ export class TextAreaEditContext extends AbstractEditContext {
 		this._contentWidth = layoutInfo.contentWidth;
 		this._contentHeight = layoutInfo.height;
 		this._fontInfo = options.get(EditorOption.fontInfo);
-		this._lineHeight = options.get(EditorOption.lineHeight);
 		this._emptySelectionClipboard = options.get(EditorOption.emptySelectionClipboard);
 		this._copyWithSyntaxHighlighting = options.get(EditorOption.copyWithSyntaxHighlighting);
 		this.textArea.setAttribute('wrap', this._textAreaWrapping && !this._visibleTextArea ? 'on' : 'off');
@@ -745,6 +742,8 @@ export class TextAreaEditContext extends AbstractEditContext {
 				}
 
 				// Try to render the textarea with the color/font style to match the text under it
+				const viewPosition = this._context.viewModel.coordinatesConverter.convertViewPositionToModelPosition(new Position(startPosition.lineNumber, 1));
+				const lineHeight = this._context.viewLayout.getLineHeightForLineNumber(viewPosition.lineNumber);
 				const viewLineData = this._context.viewModel.getViewLineData(startPosition.lineNumber);
 				const startTokenIndex = viewLineData.tokens.findTokenIndexAtOffset(startPosition.column - 1);
 				const endTokenIndex = viewLineData.tokens.findTokenIndexAtOffset(endPosition.column - 1);
@@ -753,15 +752,15 @@ export class TextAreaEditContext extends AbstractEditContext {
 					(textareaSpansSingleToken ? viewLineData.tokens.getPresentation(startTokenIndex) : null)
 				);
 
-				this.textArea.domNode.scrollTop = lineCount * this._lineHeight;
+				this.textArea.domNode.scrollTop = lineCount * lineHeight;
 				this.textArea.domNode.scrollLeft = scrollLeft;
 
 				this._doRender({
 					lastRenderPosition: null,
 					top: top,
 					left: left,
 					width: width,
-					height: this._lineHeight,
+					height: lineHeight,
 					useCover: false,
 					color: (TokenizationRegistry.getColorMap() || [])[presentation.foreground],
 					italic: presentation.italic,
@@ -798,19 +797,21 @@ export class TextAreaEditContext extends AbstractEditContext {
 		if (platform.isMacintosh || this._accessibilitySupport === AccessibilitySupport.Enabled) {
 			// For the popup emoji input, we will make the text area as high as the line height
 			// We will also make the fontSize and lineHeight the correct dimensions to help with the placement of these pickers
+			const lineNumber = this._primaryCursorPosition.lineNumber;
+			const lineHeight = this._context.viewLayout.getLineHeightForLineNumber(lineNumber);
 			this._doRender({
 				lastRenderPosition: this._primaryCursorPosition,
 				top,
 				left: this._textAreaWrapping ? this._contentLeft : left,
 				width: this._textAreaWidth,
-				height: this._lineHeight,
+				height: lineHeight,
 				useCover: false
 			});
 			// In case the textarea contains a word, we're going to try to align the textarea's cursor
 			// with our cursor by scrolling the textarea as much as possible
 			this.textArea.domNode.scrollLeft = this._primaryCursorVisibleRange.left;
 			const lineCount = this._textAreaInput.textAreaState.newlineCountBeforeSelection ?? newlinecount(this.textArea.domNode.value.substring(0, this.textArea.domNode.selectionStart));
-			this.textArea.domNode.scrollTop = lineCount * this._lineHeight;
+			this.textArea.domNode.scrollTop = lineCount * lineHeight;
 			return;
 		}
 
@@ -844,6 +845,7 @@ export class TextAreaEditContext extends AbstractEditContext {
 		const tac = this.textAreaCover;
 
 		applyFontInfo(ta, this._fontInfo);
+		ta.setLineHeight(renderData.height);
 		ta.setTop(renderData.top);
 		ta.setLeft(renderData.left);
 		ta.setWidth(renderData.width);

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

@@ -10,6 +10,7 @@ import { EditorOption } from '../../common/config/editorOptions.js';
 import { StringBuilder } from '../../common/core/stringBuilder.js';
 import * as viewEvents from '../../common/viewEvents.js';
 import { ViewportData } from '../../common/viewLayout/viewLinesViewportData.js';
+import { ViewContext } from '../../common/viewModel/viewContext.js';
 
 /**
  * Represents a visible line
@@ -255,7 +256,8 @@ export class VisibleLinesCollection<T extends IVisibleLine> {
 	private readonly _linesCollection: RenderedLinesCollection<T> = new RenderedLinesCollection<T>(this._lineFactory);
 
 	constructor(
-		private readonly _lineFactory: ILineFactory<T>
+		private readonly _lineFactory: ILineFactory<T>,
+		private readonly _viewContext: ViewContext
 	) {
 	}
 
@@ -343,7 +345,7 @@ export class VisibleLinesCollection<T extends IVisibleLine> {
 
 		const inp = this._linesCollection._get();
 
-		const renderer = new ViewLayerRenderer<T>(this.domNode.domNode, this._lineFactory, viewportData);
+		const renderer = new ViewLayerRenderer<T>(this.domNode.domNode, this._lineFactory, viewportData, this._viewContext);
 
 		const ctx: IRendererContext<T> = {
 			rendLineNumberStart: inp.rendLineNumberStart,
@@ -372,6 +374,7 @@ class ViewLayerRenderer<T extends IVisibleLine> {
 		private readonly _domNode: HTMLElement,
 		private readonly _lineFactory: ILineFactory<T>,
 		private readonly _viewportData: ViewportData,
+		private readonly _viewContext: ViewContext
 	) {
 	}
 
@@ -456,7 +459,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 +563,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 +594,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 +610,8 @@ class ViewLayerRenderer<T extends IVisibleLine> {
 			}
 		}
 	}
+
+	private _lineHeightForLineNumber(lineNumber: number): number {
+		return this._viewContext.viewLayout.getLineHeightForLineNumber(lineNumber);
+	}
 }

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

@@ -26,7 +26,7 @@ export class ViewOverlays extends ViewPart {
 
 		this._visibleLines = new VisibleLinesCollection({
 			createLine: () => new ViewOverlayLine(this._dynamicOverlays)
-		});
+		}, this._context);
 		this.domNode = this._visibleLines.domNode;
 
 		const options = this._context.configuration.options;

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/glyphMargin/glyphMargin.ts

@@ -415,7 +415,8 @@ export class GlyphMarginWidgets extends ViewPart {
 		// Render decorations, reusing previous dom nodes as possible
 		for (let i = 0; i < this._decorationGlyphsToRender.length; i++) {
 			const dec = this._decorationGlyphsToRender[i];
-			const top = ctx.viewportData.relativeVerticalOffset[dec.lineNumber - ctx.viewportData.startLineNumber];
+			const decLineNumber = dec.lineNumber;
+			const top = ctx.viewportData.relativeVerticalOffset[decLineNumber - ctx.viewportData.startLineNumber];
 			const left = this._glyphMarginLeft + dec.laneIndex * this._lineHeight;
 
 			let domNode: FastDomNode<HTMLElement>;
@@ -432,7 +433,8 @@ export class GlyphMarginWidgets extends ViewPart {
 			domNode.setTop(top);
 			domNode.setLeft(left);
 			domNode.setWidth(width);
-			domNode.setHeight(this._lineHeight);
+			const lineHeight = this._context.viewLayout.getLineHeightForLineNumber(decLineNumber);
+			domNode.setHeight(lineHeight);
 		}
 
 		// remove extra dom nodes