diff --git a/src/sql/parts/modelComponents/editor.component.ts b/src/sql/parts/modelComponents/editor.component.ts index 8061bbfa5e..cd5b039e01 100644 --- a/src/sql/parts/modelComponents/editor.component.ts +++ b/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((properties, position) => { properties.languoffsetMarginageMode = position; }, newValue); + this.setPropertyFromUI((properties, position) => { properties.position = position; }, newValue); + } + + public get uri(): string { + return this.getPropertyOrDefault((props) => props.uri, ''); + } + + public set uri(newValue: string) { + this.setPropertyFromUI((properties, uri) => { properties.uri = uri; }, newValue); } } diff --git a/src/sql/parts/modelComponents/toolbarLayout.css b/src/sql/parts/modelComponents/toolbarLayout.css index db0f09df4c..bd82553c42 100644 --- a/src/sql/parts/modelComponents/toolbarLayout.css +++ b/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, diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index 9d0ba5feed..c99be86edc 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/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; + } export interface ButtonComponent extends Component, ButtonProperties { diff --git a/src/sql/workbench/api/node/extHostModelView.ts b/src/sql/workbench/api/node/extHostModelView.ts index c3e9fb95db..0f7253651f 100644 --- a/src/sql/workbench/api/node/extHostModelView.ts +++ b/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()); } 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 { + let emitter = this._emitterMap.get(ComponentEventType.onDidChange); + return emitter && emitter.event; + } } class RadioButtonWrapper extends ComponentWrapper implements sqlops.RadioButtonComponent {