refactor(ui): Refactor the keyboardLayouts (#497)

Add missing keyboard mappings for most layouts
Change  pasteModel.tsx to use the new structure and vastly clarified the way that keys are emitted.
Make each layout export just the KeyboardLayout object (which is a package of isoCode, name, and chars)
Made keyboardLayouts.ts export a function to select keyboard by `isoCode`, export the keyboards as label . value pairs (for a select list) and the list of keyboards.
Changed devices.$id.settings.keyboard.tsx use the exported keyboard option list.

Author: IDisposable

ui/src/components/Terminal.tsx

@@ -67,19 +67,19 @@ function Terminal({
 }) {
   const enableTerminal = useUiStore(state => state.terminalType == type);
   const setTerminalType = useUiStore(state => state.setTerminalType);
-  const setDisableKeyboardFocusTrap = useUiStore(state => state.setDisableVideoFocusTrap);
+  const setDisableVideoFocusTrap = useUiStore(state => state.setDisableVideoFocusTrap);
 
   const { instance, ref } = useXTerm({ options: TERMINAL_CONFIG });
 
   useEffect(() => {
     setTimeout(() => {
-      setDisableKeyboardFocusTrap(enableTerminal);
+      setDisableVideoFocusTrap(enableTerminal);
     }, 500);
 
     return () => {
-      setDisableKeyboardFocusTrap(false);
+      setDisableVideoFocusTrap(false);
     };
-  }, [ref, instance, enableTerminal, setDisableKeyboardFocusTrap, type]);
+  }, [enableTerminal, setDisableVideoFocusTrap]);
 
   const readyState = dataChannel.readyState;
   useEffect(() => {
@@ -116,7 +116,7 @@ function Terminal({
       const { domEvent } = e;
       if (domEvent.key === "Escape") {
         setTerminalType("none");
-        setDisableKeyboardFocusTrap(false);
+        setDisableVideoFocusTrap(false);
         domEvent.preventDefault();
       }
     });
@@ -131,7 +131,7 @@ function Terminal({
       onDataHandler.dispose();
       onKeyHandler.dispose();
     };
-  }, [instance, dataChannel, readyState, setDisableKeyboardFocusTrap, setTerminalType]);
+  }, [dataChannel, instance, readyState, setDisableVideoFocusTrap, setTerminalType]);
 
   useEffect(() => {
     if (!instance) return;
@@ -158,7 +158,7 @@ function Terminal({
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [ref, instance]);
+  }, [instance]);
 
   return (
     <div

ui/src/components/popovers/PasteModal.tsx

@@ -10,11 +10,11 @@ import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { useHidStore, useRTCStore, useUiStore, useSettingsStore } from "@/hooks/stores";
 import { keys, modifiers } from "@/keyboardMappings";
-import { layouts, chars } from "@/keyboardLayouts";
+import { KeyStroke, KeyboardLayout, selectedKeyboard } from "@/keyboardLayouts";
 import notifications from "@/notifications";
 
-const hidKeyboardPayload = (keys: number[], modifier: number) => {
-  return { keys, modifier };
+const hidKeyboardPayload = (modifier: number, keys: number[]) => {
+  return { modifier, keys };
 };
 
 const modifierCode = (shift?: boolean, altRight?: boolean) => {
@@ -62,49 +62,56 @@ export default function PasteModal() {
   const onConfirmPaste = useCallback(async () => {
     setPasteMode(false);
     setDisableVideoFocusTrap(false);
+
     if (rpcDataChannel?.readyState !== "open" || !TextAreaRef.current) return;
-    if (!safeKeyboardLayout) return;
-    if (!chars[safeKeyboardLayout]) return;
+    const keyboard: KeyboardLayout = selectedKeyboard(safeKeyboardLayout);
+    if (!keyboard) return;
+
     const text = TextAreaRef.current.value;
 
     try {
       for (const char of text) {
-        const { key, shift, altRight, deadKey, accentKey } = chars[safeKeyboardLayout][char]
-        if (!key) continue;
+        const keyprops = keyboard.chars[char];
+        if (!keyprops) continue;
 
-        const keyz = [ keys[key] ];
-        const modz = [ modifierCode(shift, altRight) ];
+        const { key, shift, altRight, deadKey, accentKey } = keyprops;
+        if (!key) continue;
 
-        if (deadKey) {
-            keyz.push(keys["Space"]);
-            modz.push(noModifier);
-        }
+        // if this is an accented character, we need to send that accent FIRST
         if (accentKey) {
-            keyz.unshift(keys[accentKey.key])
-            modz.unshift(modifierCode(accentKey.shift, accentKey.altRight))
+          await sendKeystroke({modifier: modifierCode(accentKey.shift, accentKey.altRight), keys: [ keys[accentKey.key] ] })
         }
 
-        for (const [index, kei] of keyz.entries()) {
-          await new Promise<void>((resolve, reject) => {
-            send(
-              "keyboardReport",
-              hidKeyboardPayload([kei], modz[index]),
-              params => {
-                if ("error" in params) return reject(params.error);
-                send("keyboardReport", hidKeyboardPayload([], 0), params => {
-                  if ("error" in params) return reject(params.error);
-                  resolve();
-                });
-              },
-            );
-          });
+        // now send the actual key
+        await sendKeystroke({ modifier: modifierCode(shift, altRight), keys: [ keys[key] ]});
+
+        // if what was requested was a dead key, we need to send an unmodified space to emit
+        // just the accent character
+        if (deadKey) {
+           await sendKeystroke({ modifier: noModifier, keys: [ keys["Space"] ] });
         }
+
+        // now send a message with no keys down to "release" the keys
+        await sendKeystroke({ modifier: 0, keys: [] });
       }
     } catch (error) {
-      console.error(error);
+      console.error("Failed to paste text:", error);
       notifications.error("Failed to paste text");
     }
-  }, [rpcDataChannel?.readyState, send, setDisableVideoFocusTrap, setPasteMode, safeKeyboardLayout]);
+
+    async function sendKeystroke(stroke: KeyStroke) {
+      await new Promise<void>((resolve, reject) => {
+        send(
+          "keyboardReport",
+          hidKeyboardPayload(stroke.modifier, stroke.keys),
+          params => {
+            if ("error" in params) return reject(params.error);
+            resolve();
+          }
+        );
+      });
+    }
+  }, [rpcDataChannel?.readyState, safeKeyboardLayout, send, setDisableVideoFocusTrap, setPasteMode]);
 
   useEffect(() => {
     if (TextAreaRef.current) {
@@ -154,7 +161,7 @@ export default function PasteModal() {
                             // @ts-expect-error TS doesn't recognize Intl.Segmenter in some environments
                             [...new Intl.Segmenter().segment(value)]
                               .map(x => x.segment)
-                              .filter(char => !chars[safeKeyboardLayout][char]),
+                              .filter(char => !selectedKeyboard(safeKeyboardLayout).chars[char]),
                           ),
                         ];
 
@@ -175,7 +182,7 @@ export default function PasteModal() {
                 </div>
                 <div className="space-y-4">
                   <p className="text-xs text-slate-600 dark:text-slate-400">
-                    Sending text using keyboard layout: {layouts[safeKeyboardLayout]}
+                    Sending text using keyboard layout: {selectedKeyboard(safeKeyboardLayout).name}
                   </p>
                 </div>
               </div>

ui/src/components/popovers/WakeOnLan/Index.tsx

@@ -14,7 +14,7 @@ import AddDeviceForm from "./AddDeviceForm";
 export default function WakeOnLanModal() {
   const [storedDevices, setStoredDevices] = useState<StoredDevice[]>([]);
   const [showAddForm, setShowAddForm] = useState(false);
-  const setDisableFocusTrap = useUiStore(state => state.setDisableVideoFocusTrap);
+  const setDisableVideoFocusTrap = useUiStore(state => state.setDisableVideoFocusTrap);
 
   const rpcDataChannel = useRTCStore(state => state.rpcDataChannel);
 
@@ -24,9 +24,9 @@ export default function WakeOnLanModal() {
   const [addDeviceErrorMessage, setAddDeviceErrorMessage] = useState<string | null>(null);
 
   const onCancelWakeOnLanModal = useCallback(() => {
+    setDisableVideoFocusTrap(false);
     close();
-    setDisableFocusTrap(false);
-  }, [close, setDisableFocusTrap]);
+  }, [close, setDisableVideoFocusTrap]);
 
   const onSendMagicPacket = useCallback(
     (macAddress: string) => {
@@ -43,12 +43,12 @@ export default function WakeOnLanModal() {
           }
         } else {
           notifications.success("Magic Packet sent successfully");
-          setDisableFocusTrap(false);
+          setDisableVideoFocusTrap(false);
           close();
         }
       });
     },
-    [close, rpcDataChannel?.readyState, send, setDisableFocusTrap],
+    [close, rpcDataChannel?.readyState, send, setDisableVideoFocusTrap],
   );
 
   const syncStoredDevices = useCallback(() => {
@@ -78,7 +78,7 @@ export default function WakeOnLanModal() {
         }
       });
     },
-    [storedDevices, send, syncStoredDevices],
+    [send, storedDevices, syncStoredDevices],
   );
 
   const onAddDevice = useCallback(

ui/src/hooks/stores.ts

@@ -936,5 +936,5 @@ export const useMacrosStore = create<MacrosState>((set, get) => ({
     } finally {
       set({ loading: false });
     }
-  },
+  }
 }));

ui/src/keyboardLayouts.ts

@@ -1,45 +1,32 @@
-import { chars as chars_fr_BE, name as name_fr_BE } from "@/keyboardLayouts/fr_BE"
-import { chars as chars_cs_CZ, name as name_cs_CZ } from "@/keyboardLayouts/cs_CZ"
-import { chars as chars_en_UK, name as name_en_UK } from "@/keyboardLayouts/en_UK"
-import { chars as chars_en_US, name as name_en_US } from "@/keyboardLayouts/en_US"
-import { chars as chars_fr_FR, name as name_fr_FR } from "@/keyboardLayouts/fr_FR"
-import { chars as chars_de_DE, name as name_de_DE } from "@/keyboardLayouts/de_DE"
-import { chars as chars_it_IT, name as name_it_IT } from "@/keyboardLayouts/it_IT"
-import { chars as chars_nb_NO, name as name_nb_NO } from "@/keyboardLayouts/nb_NO"
-import { chars as chars_es_ES, name as name_es_ES } from "@/keyboardLayouts/es_ES"
-import { chars as chars_sv_SE, name as name_sv_SE } from "@/keyboardLayouts/sv_SE"
-import { chars as chars_fr_CH, name as name_fr_CH } from "@/keyboardLayouts/fr_CH"
-import { chars as chars_de_CH, name as name_de_CH } from "@/keyboardLayouts/de_CH"
+export interface KeyStroke { modifier: number; keys: number[]; }
+export interface KeyInfo { key: string | number; shift?: boolean, altRight?: boolean }
+export interface KeyCombo extends KeyInfo { deadKey?: boolean, accentKey?: KeyInfo }
+export interface KeyboardLayout { isoCode: string, name: string, chars: Record<string, KeyCombo> }
 
-interface KeyInfo { key: string | number; shift?: boolean, altRight?: boolean }
-export type KeyCombo = KeyInfo & { deadKey?: boolean, accentKey?: KeyInfo }
+// to add a new layout, create a file like the above and add it to the list
+import { cs_CZ } from "@/keyboardLayouts/cs_CZ"
+import { de_CH } from "@/keyboardLayouts/de_CH"
+import { de_DE } from "@/keyboardLayouts/de_DE"
+import { en_US } from "@/keyboardLayouts/en_US"
+import { en_UK } from "@/keyboardLayouts/en_UK"
+import { es_ES } from "@/keyboardLayouts/es_ES"
+import { fr_BE } from "@/keyboardLayouts/fr_BE"
+import { fr_CH } from "@/keyboardLayouts/fr_CH"
+import { fr_FR } from "@/keyboardLayouts/fr_FR"
+import { it_IT } from "@/keyboardLayouts/it_IT"
+import { nb_NO } from "@/keyboardLayouts/nb_NO"
+import { sv_SE } from "@/keyboardLayouts/sv_SE"
 
-export const layouts: Record<string, string> = {
-  be_FR: name_fr_BE,
-  cs_CZ: name_cs_CZ,
-  en_UK: name_en_UK,
-  en_US: name_en_US,
-  fr_FR: name_fr_FR,
-  de_DE: name_de_DE,
-  it_IT: name_it_IT,
-  nb_NO: name_nb_NO,
-  es_ES: name_es_ES,
-  sv_SE: name_sv_SE,
-  fr_CH: name_fr_CH,
-  de_CH: name_de_CH,
-}
+export const keyboards: KeyboardLayout[] = [ cs_CZ, de_CH, de_DE, en_UK, en_US, es_ES, fr_BE, fr_CH, fr_FR, it_IT, nb_NO, sv_SE ];
 
-export const chars: Record<string, Record<string, KeyCombo>> = {
-  be_FR: chars_fr_BE,
-  cs_CZ: chars_cs_CZ,
-  en_UK: chars_en_UK,
-  en_US: chars_en_US,
-  fr_FR: chars_fr_FR,
-  de_DE: chars_de_DE,
-  it_IT: chars_it_IT,
-  nb_NO: chars_nb_NO,
-  es_ES: chars_es_ES,
-  sv_SE: chars_sv_SE,
-  fr_CH: chars_fr_CH,
-  de_CH: chars_de_CH,
+export const selectedKeyboard = (isoCode: string): KeyboardLayout => {
+  // fallback to original behaviour of en-US if no isoCode given
+  return keyboards.find(keyboard => keyboard.isoCode == isoCode) 
+        ?? keyboards.find(keyboard => keyboard.isoCode == "en-US")!;
 };
+
+export const keyboardOptions = () => {
+  return keyboards.map((keyboard) => {
+    return { label: keyboard.name, value: keyboard.isoCode }
+  });
+}

ui/src/keyboardLayouts/cs_CZ.ts

@@ -1,6 +1,6 @@
-import { KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
 
-export const name = "Čeština";
+const name = "Čeština";
 
 const keyTrema = { key: "Backslash" } // tréma (umlaut), two dots placed above a vowel
 const keyAcute = { key: "Equal" } // accent aigu (acute accent), mark ´ placed above the letter
@@ -13,7 +13,7 @@ const keyOverdot = { key: "Digit8", shift: true, altRight: true } // overdot (do
 const keyHook = { key: "Digit6", shift: true, altRight: true } // ogonoek (little hook), mark ˛ placed beneath a letter
 const keyCedille = { key: "Equal", shift: true, altRight: true } // accent cedille (cedilla), mark ¸ placed beneath a letter
 
-export const chars = {
+const chars = {
   A: { key: "KeyA", shift: true },
   "Ä": { key: "KeyA", shift: true, accentKey: keyTrema },
   "Á": { key: "KeyA", shift: true, accentKey: keyAcute },
@@ -242,3 +242,9 @@ export const chars = {
   Enter: { key: "Enter" },
   Tab: { key: "Tab" },
 } as Record<string, KeyCombo>;
+
+export const cs_CZ: KeyboardLayout = {
+  isoCode: "cs-CZ",
+  name: name,
+  chars: chars
+};

ui/src/keyboardLayouts/de_CH.ts

@@ -1,14 +1,14 @@
-import { KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
 
-export const name = "Schwiizerdütsch";
+const name = "Schwiizerdütsch";
 
 const keyTrema = { key: "BracketRight" } // tréma (umlaut), two dots placed above a vowel
 const keyAcute = { key: "Minus", altRight: true } // accent aigu (acute accent), mark ´ placed above the letter
 const keyHat = { key: "Equal" } // accent circonflexe (accent hat), mark ^ placed above the letter
 const keyGrave = { key: "Equal", shift: true } // accent grave, mark ` placed above the letter
 const keyTilde = { key: "Equal", altRight: true } // tilde, mark ~ placed above the letter
 
-export const chars = {
+const chars = {
   A: { key: "KeyA", shift: true },
   "Ä": { key: "KeyA", shift: true, accentKey: keyTrema },
   "Á": { key: "KeyA", shift: true, accentKey: keyAcute },
@@ -163,3 +163,9 @@ export const chars = {
   Enter: { key: "Enter" },
   Tab: { key: "Tab" },
 } as Record<string, KeyCombo>;
+
+export const de_CH: KeyboardLayout = {
+  isoCode: "de-CH",
+  name: name,
+  chars: chars
+};

ui/src/keyboardLayouts/de_DE.ts

@@ -1,12 +1,12 @@
-import { KeyCombo } from "../keyboardLayouts"
+import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
 
-export const name = "Deutsch";
+const name = "Deutsch";
 
 const keyAcute = { key: "Equal" } // accent aigu (acute accent), mark ´ placed above the letter
 const keyHat = { key: "Backquote" } // accent circonflexe (accent hat), mark ^ placed above the letter
 const keyGrave = { key: "Equal", shift: true } // accent grave, mark ` placed above the letter
 
-export const chars = {
+const chars = {
   A: { key: "KeyA", shift: true },
   "Á": { key: "KeyA", shift: true, accentKey: keyAcute },
   "Â": { key: "KeyA", shift: true, accentKey: keyHat },
@@ -150,3 +150,9 @@ export const chars = {
   Enter: { key: "Enter" },
   Tab: { key: "Tab" },
 } as Record<string, KeyCombo>;
+
+export const de_DE: KeyboardLayout = {
+  isoCode: "de-DE",
+  name: name,
+  chars: chars
+};