UI: Enable right click to paste in terminal (#34)

frontend/src/hooks/useTerminal.ts

@@ -28,6 +28,14 @@ export const useTerminal = (commands: Command[] = []) => {
 
     let resizeObserver: ResizeObserver;
     let commandBuffer = "";
+    const terminalElement = terminal.current?.element;
+    const handleContextMenu = (e: MouseEvent) => {
+      e.preventDefault();
+      navigator.clipboard.readText().then((text) => {
+        terminal.current?.write(text);
+        commandBuffer += text;
+      });
+    };
 
     if (ref.current) {
       /* Initialize the terminal in the DOM */
@@ -74,6 +82,11 @@ export const useTerminal = (commands: Command[] = []) => {
         return true;
       });
 
+      if (terminalElement) {
+        // right click to paste
+        terminalElement.addEventListener("contextmenu", handleContextMenu);
+      }
+
       /* Listen for resize events */
       resizeObserver = new ResizeObserver(() => {
         fitAddon.current?.fit();
@@ -82,6 +95,9 @@ export const useTerminal = (commands: Command[] = []) => {
     }
 
     return () => {
+      if (terminalElement) {
+        terminalElement.removeEventListener("contextmenu", handleContextMenu);
+      }
       terminal.current?.dispose();
       resizeObserver.disconnect();
     };

frontend/src/services/terminalService.ts

@@ -2,7 +2,11 @@ import ActionType from "#/types/ActionType";
 import Session from "./session";
 
 export function sendTerminalCommand(command: string): void {
-  const event = { action: ActionType.RUN, args: { command } };
+  // replace END OF TEXT character copied from terminal
+  // eslint-disable-next-line no-control-regex
+  const cleanedCommand = command.replace(/\u0003+/, "");
+  if (!cleanedCommand) return;
+  const event = { action: ActionType.RUN, args: { command: cleanedCommand } };
   const eventString = JSON.stringify(event);
   Session.send(eventString);
 }