feat: implement copy/paste buttons using nutjs clipboard API

Nakshatra Sharma · Nakshatra Sharma · commit 8863ae046758 · 2026-02-18T18:34:31.000+05:30
- Add clipboard case to InputHandler with platform-aware modifier keys - Use try/finally to prevent stuck keys on copy and paste operations - Poll clipboard for changes after copy (up to 500ms) - Validate clipboard messages and enforce 1MB text limit in websocket - Forward clipboard content from server to client via WebSocket - Add clipboardText state and sendClipboard to useRemoteConnection hook - Wire onCopy/onPaste handlers in ControlBar and trackpad page - Add type='button' to all ControlBar buttons - Read device clipboard on paste with server-cache fallback Closes #97
diff --git a/src/components/Trackpad/ControlBar.tsx b/src/components/Trackpad/ControlBar.tsx
@@ -10,6 +10,8 @@ interface ControlBarProps {
 	onRightClick: () => void;
 	onKeyboardToggle: () => void;
 	onModifierToggle: () => void;
+	onCopy: () => void;
+	onPaste: () => void | Promise<void>;
 }
 
 export const ControlBar: React.FC<ControlBarProps> = ({
@@ -21,6 +23,8 @@ export const ControlBar: React.FC<ControlBarProps> = ({
 	onRightClick,
 	onKeyboardToggle,
 	onModifierToggle,
+	onCopy,
+	onPaste,
 }) => {
 	const handleInteraction = (e: React.PointerEvent, action: () => void) => {
 		e.preventDefault();
@@ -55,42 +59,42 @@ export const ControlBar: React.FC<ControlBarProps> = ({
 	return (
 		<div className="bg-base-200 p-2 grid grid-cols-5 gap-2 shrink-0">
 			<button
+				type="button"
 				className={`btn btn-sm ${scrollMode ? "btn-primary" : "btn-outline"}`}
 				onPointerDown={(e) => handleInteraction(e, onToggleScroll)}
 			>
 				{scrollMode ? "Scroll" : "Cursor"}
 			</button>
 			<button
+				type="button"
 				className="btn btn-sm btn-outline"
+				onPointerDown={(e) => handleInteraction(e, onCopy)}
 			>
 				Copy
 			</button>
 			<button
+				type="button"
 				className="btn btn-sm btn-outline"
+				onPointerDown={(e) => handleInteraction(e, onPaste)}
 			>
 				Paste
 			</button>
-			{/* 
-			<button
-				className="btn btn-sm btn-outline"
-				onPointerDown={(e) => handleInteraction(e, onLeftClick)}
-			>
-				L-Click
-			</button>
-			*/}
 			<button
+				type="button"
 				className="btn btn-sm btn-outline"
 				onPointerDown={(e) => handleInteraction(e, onRightClick)}
 			>
 				R-Click
 			</button>
 			<button
+				type="button"
 				className={`btn btn-sm ${getModifierButtonClass()}`}
 				onPointerDown={(e) => handleInteraction(e, onModifierToggle)}
 			>
 				{getModifierLabel()}
 			</button>
 			<button
+				type="button"
 				className="btn btn-sm btn-secondary"
 				onPointerDown={(e) => handleInteraction(e, onKeyboardToggle)}
 			>
diff --git a/src/hooks/useRemoteConnection.ts b/src/hooks/useRemoteConnection.ts
@@ -3,6 +3,7 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 export const useRemoteConnection = () => {
     const wsRef = useRef<WebSocket | null>(null);
     const [status, setStatus] = useState<'connecting' | 'connected' | 'disconnected'>('disconnected');
+    const [clipboardText, setClipboardText] = useState('');
 
     useEffect(() => {
         let isMounted = true;
@@ -56,6 +57,15 @@ export const useRemoteConnection = () => {
             };
 
             wsRef.current = socket;
+
+            socket.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    if (isMounted && data.type === 'clipboard-content' && typeof data.text === 'string') {
+                        setClipboardText(data.text);
+                    }
+                } catch { /* ignore non-JSON or irrelevant messages */ }
+            };
         };
 
         // Defer to next tick so React Strict Mode's immediate unmount
@@ -71,6 +81,7 @@ export const useRemoteConnection = () => {
                 wsRef.current.onopen = null;
                 wsRef.current.onclose = null;
                 wsRef.current.onerror = null;
+                wsRef.current.onmessage = null;
                 wsRef.current.close();
                 wsRef.current = null;
             }
@@ -83,7 +94,7 @@ export const useRemoteConnection = () => {
         }
     }, []);
 
-    const sendCombo = useCallback((msg: string[]) => {
+    const sendCombo = useCallback((msg: readonly string[]) => {
         if (wsRef.current?.readyState === WebSocket.OPEN) {
             wsRef.current.send(JSON.stringify({
                 type: "combo",
@@ -92,5 +103,15 @@ export const useRemoteConnection = () => {
         }
     }, []);
 
-    return { status, send, sendCombo };
+    const sendClipboard = useCallback((action: 'copy' | 'paste', text?: string) => {
+        if (wsRef.current?.readyState === WebSocket.OPEN) {
+            wsRef.current.send(JSON.stringify({
+                type: 'clipboard',
+                action,
+                ...(text !== undefined && { text }),
+            }));
+        }
+    }, []);
+
+    return { status, send, sendCombo, clipboardText, sendClipboard };
 };
diff --git a/src/routes/trackpad.tsx b/src/routes/trackpad.tsx
@@ -19,21 +19,21 @@ function TrackpadPage() {
     const bufferText = buffer.join(" + ");
     const hiddenInputRef = useRef<HTMLInputElement>(null);
     const isComposingRef = useRef(false);
-    
+
     // Load Client Settings
     const [sensitivity] = useState(() => {
         if (typeof window === 'undefined') return 1.0;
         const s = localStorage.getItem('rein_sensitivity');
         return s ? parseFloat(s) : 1.0;
     });
-    
+
     const [invertScroll] = useState(() => {
         if (typeof window === 'undefined') return false;
         const s = localStorage.getItem('rein_invert');
         return s ? JSON.parse(s) : false;
     });
 
-    const { status, send, sendCombo } = useRemoteConnection();
+    const { status, send, sendCombo, clipboardText, sendClipboard } = useRemoteConnection();
     // Pass sensitivity and invertScroll to the gesture hook
     const { isTracking, handlers } = useTrackpadGesture(send, scrollMode, sensitivity, invertScroll);
 
@@ -49,7 +49,7 @@ function TrackpadPage() {
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         const key = e.key.toLowerCase();
-        
+
         if (modifier !== "Release") {
             if (key === 'backspace') {
                 e.preventDefault();
@@ -76,7 +76,7 @@ function TrackpadPage() {
     };
 
     const handleModifierState = () => {
-        switch(modifier){
+        switch (modifier) {
             case "Active":
                 if (buffer.length > 0) {
                     setModifier("Hold");
@@ -97,7 +97,7 @@ function TrackpadPage() {
 
     const handleModifier = (key: string) => {
         console.log(`handleModifier called with key: ${key}, current modifier: ${modifier}, buffer:`, buffer);
-        
+
         if (modifier === "Hold") {
             const comboKeys = [...buffer, key];
             console.log(`Sending combo:`, comboKeys);
@@ -139,7 +139,7 @@ function TrackpadPage() {
             // Don't send text during modifier mode
             if (modifier !== "Release") {
                 handleModifier(val);
-            }else{
+            } else {
                 sendText(val);
             }
             (e.target as HTMLInputElement).value = '';
@@ -177,6 +177,15 @@ function TrackpadPage() {
                 onRightClick={() => handleClick('right')}
                 onKeyboardToggle={focusInput}
                 onModifierToggle={handleModifierState}
+                onCopy={() => sendClipboard('copy')}
+                onPaste={async () => {
+                    let text = clipboardText;
+                    try {
+                        const deviceText = await navigator.clipboard.readText();
+                        if (deviceText) text = deviceText;
+                    } catch { /* fallback to server-origin cache */ }
+                    sendClipboard('paste', text);
+                }}
             />
 
             {/* Extra Keys */}
diff --git a/src/server/InputHandler.ts b/src/server/InputHandler.ts
@@ -1,8 +1,8 @@
-import { mouse, Point, Button, keyboard, Key } from '@nut-tree-fork/nut-js';
+import { mouse, Point, Button, keyboard, Key, clipboard } from '@nut-tree-fork/nut-js';
 import { KEY_MAP } from './KeyMap';
 
 export interface InputMessage {
-    type: 'move' | 'click' | 'scroll' | 'key' | 'text' | 'zoom' | 'combo';
+    type: 'move' | 'click' | 'scroll' | 'key' | 'text' | 'zoom' | 'combo' | 'clipboard';
     dx?: number;
     dy?: number;
     button?: 'left' | 'right' | 'middle';
@@ -11,6 +11,7 @@ export interface InputMessage {
     keys?: string[];
     text?: string;
     delta?: number;
+    action?: 'copy' | 'paste';
 }
 
 export class InputHandler {
@@ -25,7 +26,7 @@ export class InputHandler {
         mouse.config.mouseSpeed = 1000;
     }
 
-    async handleMessage(msg: InputMessage) {
+    async handleMessage(msg: InputMessage): Promise<string | void> {
         // Validation: Text length sanitation
         if (msg.text && msg.text.length > 500) {
             msg.text = msg.text.substring(0, 500);
@@ -52,8 +53,8 @@ export class InputHandler {
                             const pending = this.pendingMove;
                             this.pendingMove = null;
                             this.handleMessage(pending).catch((err) => {
-                                 console.error('Error processing pending move event:', err);
-                             });
+                                console.error('Error processing pending move event:', err);
+                            });
                         }
                     }, 8);
                 }
@@ -71,8 +72,8 @@ export class InputHandler {
                             const pending = this.pendingScroll;
                             this.pendingScroll = null;
                             this.handleMessage(pending).catch((err) => {
-                                 console.error('Error processing pending move event:', err);
-                             });
+                                console.error('Error processing pending move event:', err);
+                            });
                         }
                     }, 8);
                 }
@@ -104,8 +105,8 @@ export class InputHandler {
                         msg.button === 'left'
                             ? Button.LEFT
                             : msg.button === 'right'
-                            ? Button.RIGHT
-                            : Button.MIDDLE;
+                                ? Button.RIGHT
+                                : Button.MIDDLE;
 
                     if (msg.press) {
                         await mouse.pressButton(btn);
@@ -236,6 +237,35 @@ export class InputHandler {
                 }
                 break;
 
+            case 'clipboard': {
+                const modifier = process.platform === 'darwin' ? Key.LeftSuper : Key.LeftControl;
+                if (msg.action === 'copy') {
+                    const before = await clipboard.getContent();
+                    try {
+                        await keyboard.pressKey(modifier, Key.C);
+                    } finally {
+                        await keyboard.releaseKey(modifier, Key.C);
+                    }
+                    // poll until clipboard changes or ~500ms elapses
+                    for (let i = 0; i < 10; i++) {
+                        await new Promise(r => setTimeout(r, 50));
+                        const content = await clipboard.getContent();
+                        if (content !== before) return content;
+                    }
+                    return before;
+                } else if (msg.action === 'paste') {
+                    if (msg.text) {
+                        await clipboard.setContent(msg.text);
+                    }
+                    try {
+                        await keyboard.pressKey(modifier, Key.V);
+                    } finally {
+                        await keyboard.releaseKey(modifier, Key.V);
+                    }
+                }
+                break;
+            }
+
             case 'text':
                 if (msg.text) {
                     await keyboard.type(msg.text);
diff --git a/src/server/websocket.ts b/src/server/websocket.ts
@@ -6,6 +6,8 @@ import fs from 'fs';
 import { IncomingMessage } from 'http';
 import { Socket } from 'net';
 
+const MAX_CLIPBOARD_LENGTH = 1_000_000;
+
 function getLocalIp(): string {
     const nets = os.networkInterfaces();
     for (const name of Object.keys(nets)) {
@@ -131,7 +133,15 @@ export function createWsServer(server: any) {
                     return;
                 }
 
-                await inputHandler.handleMessage(msg as InputMessage);
+                if (msg.type === 'clipboard') {
+                    if (msg.action !== 'copy' && msg.action !== 'paste') return;
+                    if (msg.action === 'paste' && typeof msg.text === 'string' && msg.text.length > MAX_CLIPBOARD_LENGTH) return;
+                }
+
+                const result = await inputHandler.handleMessage(msg as InputMessage);
+                if (typeof result === 'string') {
+                    ws.send(JSON.stringify({ type: 'clipboard-content', text: result }));
+                }
             } catch (err) {
                 console.error('Error processing message:', err);
             }
