Add option to control width of the line cursor (#41169)

* Add option to control width of the line cursor #41052

* Allow lineCursorWidth greater than 10

* Avoid linecontent read when not needed

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

@@ -38,6 +38,7 @@ export class ViewCursor {
 	private readonly _domNode: FastDomNode<HTMLElement>;
 
 	private _cursorStyle: TextEditorCursorStyle;
+	private _lineCursorWidth: number;
 	private _lineHeight: number;
 	private _typicalHalfwidthCharacterWidth: number;
 
@@ -55,6 +56,7 @@ export class ViewCursor {
 		this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
 		this._lineHeight = this._context.configuration.editor.lineHeight;
 		this._typicalHalfwidthCharacterWidth = this._context.configuration.editor.fontInfo.typicalHalfwidthCharacterWidth;
+		this._lineCursorWidth = Math.min(this._context.configuration.editor.viewInfo.lineCursorWidth, this._typicalHalfwidthCharacterWidth);
 
 		this._isVisible = true;
 
@@ -103,13 +105,15 @@ export class ViewCursor {
 		if (e.lineHeight) {
 			this._lineHeight = this._context.configuration.editor.lineHeight;
 		}
-		if (e.viewInfo) {
-			this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
-		}
 		if (e.fontInfo) {
 			Configuration.applyFontInfo(this._domNode, this._context.configuration.editor.fontInfo);
 			this._typicalHalfwidthCharacterWidth = this._context.configuration.editor.fontInfo.typicalHalfwidthCharacterWidth;
 		}
+		if (e.viewInfo) {
+			this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
+			this._lineCursorWidth = Math.min(this._context.configuration.editor.viewInfo.lineCursorWidth, this._typicalHalfwidthCharacterWidth);
+		}
+
 		return true;
 	}
 
@@ -119,6 +123,8 @@ export class ViewCursor {
 	}
 
 	private _prepareRender(ctx: RenderingContext): ViewCursorRenderData {
+		let textContent = '';
+
 		if (this._cursorStyle === TextEditorCursorStyle.Line || this._cursorStyle === TextEditorCursorStyle.LineThin) {
 			const visibleRange = ctx.visibleRangeForPosition(this._position);
 			if (!visibleRange) {
@@ -127,12 +133,16 @@ export class ViewCursor {
 			}
 			let width: number;
 			if (this._cursorStyle === TextEditorCursorStyle.Line) {
-				width = dom.computeScreenAwareSize(2);
+				width = dom.computeScreenAwareSize(this._lineCursorWidth > 0 ? this._lineCursorWidth : 2);
+				if (this._lineCursorWidth > 2) {
+					const lineContent = this._context.model.getLineContent(this._position.lineNumber);
+					textContent = lineContent.charAt(this._position.column - 1);
+				}
 			} else {
 				width = dom.computeScreenAwareSize(1);
 			}
 			const top = ctx.getVerticalOffsetForLineNumber(this._position.lineNumber) - ctx.bigNumbersDelta;
-			return new ViewCursorRenderData(top, visibleRange.left, width, this._lineHeight, '');
+			return new ViewCursorRenderData(top, visibleRange.left, width, this._lineHeight, textContent);
 		}
 
 		const visibleRangeForCharacter = ctx.linesVisibleRangesForRange(new Range(this._position.lineNumber, this._position.column, this._position.lineNumber, this._position.column + 1), false);
@@ -145,7 +155,6 @@ export class ViewCursor {
 		const range = visibleRangeForCharacter[0].ranges[0];
 		const width = range.width < 1 ? this._typicalHalfwidthCharacterWidth : range.width;
 
-		let textContent = '';
 		if (this._cursorStyle === TextEditorCursorStyle.Block) {
 			const lineContent = this._context.model.getLineContent(this._position.lineNumber);
 			textContent = lineContent.charAt(this._position.column - 1);

src/vs/editor/browser/viewParts/viewCursors/viewCursors.css

@@ -10,6 +10,7 @@
 .monaco-editor .cursors-layer > .cursor {
 	position: absolute;
 	cursor: text;
+	overflow: hidden;
 }
 .monaco-editor .cursors-layer > .cursor.secondary {
 	opacity: 0.6;

src/vs/editor/common/config/commonEditorConfig.ts

@@ -511,6 +511,11 @@ const editorConfiguration: IConfigurationNode = {
 			'default': editorOptions.cursorStyleToString(EDITOR_DEFAULTS.viewInfo.cursorStyle),
 			'description': nls.localize('cursorStyle', "Controls the cursor style, accepted values are 'block', 'block-outline', 'line', 'line-thin', 'underline' and 'underline-thin'")
 		},
+		'editor.lineCursorWidth': {
+			'type': 'integer',
+			'default': EDITOR_DEFAULTS.viewInfo.lineCursorWidth,
+			'description': nls.localize('lineCursorWidth', "Controls the width of the cursor when editor.cursorStyle is set to 'line'")
+		},
 		'editor.fontLigatures': {
 			'type': 'boolean',
 			'default': EDITOR_DEFAULTS.viewInfo.fontLigatures,

src/vs/editor/common/config/editorOptions.ts

@@ -256,6 +256,10 @@ export interface IEditorOptions {
 	 * Defaults to 'line'.
 	 */
 	cursorStyle?: string;
+	/**
+	 * Control the width of the cursor when cursorStyle is set to 'line'
+	 */
+	lineCursorWidth?: number;
 	/**
 	 * Enable font ligatures.
 	 * Defaults to false.
@@ -786,6 +790,7 @@ export interface InternalEditorViewOptions {
 	readonly cursorBlinking: TextEditorCursorBlinkingStyle;
 	readonly mouseWheelZoom: boolean;
 	readonly cursorStyle: TextEditorCursorStyle;
+	readonly lineCursorWidth: number;
 	readonly hideCursorInOverviewRuler: boolean;
 	readonly scrollBeyondLastLine: boolean;
 	readonly smoothScrolling: boolean;
@@ -1054,6 +1059,7 @@ export class InternalEditorOptions {
 			&& a.cursorBlinking === b.cursorBlinking
 			&& a.mouseWheelZoom === b.mouseWheelZoom
 			&& a.cursorStyle === b.cursorStyle
+			&& a.lineCursorWidth === b.lineCursorWidth
 			&& a.hideCursorInOverviewRuler === b.hideCursorInOverviewRuler
 			&& a.scrollBeyondLastLine === b.scrollBeyondLastLine
 			&& a.smoothScrolling === b.smoothScrolling
@@ -1647,6 +1653,7 @@ export class EditorOptionsValidator {
 			cursorBlinking: _cursorBlinkingStyleFromString(opts.cursorBlinking, defaults.cursorBlinking),
 			mouseWheelZoom: _boolean(opts.mouseWheelZoom, defaults.mouseWheelZoom),
 			cursorStyle: _cursorStyleFromString(opts.cursorStyle, defaults.cursorStyle),
+			lineCursorWidth: _clampedInt(opts.lineCursorWidth, defaults.lineCursorWidth, 1, Number.MAX_VALUE),
 			hideCursorInOverviewRuler: _boolean(opts.hideCursorInOverviewRuler, defaults.hideCursorInOverviewRuler),
 			scrollBeyondLastLine: _boolean(opts.scrollBeyondLastLine, defaults.scrollBeyondLastLine),
 			smoothScrolling: _boolean(opts.smoothScrolling, defaults.smoothScrolling),
@@ -1749,6 +1756,7 @@ export class InternalEditorOptionsFactory {
 				cursorBlinking: opts.viewInfo.cursorBlinking,
 				mouseWheelZoom: opts.viewInfo.mouseWheelZoom,
 				cursorStyle: opts.viewInfo.cursorStyle,
+				lineCursorWidth: opts.viewInfo.lineCursorWidth,
 				hideCursorInOverviewRuler: opts.viewInfo.hideCursorInOverviewRuler,
 				scrollBeyondLastLine: opts.viewInfo.scrollBeyondLastLine,
 				smoothScrolling: opts.viewInfo.smoothScrolling,
@@ -2172,6 +2180,7 @@ export const EDITOR_DEFAULTS: IValidatedEditorOptions = {
 		cursorBlinking: TextEditorCursorBlinkingStyle.Blink,
 		mouseWheelZoom: false,
 		cursorStyle: TextEditorCursorStyle.Line,
+		lineCursorWidth: 2,
 		hideCursorInOverviewRuler: false,
 		scrollBeyondLastLine: true,
 		smoothScrolling: false,

src/vs/monaco.d.ts

@@ -2538,6 +2538,10 @@ declare module monaco.editor {
 		 * Defaults to 'line'.
 		 */
 		cursorStyle?: string;
+		/**
+		 * Control the width of the cursor when cursorStyle is set to 'line'
+		 */
+		lineCursorWidth?: number;
 		/**
 		 * Enable font ligatures.
 		 * Defaults to false.
@@ -3003,6 +3007,7 @@ declare module monaco.editor {
 		readonly cursorBlinking: TextEditorCursorBlinkingStyle;
 		readonly mouseWheelZoom: boolean;
 		readonly cursorStyle: TextEditorCursorStyle;
+		readonly lineCursorWidth: number;
 		readonly hideCursorInOverviewRuler: boolean;
 		readonly scrollBeyondLastLine: boolean;
 		readonly smoothScrolling: boolean;