Improvements for #5 and some logging

Author: timheuer

package.json

@@ -56,8 +56,13 @@
       "properties": {
         "resx-editor.experimentalDelete": {
           "type": "boolean",
-          "default": false,
+          "default": true,
           "description": "Enable experimental delete functionality"
+        },
+        "resx-editor.verboseLogging": {
+          "type": "boolean",
+          "default": false,
+          "description": "Enable verbose logging"
         }
       }
     },
@@ -67,6 +72,12 @@
           "command": "resx-editor.deleteResource",
           "when": "config.resx-editor.experimentalDelete == true && webviewId == 'resx-editor.editor'"
         }
+      ],
+      "commandPalette": [
+        {
+          "command": "resx-editor.deleteResource",
+          "when": "false"
+        }
       ]
     },
     "commands": [

src/extension.ts

@@ -1,11 +1,49 @@
 import * as vscode from 'vscode';
 import { ResxProvider } from './resxProvider';
 
+let outputChannel: vscode.OutputChannel;
 
 export function activate(context: vscode.ExtensionContext) {
 
+	outputChannel = vscode.window.createOutputChannel("ResX Editor");
+
+	printChannelOutput("ResX Editor extension activated.", true);
+
 	context.subscriptions.push(ResxProvider.register(context));
 
 }
 
+/**
+ * Prints the given content on the output channel.
+ *
+ * @param content The content to be printed.
+ * @param reveal Whether the output channel should be revealed.
+ */
+export const printChannelOutput = (content: string, verbose: boolean, reveal = false): void => {
+    
+	// do not throw on logging, just log to console in the event of an error
+	try {
+		if (!outputChannel) {
+			return;
+		}
+		// if it is verbose logging and verbose is not enabled, return
+		if (verbose && !vscode.workspace.getConfiguration("resx-editor").get("verboseLogging")) {
+			return;
+		}
+	
+		const timestamp = new Date().toISOString();
+		const fileName = vscode.window.activeTextEditor?.document.fileName;
+
+		outputChannel.appendLine(`[${timestamp}] [${fileName}] ${content}`);
+	
+		if (reveal) {
+			outputChannel.show(true);
+		}
+	}
+	catch (e)
+	{
+		console.log(e);
+	}
+};
+
 export function deactivate() {}

src/resxProvider.ts

@@ -2,18 +2,21 @@ import * as path from 'path';
 import * as vscode from 'vscode';
 import resx from 'resx';
 import { getNonce } from './utilities/getNonce';
+import { printChannelOutput } from './extension';
 
 export class ResxProvider implements vscode.CustomTextEditorProvider {
 
   public static register(context: vscode.ExtensionContext): vscode.Disposable {
     const provider = new ResxProvider(context);
     const providerRegistration = vscode.window.registerCustomEditorProvider(ResxProvider.viewType, provider);
+    printChannelOutput("ResX Editor custom editor provider registered.", true);    
     return providerRegistration;
   }
 
   private static readonly viewType = 'resx-editor.editor';
   private registered = false;
-
+  private currentPanel: vscode.WebviewPanel | undefined = undefined;
+  
   constructor(
     private readonly context: vscode.ExtensionContext
   ) { }
@@ -23,20 +26,32 @@ export class ResxProvider implements vscode.CustomTextEditorProvider {
     webviewPanel: vscode.WebviewPanel,
     _token: vscode.CancellationToken
   ): Promise<void> {
+    this.currentPanel = webviewPanel;
     webviewPanel.webview.options = {
       enableScripts: true,
       localResourceRoots: [vscode.Uri.joinPath(this.context.extensionUri, 'out')]
     };
     webviewPanel.webview.html = this._getWebviewContent(webviewPanel.webview);
 
-    let disposable = vscode.commands.registerCommand('resx-editor.deleteResource', () => {
+    try
+    {
+    if (!this.registered) {
+      printChannelOutput("deleteResource command registered", true);
+      this.registered = true;
+      let disposable = vscode.commands.registerCommand('resx-editor.deleteResource', () => {
 
-      webviewPanel.webview.postMessage({
-        type: 'delete'
+        this.currentPanel?.webview.postMessage({
+          type: 'delete'
+        });
       });
-    });
 
-    this.context.subscriptions.push(disposable);
+      this.context.subscriptions.push(disposable);
+    }
+  }
+  catch (e)
+  {
+    console.log(e);
+  }
 
     async function updateWebview() {
       webviewPanel.webview.postMessage({
@@ -60,6 +75,9 @@ export class ResxProvider implements vscode.CustomTextEditorProvider {
         case 'update':
           this.updateTextDocument(document, e.json);
           return;
+        case 'log':
+          printChannelOutput(e.message, true);
+          return;
       }
     });
 
@@ -87,6 +105,10 @@ export class ResxProvider implements vscode.CustomTextEditorProvider {
                 <head>
                   <meta charset="UTF-8">
                   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                  <meta
+                    http-equiv="Content-Security-Policy"
+                    content="default-src 'none'; img-src ${webview.cspSource} https:; script-src ${webview.cspSource}; style-src ${webview.cspSource};script-src 'nonce-${nonce}';"
+                  />
                 </head>
                 <body>
                   <vscode-data-grid id="resource-table" aria-label="Basic" generate-header="sticky" aria-label="Sticky Header"></vscode-data-grid>

src/webview/webview.js

@@ -21,13 +21,16 @@ let currentRowData = null;
         currentRowData = sourceElement._rowData;
 
         if (sourceElement && sourceElement.className !== "column-header") {
+            
             const handleChange = (target) => {
                 const column = target._columnDefinition;
                 const originalRow = target._rowData;
                 const originalValue = originalRow[column.columnDataKey];
                 const newValue = target.innerText;
+                
 
                 if (originalValue !== newValue) {
+                    sendLog("Value changed...Original value: " + originalValue + "; " + "New value: " + newValue);
                     target._rowData[column.columnDataKey] = newValue;
                     refreshResxData();
                 }
@@ -69,8 +72,7 @@ let currentRowData = null;
 
                 return;
             case 'delete':
-                console.log("delete");
-                console.log(currentRowData);
+                sendLog("Deleting row: " + JSON.stringify(currentRowData));
                 if (currentRowData) {
                     const index = table.rowsData.indexOf(currentRowData);
                     if (index > -1) {
@@ -98,6 +100,13 @@ let currentRowData = null;
         });
     }
 
+    function sendLog(message) {
+        vscode.postMessage({
+            type: 'log',
+            message: message
+        });
+    }
+
     function updateContent(/** @type {string} **/ text) {
         if (text) {