Added novnc clipboard support (#641)

- Works with Proxmox 8.1
  - Requires vm to have SPICE guest tools enabled
  - Must be manually enabled via API or CLI for each vm (qm set <id> -vga clipboard=vnc)

src/app/components/novnc/novnc.component.ts

@@ -75,6 +75,7 @@ export class NovncComponent implements OnChanges, AfterViewInit {
     this.novncService.setSecurityFailureListener(
       this.securityFailure.bind(this),
     );
+    this.novncService.setClipboardListener(this.clipboardEvent.bind(this));
   }
 
   connected(e) {
@@ -99,4 +100,9 @@ export class NovncComponent implements OnChanges, AfterViewInit {
   securityFailure(e) {
     console.log(e);
   }
+
+  async clipboardEvent(e) {
+    console.log(e);
+    await navigator.clipboard.writeText(e.detail.text);
+  }
 }

src/app/components/options-bar2/options-bar2.component.html

@@ -18,6 +18,9 @@
           <button mat-menu-item (click)="ctrlAltDel()">
             Send Ctrl-Alt-Del
           </button>
+          <button mat-menu-item (click)="sendClipboardText()">
+            Paste to Clipboard
+          </button>
         </mat-menu>
       </mat-menu>
     </div>

src/app/components/options-bar2/options-bar2.component.ts

@@ -44,4 +44,8 @@ export class OptionsBar2Component implements OnInit {
   public ctrlAltDel() {
     this.vmService.sendCtrlAltDel(this.vm.id);
   }
+
+  public sendClipboardText() {
+    this.vmService.sendClipboardText(this.vm.id);
+  }
 }

src/app/services/novnc/novnc.service.ts

@@ -51,7 +51,15 @@ export class NoVNCService {
     this.rfb.addEventListener('securityfailure', func);
   }
 
+  public setClipboardListener(func: Function) {
+    this.rfb.addEventListener('clipboard', func);
+  }
+
   public sendCtrlAltDel() {
     this.rfb.sendCtrlAltDel();
   }
+
+  public sendClipboardText(text: string) {
+    this.rfb.clipboardPasteFrom(text);
+  }
 }

src/app/services/proxmox/proxmox.service.ts

@@ -15,4 +15,8 @@ export class ProxmoxService {
   public sendCtrlAltDel() {
     this.novncService.sendCtrlAltDel();
   }
+
+  public sendClipboardText(text: string) {
+    this.novncService.sendClipboardText(text);
+  }
 }

src/app/state/vm/vm.service.ts

@@ -53,4 +53,16 @@ export class VmService {
         break;
     }
   }
+
+  async sendClipboardText(id: string) {
+    const vm = this.vmQuery.getEntity(id);
+
+    const text = await navigator.clipboard.readText();
+
+    switch (vm.type) {
+      case 'Proxmox':
+        this.proxmoxService.sendClipboardText(text);
+        break;
+    }
+  }
 }