Allow for auto-resizable editor component (#2818)

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

@@ -38,6 +38,7 @@ export default class EditorComponent extends ComponentBase implements IComponent
 	private _renderedContent: string;
 	private _languageMode: string;
 	private _uri: string;
+	private _isAutoResizable: boolean;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@@ -77,6 +78,9 @@ export default class EditorComponent extends ComponentBase implements IComponent
 		this._register(this._editorInput);
 		this._register(this._editorModel.onDidChangeContent(e => {
 			this.content = this._editorModel.getValue();
+			if (this._isAutoResizable) {
+				this._editor.setHeightToScrollHeight();
+			}
 
 			// Notify via an event so that extensions can detect and propagate changes
 			this.fireEvent({
@@ -104,6 +108,9 @@ export default class EditorComponent extends ComponentBase implements IComponent
 		let width: number = this.convertSizeToNumber(this.width);
 
 		let height: number = this.convertSizeToNumber(this.height);
+		if (this._isAutoResizable) {
+			height = this._editor.scrollHeight;
+		}
 		this._editor.layout(new DOM.Dimension(
 			width && width > 0 ? width : DOM.getContentWidth(this._el.nativeElement),
 			height && height > 0 ? height : DOM.getContentHeight(this._el.nativeElement)));
@@ -144,6 +151,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;
 	}
 
 	// CSS-bound properties
@@ -163,6 +171,14 @@ export default class EditorComponent extends ComponentBase implements IComponent
 		this.setPropertyFromUI<sqlops.EditorProperties, string>((properties, languageMode) => { properties.languageMode = languageMode; }, newValue);
 	}
 
+	public get isAutoResizable(): boolean {
+		return this.getPropertyOrDefault<sqlops.EditorProperties, boolean>((props) => props.isAutoResizable, false);
+	}
+
+	public set isAutoResizable(newValue: boolean) {
+		this.setPropertyFromUI<sqlops.EditorProperties, boolean>((properties, isAutoResizable) => { properties.isAutoResizable = isAutoResizable; }, newValue);
+	}
+
 	public get editorUri(): string {
 		return this.getPropertyOrDefault<sqlops.EditorProperties, string>((props) => props.editorUri, '');
 	}

src/sql/parts/modelComponents/queryTextEditor.ts

@@ -23,6 +23,8 @@ import { EditorOptions } from 'vs/workbench/common/editor';
 import { StandaloneCodeEditor } from 'vs/editor/standalone/browser/standaloneCodeEditor';
 import { CancellationToken } from 'vs/base/common/cancellation';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
+import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
+import { Configuration } from 'vs/editor/browser/config/configuration';
 
 /**
  * Extension of TextResourceEditor that is always readonly rather than only with non UntitledInputs
@@ -31,6 +33,7 @@ export class QueryTextEditor extends BaseTextEditor {
 
 	public static ID = 'modelview.editors.textEditor';
 	private _dimension: DOM.Dimension;
+	private _config: editorCommon.IConfiguration;
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IInstantiationService instantiationService: IInstantiationService,
@@ -98,7 +101,21 @@ export class QueryTextEditor extends BaseTextEditor {
 	public setHeight(height: number) {
 		if (this._dimension) {
 			this._dimension.height = height;
-			this.layout();
+			this.layout(this._dimension);
 		}
 	}
+
+	public get scrollHeight(): number {
+		let editorWidget = this.getControl() as ICodeEditor;
+		return editorWidget.getScrollHeight();
+	}
+
+	public setHeightToScrollHeight(): void {
+		let editorWidget = this.getControl() as ICodeEditor;
+		if (!this._config) {
+			this._config = new Configuration(undefined, editorWidget.getDomNode());
+		}
+		let editorHeightUsingLines = this._config.editor.lineHeight * editorWidget.getModel().getLineCount();
+		this.setHeight(editorHeightUsingLines);
+	}
 }

src/sql/sqlops.proposed.d.ts

@@ -717,6 +717,11 @@ declare module 'sqlops' {
 		 */
 		readonly onEditorCreated: vscode.Event<any>;
 
+		/**
+		 * Toggle for whether the editor should be automatically resized or not
+		 */
+		isAutoResizable: boolean;
+
 	}
 
 	export interface ButtonComponent extends Component, ButtonProperties {

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

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