enable scripts for the table editor view, and reorder table view init methods (#12)

Author: RandomFractals

src/views/tableEditor.ts

@@ -56,7 +56,7 @@ export class TableEditor implements CustomTextEditorProvider {
     document: TextDocument,
     webviewPanel: WebviewPanel,
     token: CancellationToken
-  ): Promise<void> {
+  ): Promise<void> {    
     // create new table view for the given tabular text data document and render it
     TableView.render(this.context.extensionUri, document.uri, webviewPanel);
   }

src/views/tableView.ts

@@ -31,38 +31,11 @@ export class TableView {
   private _disposables: Disposable[] = [];
 
   /**
-   * Creates new TableView instance for tabular data rendering.
-   * 
-   * @param webviewPanel Reference to the webview panel.
-   * @param extensionUri Extension directory Uri.
-   * @param documentUri Data document Uri.
-   */
-  private constructor(webviewPanel: WebviewPanel, extensionUri: Uri, documentUri: Uri) {
-    this._webviewPanel = webviewPanel;
-    this._extensionUri = extensionUri;
-    this._documentUri = documentUri;
-
-    // create custom table view Uri
-    this._viewUri = documentUri.with({ scheme: 'tabular-data' });
-
-    // extract data file name from the data source document path
-    this._fileName = fileUtils.getFileName(documentUri);
-
-    // dispose table view resources when table view panel is closed by the user or via vscode apis
-    this._webviewPanel.onDidDispose(this.dispose, null, this._disposables);
-
-    // configure webview panel
-    this.configure();
-
-    // add it to the tracked table webviews
-    TableView._views.set(this._viewUri.toString(), this);
-  }
-
-  /**
-   * Reveals current table view or creates new table webview panel for table data display.
+   * Reveals current table view or creates new table webview panel for tabular data display.
    * 
    * @param extensionUri Extension directory Uri.
    * @param documentUri Data document Uri.
+   * @param webviewPanel Optional webview panel instance.
    */
   public static render(extensionUri: Uri, documentUri: Uri, webviewPanel?: WebviewPanel) {
     const viewUri: Uri = documentUri.with({ scheme: 'tabular-data' });
@@ -76,11 +49,18 @@ export class TableView {
       if (!webviewPanel) {
         // create new webview panel for the table view
         webviewPanel = TableView.createWebviewPanel(documentUri);
-
-        // set custom table view panel icon
-        webviewPanel.iconPath = Uri.file(path.join(extensionUri.fsPath, './resources/icons/tabular-data-viewer.svg'));
+      }
+      else {
+        // enable scripts for existing webview panel from table editor
+        webviewPanel.webview.options = {
+          enableScripts: true,
+          enableCommandUris: true
+        };
       }
 
+      // set custom table view panel icon
+      webviewPanel.iconPath = Uri.file(path.join(extensionUri.fsPath, './resources/icons/tabular-data-viewer.svg'));
+
       // set as current table view
       TableView.currentView = new TableView(webviewPanel, extensionUri, documentUri);
     }
@@ -101,7 +81,7 @@ export class TableView {
         viewColumn: ViewColumn.Active, // use active view column for display
         preserveFocus: true
       },
-      { // weview panel options
+      { // webview panel options
         enableScripts: true, // enable JavaScript in webview
         enableCommandUris: true,
         enableFindWidget: true,
@@ -110,6 +90,34 @@ export class TableView {
     );
   }
 
+  /**
+   * Creates new TableView instance for tabular data rendering.
+   * 
+   * @param webviewPanel Reference to the webview panel.
+   * @param extensionUri Extension directory Uri.
+   * @param documentUri Data document Uri.
+   */
+  private constructor(webviewPanel: WebviewPanel, extensionUri: Uri, documentUri: Uri) {
+    this._webviewPanel = webviewPanel;
+    this._extensionUri = extensionUri;
+    this._documentUri = documentUri;
+
+    // create custom table view Uri
+    this._viewUri = documentUri.with({ scheme: 'tabular-data' });
+
+    // extract data file name from the data source document path
+    this._fileName = fileUtils.getFileName(documentUri);
+
+    // dispose table view resources when table view panel is closed by the user or via vscode apis
+    this._webviewPanel.onDidDispose(this.dispose, null, this._disposables);
+
+    // configure webview panel
+    this.configure();
+
+    // add it to the tracked table webviews
+    TableView._views.set(this._viewUri.toString(), this);
+  }
+
   /**
    * Disposes table view resources when webview panel is closed.
    */