Merge pull request #379 from ethereum/copypastefix

support copy paste for mac in vscode

Author: bunsenstraat

packages/engine/vscode/src/lib/webview.ts

@@ -179,21 +179,39 @@ async function getWebviewContent(url: string, profile: Profile, options: Webview
       const vscode = acquireVsCodeApi();
       const pframe = document.createElement('iframe')
       // forward messages
-      window.addEventListener('message', event => {
-        if (event.origin.indexOf('vscode-webview:')>-1) {
-            // Else extension -> webview
-            pframe.contentWindow.postMessage(event.data, '${serverUri}');
-        } else {
-            // If iframe -> webview
-            if(event.data.action == 'keydown'){
-                // incoming keyboard event
-                if(navigator.platform.toLowerCase().indexOf('mac') === 0)
-                  window.dispatchEvent(new KeyboardEvent('keydown', event.data));
-            }else{
-                // forward message to vscode extension
-                vscode.postMessage(event.data)
+
+        window.addEventListener('paste', function (evt) {
+            pframe.contentWindow.postMessage({action:"paste", data:evt.clipboardData.getData('text/plain')},'${serverUri}');
+        });
+
+        window.addEventListener('copy', function (evt) {
+            pframe.contentWindow.postMessage({action:"copy"},'${serverUri}');
+        });  
+
+        window.addEventListener('message', event => {
+            if (event.origin.indexOf('vscode-webview:')>-1) {
+                // Else extension -> webview
+                pframe.contentWindow.postMessage(event.data, '${serverUri}');
+            } else {
+                // If iframe -> webview
+                if(event.data.action == 'keydown'){
+                    // incoming keyboard event
+                    if(navigator.platform.toLowerCase().indexOf('mac') === 0)
+                        window.dispatchEvent(new KeyboardEvent('keydown', event.data));
+                }else if(event.data.action == 'copy'){
+                    // put data in clipboard
+                    if(navigator.platform.toLowerCase().indexOf('mac') === 0){
+                        navigator.permissions.query({name: "clipboard-write"}).then(result => {
+                            if (result.state == "granted" || result.state == "prompt") {
+                              navigator.clipboard.writeText(event.data.data)
+                            }
+                        });
+                    }  
+                }else{
+                    // forward message to vscode extension
+                    vscode.postMessage(event.data)
+                }
             }
-        }
       });
       
       pframe.setAttribute('sandbox', 'allow-popups allow-scripts allow-same-origin allow-downloads allow-forms allow-top-navigation')

packages/plugin/webview/src/lib/connector.ts

@@ -16,7 +16,7 @@ import axios from 'axios'
 /** Transform camelCase (JS) text into kebab-case (CSS) */
 function toKebabCase(text: string) {
   return text.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
-};
+}
 
 declare global {
   function acquireTheiaApi(): any;
@@ -60,6 +60,23 @@ export class WebviewConnector implements ClientConnector {
     window.addEventListener('message', async (event: MessageEvent) => {
       if (!event.source) return
       if (!event.data) return
+      // copy paste events from vscode
+      if (event.origin.indexOf('vscode-webview:') > -1) {
+        if (event.data.action && event.data.action === 'paste') {
+            this.pasteClipBoard(event);
+            return;
+        }
+        if (event.data.action && event.data.action === 'copy') {
+            const selection = document.getSelection();
+            const event = {
+                action: 'copy',
+                data: selection.toString()
+            }
+            window.parent.postMessage(event, '*')
+            return;
+        }
+      }
+      // plugin messages
       if (!isPluginMessage(event.data)) return
       // Support for iframe
       if (!this.isVscode) {
@@ -78,6 +95,28 @@ export class WebviewConnector implements ClientConnector {
   }
 
   // vscode specific, webview iframe requires forwarding of keyboard events & links clicked 
+  pasteClipBoard(event) {
+    this.insertAtCursor(document.activeElement, event.data.data);
+  }
+
+  insertAtCursor(element:any, value:any) {
+      const lastValue:any = element.value;
+      if (element.selectionStart || element.selectionStart == '0') {
+          element.value = element.value.substring(0, element.selectionStart)
+              + value
+              + element.value.substring(element.selectionEnd, element.value.length);
+      } else {
+          element.value += value;
+      }
+      // this takes care of triggering the change on React components
+      const event:any = new Event('input', { bubbles: true });
+      event.simulated = true;
+      const tracker:any = element._valueTracker;
+      if (tracker) {
+        tracker.setValue(lastValue);
+      }
+      element.dispatchEvent(event);
+  }
   forwardEvents(){
     document.addEventListener('keydown', e => {
         const obj = {