chore: web 项目修改

Author: brandonxiang

packages/vscode/package.json

@@ -2,7 +2,7 @@
 	"name": "vscode-protobuf-to-typescript",
 	"displayName": "Protobuf To Typescript",
 	"description": "Convert protobuf struct to typescript type",
-	"version": "0.0.8",
+	"version": "0.0.10",
 	"private": true,
 	"icon": "icon.png",
 	"publisher": "yishi",

packages/vscode/src/extension.ts

@@ -63,12 +63,27 @@ function transformFromClipboard() {
 		});
 }
 
-function transformOnPanel (ctx: ExtensionContext) {
+function transformOnPanel(ctx: ExtensionContext) {
   const panel = window.createWebviewPanel(
-    'protobuf to typescript', // Identifies the type of the webview. Used internally
-    'protobuf to typescript', // Title of the panel displayed to the user
-    ViewColumn.One, // Editor column to show the new webview panel in.
-    { enableScripts: true} // Webview options. More on these later.
+    'protobuf to typescript',
+    'protobuf to typescript',
+    ViewColumn.One,
+    { 
+      enableScripts: true,
+      retainContextWhenHidden: true
+    }
+  );
+
+  // Add message handler for paste events
+  panel.webview.onDidReceiveMessage(
+    async message => {
+      if (message.command === 'requestPaste') {
+        const text = await getClipboardText();
+        panel.webview.postMessage({ command: 'paste', text });
+      }
+    },
+    undefined,
+    ctx.subscriptions
   );
 
   panel.webview.html = getWebviewContent(ctx);

packages/vscode/webview/index.html

@@ -40,6 +40,13 @@ message MyResponse {
     };
     onProtobuf();
   });
+
+  window.addEventListener('message', event => {
+    const message = event.data;
+    if (message.command === 'paste') {
+      src += message.text;
+    }
+  });
 </script>
 
 <div id="container">

packages/web/app/pages/ast.svelte

@@ -47,6 +47,14 @@ message MyResponse {
     onProtobuf();
     new ClipboardJS('.button');
   });
+
+
+  window.addEventListener('message', event => {
+    const message = event.data;
+    if (message.command === 'paste') {
+      src += message.text;
+    }
+  });
 </script>
 
 <div id="container">

packages/web/app/pages/index.svelte

@@ -69,6 +69,13 @@ message HelloReply {
     onProtobuf();
     new ClipboardJS('.button');
   });
+
+  window.addEventListener('message', event => {
+    const message = event.data;
+    if (message.command === 'paste') {
+      src += message.text;
+    }
+  });
 </script>
 
 <div id="container">

packages/web/app/pages/mock.svelte

@@ -15,7 +15,19 @@ export default defineConfig({
       inject: {
         data: {
           injectHead:
-            "<script>document.documentElement.classList.add('dark');</script>",
+            `
+            <script>
+             document.documentElement.classList.add('dark'); 
+
+             const vscode = acquireVsCodeApi();
+
+              document.addEventListener('keydown', event => {
+                if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
+                  vscode.postMessage({ command: 'requestPaste' });
+                }
+              });
+            </script>
+            `,
         },
       },
     }),