Support editor content change notification, URI property and correctly align toolbar items (#2327)

* Support editor content change notification, URI property and correctly align toolbar items

* Better fix for toolbar orientation, plus minor editor fixes

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

@@ -19,7 +19,7 @@ import { IModeService } from 'vs/editor/common/services/modeService';
 import { IModelService } from 'vs/editor/common/services/modelService';
 
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
-import { IComponent, IComponentDescriptor, IModelStore } from 'sql/parts/modelComponents/interfaces';
+import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
 import { QueryTextEditor } from 'sql/parts/modelComponents/queryTextEditor';
 
 @Component({
@@ -34,6 +34,7 @@ export default class EditorComponent extends ComponentBase implements IComponent
 	private _editorModel: ITextModel;
 	private _renderedContent: string;
 	private _languageMode: string;
+	private _uri: string;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@@ -57,7 +58,8 @@ export default class EditorComponent extends ComponentBase implements IComponent
 		this._editor = this._instantiationService.createInstance(QueryTextEditor);
 		this._editor.create(this._el.nativeElement);
 		this._editor.setVisible(true);
-		this._editorInput = this._instantiationService.createInstance(UntitledEditorInput, URI.from({ scheme: Schemas.untitled, path: `${this.descriptor.type}-${this.descriptor.id}` }), false, 'sql', '', '');
+		let uri = this.createUri();
+		this._editorInput = this._instantiationService.createInstance(UntitledEditorInput, uri, false, 'sql', '', '');
 		this._editor.setInput(this._editorInput, undefined);
 		this._editorInput.resolve().then(model => this._editorModel = model.textEditorModel);
 
@@ -65,9 +67,23 @@ export default class EditorComponent extends ComponentBase implements IComponent
 		this._register(this._editorInput);
 		this._register(this._editorModel.onDidChangeContent(e => {
 			this.content = this._editorModel.getValue();
+
+			// Notify via an event so that extensions can detect and propagate changes
+			this._onEventEmitter.fire({
+				eventType: ComponentEventType.onDidChange,
+				args: e
+			});
 		}));
 	}
 
+	private createUri(): URI {
+		let uri = URI.from({ scheme: Schemas.untitled, path: `${this.descriptor.type}-${this.descriptor.id}` });
+		// Use this to set the internal (immutable) and public (shared with extension) uri properties
+		this._uri = uri.toString();
+		this.uri = this._uri;
+		return uri;
+	}
+
 	ngOnDestroy(): void {
 		this.baseDestroy();
 	}
@@ -117,6 +133,7 @@ export default class EditorComponent extends ComponentBase implements IComponent
 		if (this.languageMode !== this._languageMode) {
 			this.updateLanguageMode();
 		}
+		// Intentionally not setting URI for now as it is readonly.
 	}
 
 	// CSS-bound properties
@@ -141,6 +158,14 @@ export default class EditorComponent extends ComponentBase implements IComponent
 	}
 
 	public set position(newValue: string) {
-		this.setPropertyFromUI<sqlops.EditorProperties, string>((properties, position) => { properties.languoffsetMarginageMode = position; }, newValue);
+		this.setPropertyFromUI<sqlops.EditorProperties, string>((properties, position) => { properties.position = position; }, newValue);
+	}
+
+	public get uri(): string {
+		return this.getPropertyOrDefault<sqlops.EditorProperties, string>((props) => props.uri, '');
+	}
+
+	public set uri(newValue: string) {
+		this.setPropertyFromUI<sqlops.EditorProperties, string>((properties, uri) => { properties.uri = uri; }, newValue);
 	}
 }

src/sql/parts/modelComponents/toolbarLayout.css

@@ -31,10 +31,9 @@
 }
 
 .modelview-toolbar-container .modelview-toolbar-title {
-	padding-right: 5px;
+	padding: 4px;
 	font-size: 14px;
 	cursor: pointer;
-	margin: auto;
 }
 
 .modelview-toolbar-container .modelview-toolbar-component select,

src/sql/sqlops.proposed.d.ts

@@ -579,6 +579,17 @@ declare module 'sqlops' {
 		 * The languge mode for this text editor. The language mode is SQL by default.
 		 */
 		languageMode: string;
+		/**
+		 * The editor Uri which will be used as a reference for VSCode Language Service.
+		 * Currently this is auto-generated by the framework but can be queried after
+		 * view initialization is completed
+		 */
+		readonly editorUri: string;
+		/**
+		 * An event called when the editor content is updated
+		 */
+		readonly onContentChanged: vscode.Event<any>;
+
 	}
 
 	export interface ButtonComponent extends Component, ButtonProperties {

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

@@ -764,10 +764,10 @@ class WebViewWrapper extends ComponentWrapper implements sqlops.WebViewComponent
 }
 
 class EditorWrapper extends ComponentWrapper implements sqlops.EditorComponent {
-
 	constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {
 		super(proxy, handle, ModelComponentTypes.Editor, id);
 		this.properties = {};
+		this._emitterMap.set(ComponentEventType.onDidChange, new Emitter<any>());
 	}
 
 	public get content(): string {
@@ -783,6 +783,15 @@ class EditorWrapper extends ComponentWrapper implements sqlops.EditorComponent {
 	public set languageMode(v: string) {
 		this.setProperty('languageMode', v);
 	}
+
+	public get editorUri(): string {
+		return this.properties['editorUri'];
+	}
+
+	public get onContentChanged(): vscode.Event<any> {
+		let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
+		return emitter && emitter.event;
+	}
 }
 
 class RadioButtonWrapper extends ComponentWrapper implements sqlops.RadioButtonComponent {