Fix Default Height for Editor Component (#2920)

Editor component didn't have a minimum height set, so fixing this by passing through a minimum height to EditorComponent. Now, if the scrollable height of the editor is less than the minimum height, we use the minimum height as the height of the component.

Also fixed an issue where the markdown code editor's height was far too high. Now we're calculating the height on the layout() call, which gets called every time we display the markdown editor.

src/sql/parts/modelComponents/editor.component.ts

@@ -39,6 +39,7 @@ export default class EditorComponent extends ComponentBase implements IComponent
 	private _languageMode: string;
 	private _uri: string;
 	private _isAutoResizable: boolean;
+	private _minimumHeight: number;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@@ -79,6 +80,9 @@ export default class EditorComponent extends ComponentBase implements IComponent
 		this._register(this._editorModel.onDidChangeContent(e => {
 			this.content = this._editorModel.getValue();
 			if (this._isAutoResizable) {
+				if (this._minimumHeight) {
+					this._editor.setMinimumHeight(this._minimumHeight);
+				}
 				this._editor.setHeightToScrollHeight();
 			}
 
@@ -109,7 +113,8 @@ export default class EditorComponent extends ComponentBase implements IComponent
 
 		let height: number = this.convertSizeToNumber(this.height);
 		if (this._isAutoResizable) {
-			height = this._editor.scrollHeight;
+			this._editor.setHeightToScrollHeight();
+			height = Math.max(this._editor.scrollHeight, this._minimumHeight ? this._minimumHeight : 0);
 		}
 		this._editor.layout(new DOM.Dimension(
 			width && width > 0 ? width : DOM.getContentWidth(this._el.nativeElement),
@@ -152,6 +157,7 @@ export default class EditorComponent extends ComponentBase implements IComponent
 		// Intentionally always updating editorUri as it's wiped out by parent setProperties call.
 		this.editorUri = this._uri;
 		this._isAutoResizable = this.isAutoResizable;
+		this._minimumHeight = this.minimumHeight;
 	}
 
 	// CSS-bound properties
@@ -179,6 +185,14 @@ export default class EditorComponent extends ComponentBase implements IComponent
 		this.setPropertyFromUI<sqlops.EditorProperties, boolean>((properties, isAutoResizable) => { properties.isAutoResizable = isAutoResizable; }, newValue);
 	}
 
+	public get minimumHeight(): number {
+		return this.getPropertyOrDefault<sqlops.EditorProperties, number>((props) => props.minimumHeight, this._editor.minimumHeight);
+	}
+
+	public set minimumHeight(newValue: number) {
+		this.setPropertyFromUI<sqlops.EditorProperties, number>((properties, minimumHeight) => { properties.minimumHeight = minimumHeight; }, newValue);
+	}
+
 	public get editorUri(): string {
 		return this.getPropertyOrDefault<sqlops.EditorProperties, string>((props) => props.editorUri, '');
 	}

src/sql/parts/modelComponents/queryTextEditor.ts

@@ -34,6 +34,7 @@ export class QueryTextEditor extends BaseTextEditor {
 	public static ID = 'modelview.editors.textEditor';
 	private _dimension: DOM.Dimension;
 	private _config: editorCommon.IConfiguration;
+	private _minHeight: number;
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IInstantiationService instantiationService: IInstantiationService,
@@ -116,6 +117,11 @@ export class QueryTextEditor extends BaseTextEditor {
 			this._config = new Configuration(undefined, editorWidget.getDomNode());
 		}
 		let editorHeightUsingLines = this._config.editor.lineHeight * editorWidget.getModel().getLineCount();
-		this.setHeight(editorHeightUsingLines);
+		let editorHeightUsingMinHeight = Math.max(editorHeightUsingLines, this._minHeight);
+		this.setHeight(editorHeightUsingMinHeight);
+	}
+
+	public setMinimumHeight(height: number) : void {
+		this._minHeight = height;
 	}
 }

src/sql/sqlops.proposed.d.ts

@@ -595,6 +595,10 @@ declare module 'sqlops' {
 		 * The languge mode for this text editor. The language mode is SQL by default.
 		 */
 		languageMode?: string;
+		/**
+		 * Minimum height for editor component
+		 */
+		minimumHeight?: number;
 	}
 
 	export interface ButtonProperties extends ComponentProperties, ComponentWithIcon {
@@ -722,6 +726,11 @@ declare module 'sqlops' {
 		 */
 		isAutoResizable: boolean;
 
+		/**
+		 * Minimum height for editor component
+		 */
+		minimumHeight: number;
+
 	}
 
 	export interface ButtonComponent extends Component, ButtonProperties {

src/sql/workbench/api/node/extHostModelView.ts

@@ -913,6 +913,14 @@ class EditorWrapper extends ComponentWrapper implements sqlops.EditorComponent {
 		this.setProperty('isAutoResizable', v);
 	}
 
+	public get minimumHeight(): number {
+		return this.properties['minimumHeight'];
+	}
+
+	public set minimumHeight(v: number) {
+		this.setProperty('minimumHeight', v);
+	}
+
 	public get onContentChanged(): vscode.Event<any> {
 		let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
 		return emitter && emitter.event;