Add copy and paste shortcuts to trackpad toolbar

Author: Nakshatra Sharma

src/components/Trackpad/ControlBar.tsx

@@ -10,6 +10,8 @@ interface ControlBarProps {
 	onRightClick: () => void;
 	onKeyboardToggle: () => void;
 	onModifierToggle: () => void;
+	onCopy: () => void;
+	onPaste: () => 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();
@@ -62,11 +66,13 @@ export const ControlBar: React.FC<ControlBarProps> = ({
 			</button>
 			<button
 				className="btn btn-sm btn-outline"
+				onPointerDown={(e) => handleInteraction(e, onCopy)}
 			>
 				Copy
 			</button>
 			<button
 				className="btn btn-sm btn-outline"
+				onPointerDown={(e) => handleInteraction(e, onPaste)}
 			>
 				Paste
 			</button>
@@ -98,4 +104,4 @@ export const ControlBar: React.FC<ControlBarProps> = ({
 			</button>
 		</div>
 	);
-};
+};

src/routes/trackpad.tsx

@@ -19,14 +19,14 @@ 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');
@@ -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 = '';
@@ -153,6 +153,9 @@ function TrackpadPage() {
         }
     };
 
+    const COPY_COMBO = ["control", "c"] as const;
+    const PASTE_COMBO = ["control", "v"] as const;
+
     return (
         <div
             className="flex flex-col h-full overflow-hidden"
@@ -177,6 +180,8 @@ function TrackpadPage() {
                 onRightClick={() => handleClick('right')}
                 onKeyboardToggle={focusInput}
                 onModifierToggle={handleModifierState}
+                onCopy={() => sendCombo([...COPY_COMBO])}
+                onPaste={() => sendCombo([...PASTE_COMBO])}
             />
 
             {/* Extra Keys */}