Introduce vscode.previeHtml command support

Signed-off-by: Vitalii Parfonov <vparfonov@redhat.com>
alvsan09 · Feb 20, 2019 · 45f8993 · 45f8993
1 parent 234b889
commit 45f8993
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## v0.4.0
 - [plugin] added `tasks.onDidEndTask` Plug-in API
+- [plugin] Introduce `vscode.previeHtml` command support 
 - [cpp] fixed `CPP_CLANGD_COMMAND` and `CPP_CLANGD_ARGS` environment variables
 - [electron] open markdown links in the OS default browser
 - [plugin] added ability to display webview panel in 'left', 'right' and 'bottom' area

diff --git a/examples/browser/package.json b/examples/browser/package.json
@@ -61,7 +61,7 @@
     "watch": "concurrently -n compile,bundle \"theiaext watch --preserveWatchOutput\" \"theia build --watch --mode development\"",
     "start": "export THEIA_DEFAULT_PLUGINS=local-dir:../../plugins && theia start",
     "start:debug": "yarn start --log-level=debug",
-    "test": "wdio --max-old-space-size=4096 wdio.conf.js",
+    "test": "wdio wdio.conf.js",
     "test-non-headless": "wdio wdio-non-headless.conf.js",
     "coverage:compile": "yarn build --config coverage-webpack.config.js",
     "coverage:remap": "remap-istanbul -i coverage/coverage.json -o coverage/coverage-final.json --exclude 'frontend/index.js' && rimraf coverage/coverage.json",

diff --git a/packages/plugin-ext-vscode/src/browser/plugin-vscode-commands-contribution.ts b/packages/plugin-ext-vscode/src/browser/plugin-vscode-commands-contribution.ts
@@ -20,6 +20,10 @@ import { CommandService } from '@theia/core/lib/common/command';
 import TheiaURI from '@theia/core/lib/common/uri';
 import URI from 'vscode-uri';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
+import { EditorManager } from '@theia/editor/lib/browser';
+import { WebviewWidget } from '@theia/plugin-ext/lib/main/browser/webview/webview';
+import { ApplicationShell } from '@theia/core/lib/browser';
+import { ResourceProvider } from '@theia/core';
 
 export namespace VscodeCommands {
     export const OPEN: Command = {
@@ -30,6 +34,10 @@ export namespace VscodeCommands {
     export const SET_CONTEXT: Command = {
         id: 'setContext'
     };
+
+    export const PREVIEW_HTML: Command = {
+        id: 'vscode.previewHtml'
+    };
 }
 
 @injectable()
@@ -38,6 +46,12 @@ export class PluginVscodeCommandsContribution implements CommandContribution {
     protected readonly commandService: CommandService;
     @inject(ContextKeyService)
     protected readonly contextKeyService: ContextKeyService;
+    @inject(EditorManager)
+    protected readonly editorManager: EditorManager;
+    @inject(ApplicationShell)
+    protected readonly shell: ApplicationShell;
+    @inject(ResourceProvider)
+    protected readonly resources: ResourceProvider;
 
     registerCommands(commands: CommandRegistry): void {
         commands.registerCommand(VscodeCommands.OPEN, {
@@ -54,5 +68,31 @@ export class PluginVscodeCommandsContribution implements CommandContribution {
                 this.contextKeyService.createKey(String(contextKey), contextValue);
             }
         });
+        commands.registerCommand(VscodeCommands.PREVIEW_HTML, {
+            isVisible: () => true,
+            // tslint:disable-next-line: no-any
+            execute: async (resource: URI, position?: any, label?: string, options?: any) => {
+                label = label || resource.fsPath;
+                const view = new WebviewWidget(label, { allowScripts: true }, {});
+                const res = await this.resources(new TheiaURI(resource));
+                const str = await res.readContents();
+                const html = this.getHtml(str);
+                this.shell.addWidget(view, { area: 'main', mode: 'split-right' });
+                this.shell.activateWidget(view.id);
+                view.setHTML(html);
+
+                const editorWidget = await this.editorManager.getOrCreateByUri(new TheiaURI(resource));
+                editorWidget.editor.onDocumentContentChanged(listener => {
+                    view.setHTML(this.getHtml(editorWidget.editor.document.getText()));
+                });
+
+            }
+        }
+        );
+    }
+
+    private getHtml(body: String) {
+        return `<!DOCTYPE html><html><head></head>${body}</html>`;
     }
+
 }
diff --git a/packages/plugin-ext/src/main/browser/webview/webview.ts b/packages/plugin-ext/src/main/browser/webview/webview.ts
@@ -115,7 +115,6 @@ export class WebviewWidget extends BaseWidget {
                     this.handleMessage(e);
                 };
                 newFrame.style.visibility = 'visible';
-                newFrame.contentWindow!.focus();
             }
         };
 
@@ -140,6 +139,10 @@ export class WebviewWidget extends BaseWidget {
         this.updateSandboxAttribute(newFrame);
     }
 
+    focus() {
+      this.iframe.contentWindow!.focus();
+    }
+
     private reloadFrame() {
         if (!this.iframe || !this.iframe.contentDocument || !this.iframe.contentDocument.documentElement) {
             return;

diff --git a/packages/plugin-ext/src/main/browser/webviews-main.ts b/packages/plugin-ext/src/main/browser/webviews-main.ts
@@ -87,6 +87,9 @@ export class WebviewsMainImpl implements WebviewsMain {
         this.views.set(viewId, view);
         this.shell.addWidget(view, { area: showOptions.area ? showOptions.area : 'main' });
         this.shell.activateWidget(view.id);
+        if (showOptions.preserveFocus) {
+            view.focus();
+        }
     }
     $disposeWebview(handle: string): void {
         const view = this.views.get(handle);

diff --git a/packages/plugin-ext/src/plugin/command-registry.ts b/packages/plugin-ext/src/plugin/command-registry.ts
@@ -33,14 +33,8 @@ export class CommandRegistryImpl implements CommandRegistryExt {
     private cache = new Map<number, theia.Command>();
     private delegatingCommandId: string;
 
-    // tslint:disable-next-line:no-any
-    private static EMPTY_HANDLER(...args: any[]): Promise<any> { return Promise.resolve(undefined); }
-
     constructor(rpc: RPCProtocol) {
         this.proxy = rpc.getProxy(Ext.COMMAND_REGISTRY_MAIN);
-
-        // register internal VS Code commands
-        this.registerCommand({ id: 'vscode.previewHtml' }, CommandRegistryImpl.EMPTY_HANDLER);
     }
 
     getConverter(): CommandsConverter {