Make comment editor expandable (#193668)

Fixes #110403

src/vs/workbench/contrib/comments/browser/commentNode.ts

@@ -16,7 +16,7 @@ import { ILanguageService } from 'vs/editor/common/languages/language';
 import { MarkdownRenderer } from 'vs/editor/contrib/markdownRenderer/browser/markdownRenderer';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ICommentService } from 'vs/workbench/contrib/comments/browser/commentService';
-import { SimpleCommentEditor } from 'vs/workbench/contrib/comments/browser/simpleCommentEditor';
+import { STARTING_EDITOR_HEIGHT, SimpleCommentEditor, calculateEditorHeight } from 'vs/workbench/contrib/comments/browser/simpleCommentEditor';
 import { Selection } from 'vs/editor/common/core/selection';
 import { Emitter, Event } from 'vs/base/common/event';
 import { INotificationService } from 'vs/platform/notification/common/notification';
@@ -72,6 +72,8 @@ export class CommentNode<T extends IRange | ICellRange> extends Disposable {
 	private _commentEditor: SimpleCommentEditor | null = null;
 	private _commentEditorDisposables: IDisposable[] = [];
 	private _commentEditorModel: ITextModel | null = null;
+	private _editorHeight = STARTING_EDITOR_HEIGHT;
+
 	private _isPendingLabel!: HTMLElement;
 	private _timestamp: HTMLElement | undefined;
 	private _timestampWidget: TimestampWidget | undefined;
@@ -480,11 +482,11 @@ export class CommentNode<T extends IRange | ICellRange> extends Disposable {
 		this._commentEditor.setModel(this._commentEditorModel);
 		this._commentEditor.setValue(this.pendingEdit ?? this.commentBodyValue);
 		this.pendingEdit = undefined;
-		this._commentEditor.layout({ width: container.clientWidth - 14, height: 90 });
+		this._commentEditor.layout({ width: container.clientWidth - 14, height: this._editorHeight });
 		this._commentEditor.focus();
 
 		dom.scheduleAtNextAnimationFrame(() => {
-			this._commentEditor!.layout({ width: container.clientWidth - 14, height: 90 });
+			this._commentEditor!.layout({ width: container.clientWidth - 14, height: this._editorHeight });
 			this._commentEditor!.focus();
 		});
 
@@ -519,10 +521,30 @@ export class CommentNode<T extends IRange | ICellRange> extends Disposable {
 			}
 		}));
 
+		this.calculateEditorHeight();
+
+		this._register((this._commentEditorModel.onDidChangeContent(() => {
+			if (this._commentEditor && this.calculateEditorHeight()) {
+				this._commentEditor.layout({ height: this._editorHeight, width: this._commentEditor.getLayoutInfo().width });
+				this._commentEditor.render(true);
+			}
+		})));
+
 		this._register(this._commentEditor);
 		this._register(this._commentEditorModel);
 	}
 
+	private calculateEditorHeight(): boolean {
+		if (this._commentEditor) {
+			const newEditorHeight = calculateEditorHeight(this._commentEditor, this._editorHeight);
+			if (newEditorHeight !== this._editorHeight) {
+				this._editorHeight = newEditorHeight;
+				return true;
+			}
+		}
+		return false;
+	}
+
 	getPendingEdit(): string | undefined {
 		const model = this._commentEditor?.getModel();
 		if (model && model.getValueLength() > 0) {
@@ -551,7 +573,7 @@ export class CommentNode<T extends IRange | ICellRange> extends Disposable {
 	}
 
 	layout() {
-		this._commentEditor?.layout();
+		this._commentEditor?.layout({ width: this._commentEditor.getLayoutInfo().width, height: this._editorHeight });
 		const scrollWidth = this._body.scrollWidth;
 		const width = dom.getContentWidth(this._body);
 		const scrollHeight = this._body.scrollHeight;

src/vs/workbench/contrib/comments/browser/commentReply.ts

@@ -28,7 +28,7 @@ import { ICommentService } from 'vs/workbench/contrib/comments/browser/commentSe
 import { CommentContextKeys } from 'vs/workbench/contrib/comments/common/commentContextKeys';
 import { ICommentThreadWidget } from 'vs/workbench/contrib/comments/common/commentThreadWidget';
 import { ICellRange } from 'vs/workbench/contrib/notebook/common/notebookRange';
-import { SimpleCommentEditor } from './simpleCommentEditor';
+import { STARTING_EDITOR_HEIGHT, SimpleCommentEditor, calculateEditorHeight } from './simpleCommentEditor';
 
 const COMMENT_SCHEME = 'comment';
 let INMEM_MODEL_ID = 0;
@@ -45,6 +45,7 @@ export class CommentReply<T extends IRange | ICellRange> extends Disposable {
 	private _commentFormActions!: CommentFormActions;
 	private _commentEditorActions!: CommentFormActions;
 	private _reviewThreadReplyButton!: HTMLElement;
+	private _editorHeight = STARTING_EDITOR_HEIGHT;
 
 	constructor(
 		readonly owner: string,
@@ -86,10 +87,15 @@ export class CommentReply<T extends IRange | ICellRange> extends Disposable {
 		const model = this.modelService.createModel(this._pendingComment || '', this.languageService.createByFilepathOrFirstLine(resource), resource, false);
 		this._register(model);
 		this.commentEditor.setModel(model);
+		this.calculateEditorHeight();
 
-		this._register((this.commentEditor.getModel()!.onDidChangeContent(() => {
+		this._register((model.onDidChangeContent(() => {
 			this.setCommentEditorDecorations();
 			this.commentEditorIsEmpty?.set(!this.commentEditor.getValue());
+			if (this.calculateEditorHeight()) {
+				this.commentEditor.layout({ height: this._editorHeight, width: this.commentEditor.getLayoutInfo().width });
+				this.commentEditor.render(true);
+			}
 		})));
 
 		this.createTextModelListener(this.commentEditor, this.form);
@@ -110,6 +116,15 @@ export class CommentReply<T extends IRange | ICellRange> extends Disposable {
 		this.createCommentWidgetEditorActions(this._editorActions, model);
 	}
 
+	private calculateEditorHeight(): boolean {
+		const newEditorHeight = calculateEditorHeight(this.commentEditor, this._editorHeight);
+		if (newEditorHeight !== this._editorHeight) {
+			this._editorHeight = newEditorHeight;
+			return true;
+		}
+		return false;
+	}
+
 	public updateCommentThread(commentThread: languages.CommentThread<IRange | ICellRange>) {
 		const isReplying = this.commentEditor.hasTextFocus();
 
@@ -137,7 +152,7 @@ export class CommentReply<T extends IRange | ICellRange> extends Disposable {
 	}
 
 	public layout(widthInPixel: number) {
-		this.commentEditor.layout({ height: 5 * 18, width: widthInPixel - 54 /* margin 20px * 10 + scrollbar 14px*/ });
+		this.commentEditor.layout({ height: this._editorHeight, width: widthInPixel - 54 /* margin 20px * 10 + scrollbar 14px*/ });
 	}
 
 	public focusIfNeeded() {

src/vs/workbench/contrib/comments/browser/media/review.css

@@ -382,7 +382,6 @@
 }
 
 .review-widget .body .edit-textarea {
-	height: 90px;
 	margin: 5px 0 10px 0;
 	margin-right: 12px;
 }

src/vs/workbench/contrib/comments/browser/simpleCommentEditor.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
+import { EditorOption, IEditorOptions } from 'vs/editor/common/config/editorOptions';
 import { EditorAction, EditorContributionInstantiation, EditorExtensionsRegistry, IEditorContributionDescription } from 'vs/editor/browser/editorExtensions';
 import { ICodeEditorService } from 'vs/editor/browser/services/codeEditorService';
 import { CodeEditorWidget, ICodeEditorWidgetOptions } from 'vs/editor/browser/widget/codeEditorWidget';
@@ -25,9 +25,11 @@ import { CommentContextKeys } from 'vs/workbench/contrib/comments/common/comment
 import { ILanguageConfigurationService } from 'vs/editor/common/languages/languageConfigurationRegistry';
 import { ILanguageFeaturesService } from 'vs/editor/common/services/languageFeatures';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
+import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
 
 export const ctxCommentEditorFocused = new RawContextKey<boolean>('commentEditorFocused', false);
-
+export const STARTING_EDITOR_HEIGHT = 5 * 18;
+export const MAX_EDITOR_HEIGHT = 25 * 18;
 
 export class SimpleCommentEditor extends CodeEditorWidget {
 	private _parentThread: ICommentThreadWidget;
@@ -109,3 +111,16 @@ export class SimpleCommentEditor extends CodeEditorWidget {
 		};
 	}
 }
+
+export function calculateEditorHeight(editor: ICodeEditor, currentHeight: number): number {
+	const layoutInfo = editor.getLayoutInfo();
+	const contentHeight = editor.getContentHeight();
+	const lineHeight = editor.getOption(EditorOption.lineHeight);
+	if ((contentHeight > layoutInfo.height) ||
+		(contentHeight < layoutInfo.height && currentHeight > STARTING_EDITOR_HEIGHT)) {
+		const linesToAdd = Math.ceil((contentHeight - layoutInfo.height) / lineHeight);
+		const newEditorHeight = Math.min(MAX_EDITOR_HEIGHT, layoutInfo.height + (lineHeight * linesToAdd));
+		return newEditorHeight;
+	}
+	return currentHeight;
+}