Improve accent handling

ui/src/components/popovers/PasteModal.tsx

@@ -17,6 +17,12 @@ const hidKeyboardPayload = (keys: number[], modifier: number) => {
   return { keys, modifier };
 };
 
+const modifierCode = (shift?: boolean, altRight?: boolean) => {
+  return shift ? modifiers["ShiftLeft"] : 0
+       | (altRight ? modifiers["AltRight"] : 0)
+}
+const noModifier = 0
+
 export default function PasteModal() {
   const TextAreaRef = useRef<HTMLTextAreaElement>(null);
   const setPasteMode = useHidStore(state => state.setPasteModeEnabled);
@@ -58,34 +64,26 @@ export default function PasteModal() {
         if (!keyboardLayout) continue;
         if (!chars[keyboardLayout]) continue;
 
-        const { key, shift, altRight, space, capsLock, trema } = chars[keyboardLayout][char] ?? {};
+        const { key, shift, altRight, deadKey, accentKey } = chars[keyboardLayout][char]
         if (!key) continue;
 
 	const keyz = [ keys[key] ];
-	const modz = [ shift ? modifiers["ShiftLeft"] : 0
-                       | (altRight ? modifiers["AltRight"] : 0) ];
+	const modz = [ modifierCode(shift, altRight) ];
 
-	if (space) {
+	if (deadKey) {
             keyz.push(keys["Space"]);
-	    modz.push(0);
+            modz.push(noModifier);
 	}
-	if (capsLock) {
-            keyz.unshift(keys["CapsLock"]);
-	    modz.unshift(0);
-
-	    keyz.push(keys["CapsLock"]);
-            modz.push(0);
-	}
-	if (trema) {
-            keyz.unshift(keys["BracketRight"]); // trema ¨
-	    modz.unshift(0)
+	if (accentKey) {
+            keyz.unshift(keys[accentKey.key])
+            modz.unshift(modifierCode(accentKey.shift, accentKey.altRight))
 	}
 
-	for (const [index, keyy] of keyz.entries()) {
+	for (const [index, kei] of keyz.entries()) {
           await new Promise<void>((resolve, reject) => {
             send(
               "keyboardReport",
-              hidKeyboardPayload([keyy], modz[index]),
+              hidKeyboardPayload([kei], modz[index]),
               params => {
                 if ("error" in params) return reject(params.error);
                 send("keyboardReport", hidKeyboardPayload([], 0), params => {
@@ -172,7 +170,7 @@ export default function PasteModal() {
                 </div>
 		<div className="space-y-4">
                   <p className="text-xs text-slate-600 dark:text-slate-400">
-                    Sending key codes for keyboard layout {layouts[keyboardLayout]}
+                    Sending key codes using keyboard layout {layouts[keyboardLayout]}
                   </p>
 		</div>
               </div>

ui/src/keyboardLayouts.ts

@@ -1,6 +1,9 @@
 import { chars as chars_en_US } from "@/keyboardLayouts/en_US"
 import { chars as chars_de_CH } from "@/keyboardLayouts/de_CH"
 
+type KeyInfo = { key: string | number; shift?: boolean, altRight?: boolean }
+export type KeyCombo = KeyInfo & { deadKey?: boolean, accentKey?: KeyInfo }
+
 export const layouts = {
   "en_US": "English (US)",
   "de_CH": "Swiss German"
@@ -9,4 +12,4 @@ export const layouts = {
 export const chars = {
   "en_US": chars_en_US,
   "de_CH": chars_de_CH,
-} as Record<string, Record<string, { key: string | number; shift?: boolean, altRight?: boolean, space?: boolean, capsLock?: boolean, trema?: boolean }>>;
+} as Record<string, Record <string, KeyCombo>>

ui/src/keyboardLayouts/de_CH.ts

@@ -1,40 +1,78 @@
+import { KeyCombo } from "../keyboardLayouts"
+
+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 = {
   A: { key: "KeyA", shift: true },
-  "Ä": { key: "KeyA", shift: true, trema: true },
+  "Ä": { key: "KeyA", shift: true, accentKey: keyTrema },
+  "Á": { key: "KeyA", shift: true, accentKey: keyAcute },
+  "Â": { key: "KeyA", shift: true, accentKey: keyHat },
+  "À": { key: "KeyA", shift: true, accentKey: keyGrave },
+  "Ã": { key: "KeyA", shift: true, accentKey: keyTilde },
+  "Æ": { key: "KeyA", shift: true, altRight: true },
   B: { key: "KeyB", shift: true },
   C: { key: "KeyC", shift: true },
   D: { key: "KeyD", shift: true },
   E: { key: "KeyE", shift: true },
+  "Ë": { key: "KeyE", shift: true, accentKey: keyTrema },
+  "É": { key: "KeyE", shift: true, accentKey: keyAcute },
+  "Ê": { key: "KeyE", shift: true, accentKey: keyHat },
+  "È": { key: "KeyE", shift: true, accentKey: keyGrave },
+  "Ẽ": { key: "KeyE", shift: true, accentKey: keyTilde },
   F: { key: "KeyF", shift: true },
   G: { key: "KeyG", shift: true },
   H: { key: "KeyH", shift: true },
   I: { key: "KeyI", shift: true },
+  "Ï": { key: "KeyI", shift: true, accentKey: keyTrema },
+  "Í": { key: "KeyI", shift: true, accentKey: keyAcute },
+  "Î": { key: "KeyI", shift: true, accentKey: keyHat },
+  "Ì": { key: "KeyI", shift: true, accentKey: keyGrave },
+  "Ĩ": { key: "KeyI", shift: true, accentKey: keyTilde },
   J: { key: "KeyJ", shift: true },
   K: { key: "KeyK", shift: true },
   L: { key: "KeyL", shift: true },
   M: { key: "KeyM", shift: true },
   N: { key: "KeyN", shift: true },
   O: { key: "KeyO", shift: true },
-  "Ö": { key: "KeyO", shift: true, trema: true },
+  "Ö": { key: "KeyO", shift: true, accentKey: keyTrema },
+  "Ó": { key: "KeyO", shift: true, accentKey: keyAcute },
+  "Ô": { key: "KeyO", shift: true, accentKey: keyHat },
+  "Ò": { key: "KeyO", shift: true, accentKey: keyGrave },
+  "Õ": { key: "KeyO", shift: true, accentKey: keyTilde },
+  "Œ": { key: "KeyO", shift: true, altRight: true },
   P: { key: "KeyP", shift: true },
   Q: { key: "KeyQ", shift: true },
   R: { key: "KeyR", shift: true },
   S: { key: "KeyS", shift: true },
   T: { key: "KeyT", shift: true },
   U: { key: "KeyU", shift: true },
-  "Ü": { key: "KeyU", shift: true, trema: true }, 
+  "Ü": { key: "KeyU", shift: true, accentKey: keyTrema },
+  "Ú": { key: "KeyU", shift: true, accentKey: keyAcute },
+  "Û": { key: "KeyU", shift: true, accentKey: keyHat },
+  "Ù": { key: "KeyU", shift: true, accentKey: keyGrave },
+  "Ũ": { key: "KeyU", shift: true, accentKey: keyTilde },
   V: { key: "KeyV", shift: true },
   W: { key: "KeyW", shift: true },
   X: { key: "KeyX", shift: true },
   Y: { key: "KeyZ", shift: true },
   Z: { key: "KeyY", shift: true },
   a: { key: "KeyA" },
+  "á": { key: "KeyA", accentKey: keyAcute },
+  "â": { key: "KeyA", accentKey: keyHat },
+  "ã": { key: "KeyA", accentKey: keyTilde },
   "æ": { key: "KeyA", altRight: true },
   b: { key: "KeyB" },
   c: { key: "KeyC" },
   d: { key: "KeyD" },
   "ð": { key: "KeyD", altRight: true },
   e: { key: "KeyE" },
+  "ë": { key: "KeyE", accentKey: keyTrema },
+  "ê": { key: "KeyE", accentKey: keyHat },
+  "ẽ": { key: "KeyE", accentKey: keyTilde },
   f: { key: "KeyF" },
   "đ": { key: "KeyF", altRight: true },
   g: { key: "KeyG" },
@@ -42,6 +80,11 @@ export const chars = {
   h: { key: "KeyH" },
   "ħ": { key: "KeyH", altRight: true },
   i: { key: "KeyI" },
+  "ï": { key: "KeyI", accentKey: keyTrema },
+  "í": { key: "KeyI", accentKey: keyAcute },
+  "î": { key: "KeyI", accentKey: keyHat },
+  "ì": { key: "KeyI", accentKey: keyGrave },
+  "ĩ": { key: "KeyI", accentKey: keyTilde },
   "→": { key: "KeyI", altRight: true },
   j: { key: "KeyJ" },
   k: { key: "KeyK" },
@@ -52,6 +95,10 @@ export const chars = {
   "µ": { key: "KeyM", altRight: true },
   n: { key: "KeyN" },
   o: { key: "KeyO" },
+  "ó": { key: "KeyO", accentKey: keyAcute },
+  "ô": { key: "KeyO", accentKey: keyHat },
+  "ò": { key: "KeyO", accentKey: keyGrave },
+  "õ": { key: "KeyO", accentKey: keyTilde },
   "œ": { key: "KeyO", altRight: true },
   p: { key: "KeyP" },
   "þ": { key: "KeyP", altRight: true },
@@ -63,6 +110,10 @@ export const chars = {
   t: { key: "KeyT" },
   "ŧ": { key: "KeyT", altRight: true },
   u: { key: "KeyU" },
+  "ú": { key: "KeyU", accentKey: keyAcute },
+  "û": { key: "KeyU", accentKey: keyHat },
+  "ù": { key: "KeyU", accentKey: keyGrave },
+  "ũ": { key: "KeyU", accentKey: keyTilde },
   "↓": { key: "KeyU", altRight: true },
   v: { key: "KeyV" },
   "„": { key: "KeyV", altRight: true },
@@ -105,9 +156,9 @@ export const chars = {
   "=": { key: "Digit0", shift: true },
   "'": { key: "Minus" },
   "?": { key: "Minus", shift: true },
-  "^": { key: "Equal", space: true }, // dead key
+  "^": { key: "Equal", deadKey: true },
   "`": { key: "Equal", shift: true },
-  "~": { key: "Equal", altRight: true, space: true }, // dead key 
+  "~": { key: "Equal", altRight: true, deadKey: true },
   "ü": { key: "BracketLeft" },
   "è": { key: "BracketLeft", shift: true },
   "[": { key: "BracketLeft", altRight: true },
@@ -137,4 +188,4 @@ export const chars = {
   "\n": { key: "Enter" },
   Enter: { key: "Enter" },
   Tab: { key: "Tab" },
-} as Record<string, { key: string | number; shift?: boolean, altRight?: boolean, space?: boolean, capsLock?: boolean, trema?: boolean }>
+} as Record<string, KeyCombo>;

ui/src/keyboardLayouts/en_US.ts

@@ -1,3 +1,5 @@
+import { KeyCombo } from "../keyboardLayouts"
+
 export const chars = {
   A: { key: "KeyA", shift: true },
   B: { key: "KeyB", shift: true },
@@ -99,4 +101,4 @@ export const chars = {
   "\n": { key: "Enter", shift: false },
   Enter: { key: "Enter", shift: false },
   Tab: { key: "Tab", shift: false },
-} as Record<string, { key: string | number; shift: boolean }>
+} as Record<string, KeyCombo>