feat: cancel paste mode

jsonrpc.go

@@ -1062,21 +1062,26 @@ func cancelKeyboardReportMulti() {
 	}
 }
 
-func rpcKeyboardReportMultiWrapper(macro []map[string]any) (usbgadget.KeysDownState, error) {
+func setKeyboardReportMultiCancel(cancel context.CancelFunc) {
 	keyboardReportMultiLock.Lock()
 	defer keyboardReportMultiLock.Unlock()
 
-	if keyboardReportMultiCancel != nil {
+	keyboardReportMultiCancel = cancel
-		keyboardReportMultiCancel()
+}
-		logger.Info().Msg("canceled previous keyboard report multi")
+
-	}
+func rpcKeyboardReportMultiWrapper(macro []map[string]any) (usbgadget.KeysDownState, error) {
+	cancelKeyboardReportMulti()
 
 	ctx, cancel := context.WithCancel(context.Background())
-	keyboardReportMultiCancel = cancel
+	setKeyboardReportMultiCancel(cancel)
+
+	writeJSONRPCEvent("keyboardReportMultiState", true, currentSession)
 
 	result, err := rpcKeyboardReportMulti(ctx, macro)
 
-	keyboardReportMultiCancel = nil
+	setKeyboardReportMultiCancel(nil)
+
+	writeJSONRPCEvent("keyboardReportMultiState", false, currentSession)
 
 	return result, err
 }
@@ -1086,6 +1091,10 @@ var (
 	keyboardReportMultiLock   sync.Mutex
 )
 
+func rpcCancelKeyboardReportMulti() {
+	cancelKeyboardReportMulti()
+}
+
 func rpcKeyboardReportMulti(ctx context.Context, macro []map[string]any) (usbgadget.KeysDownState, error) {
 	var last usbgadget.KeysDownState
 	var err error
@@ -1157,6 +1166,7 @@ var rpcHandlers = map[string]RPCHandler{
 	"renewDHCPLease":            {Func: rpcRenewDHCPLease},
 	"keyboardReport":            {Func: rpcKeyboardReport, Params: []string{"modifier", "keys"}},
 	"keyboardReportMulti":       {Func: rpcKeyboardReportMultiWrapper, Params: []string{"macro"}},
+	"cancelKeyboardReportMulti": {Func: rpcCancelKeyboardReportMulti},
 	"getKeyboardLedState":       {Func: rpcGetKeyboardLedState},
 	"keypressReport":            {Func: rpcKeypressReport, Params: []string{"key", "press"}},
 	"getKeyDownState":           {Func: rpcGetKeysDownState},

ui/src/components/InfoBar.tsx

@@ -27,6 +27,7 @@ export default function InfoBar() {
 
   const { rpcDataChannel } = useRTCStore();
   const { debugMode, mouseMode, showPressedKeys } = useSettingsStore();
+  const { isPasteModeEnabled } = useHidStore();
 
   useEffect(() => {
     if (!rpcDataChannel) return;
@@ -108,7 +109,12 @@ export default function InfoBar() {
                 <span className="text-xs">{rpcHidStatus}</span>
               </div>
             )}
-
+            {isPasteModeEnabled && (
+              <div className="flex w-[156px] items-center gap-x-1">
+                <span className="text-xs font-semibold">Paste Mode:</span>
+                <span className="text-xs">Enabled</span>
+              </div>
+            )}
             {showPressedKeys && (
               <div className="flex items-center gap-x-1">
                 <span className="text-xs font-semibold">Keys:</span>

ui/src/components/popovers/PasteModal.tsx

@@ -15,11 +15,11 @@ import notifications from "@/notifications";
 
 export default function PasteModal() {
   const TextAreaRef = useRef<HTMLTextAreaElement>(null);
-  const { setPasteModeEnabled } = useHidStore();
+  const { isPasteModeEnabled } = useHidStore();
   const { setDisableVideoFocusTrap } = useUiStore();
 
   const { send } = useJsonRpc();
-  const { executeMacro } = useKeyboard();
+  const { executeMacro, cancelExecuteMacro } = useKeyboard();
 
   const [invalidChars, setInvalidChars] = useState<string[]>([]);
   const close = useClose();
@@ -35,10 +35,10 @@ export default function PasteModal() {
   }, [send, setKeyboardLayout]);
 
   const onCancelPasteMode = useCallback(() => {
-    setPasteModeEnabled(false);
+    cancelExecuteMacro();
     setDisableVideoFocusTrap(false);
     setInvalidChars([]);
-  }, [setDisableVideoFocusTrap, setPasteModeEnabled]);
+  }, [setDisableVideoFocusTrap, cancelExecuteMacro]);
 
   const onConfirmPaste = useCallback(async () => {
     // setPasteModeEnabled(false);
@@ -201,6 +201,7 @@ export default function PasteModal() {
             size="SM"
             theme="primary"
             text="Confirm Paste"
+            disabled={isPasteModeEnabled}
             onClick={onConfirmPaste}
             LeadingIcon={LuCornerDownLeft}
           />

ui/src/hooks/useKeyboard.ts

@@ -122,6 +122,14 @@ export default function useKeyboard() {
     });
   };
 
+  const cancelExecuteMacro = useCallback(async () => {
+    send("cancelKeyboardReportMulti", {}, (resp: JsonRpcResponse) => {
+      if ("error" in resp) {
+        console.error(`Failed to cancel keyboard report multi`, resp.error);
+      }
+    });
+  }, [send]);
+
   // handleKeyPress is used to handle a key press or release event.
   // This function handle both key press and key release events.
   // It checks if the keyPressReport API is available and sends the key press event.
@@ -231,5 +239,5 @@ export default function useKeyboard() {
     return { modifier: modifiers, keys };
   }
 
-  return { handleKeyPress, resetKeyboardState, executeMacro };
+  return { handleKeyPress, resetKeyboardState, executeMacro, cancelExecuteMacro };
 }

ui/src/routes/devices.$id.tsx

@@ -580,7 +580,7 @@ export default function KvmIdRoute() {
   const { setNetworkState} = useNetworkStateStore();
   const { setHdmiState } = useVideoStore();
   const { 
-    keyboardLedState,  setKeyboardLedState,
+    keyboardLedState,  setKeyboardLedState, setPasteModeEnabled,
     keysDownState, setKeysDownState, setUsbState,
   } = useHidStore();
 
@@ -598,6 +598,12 @@ export default function KvmIdRoute() {
       setUsbState(usbState);
     }
 
+    if (resp.method === "keyboardReportMultiState") {
+      const reportMultiState = resp.params as unknown as boolean;
+      console.debug("Setting keyboard report multi state", reportMultiState);
+      setPasteModeEnabled(reportMultiState);
+    }
+
     if (resp.method === "videoInputState") {
       const hdmiState = resp.params as Parameters<VideoState["setHdmiState"]>[0];
       console.debug("Setting HDMI state", hdmiState);