impr: Added two-step highlighting for accented characters that require the use of dead keys

frontend/src/ts/controllers/input-controller.ts

@@ -34,6 +34,7 @@ import * as KeymapEvent from "../observables/keymap-event";
 import { IgnoredKeys } from "../constants/ignored-keys";
 import { ModifierKeys } from "../constants/modifier-keys";
 import { navigate } from "./route-controller";
+import { unaccentedCharacter } from "../utils/strings";
 
 let dontInsertSpace = false;
 let correctShiftUsed = true;
@@ -1098,6 +1099,13 @@ $(document).on("keydown", async (event) => {
     );
     const len: number = TestInput.input.current.length; // have to do this because prettier wraps the line and causes an error
 
+    const currentChar = TestWords.words.getCurrent().charAt(len).toString();
+    const unaccentedChar = unaccentedCharacter(currentChar);
+
+    if (unaccentedChar !== currentChar)
+      //dead key + unaccented character = accented character
+      void KeymapEvent.highlight(unaccentedChar);
+
     // Check to see if the letter actually exists to toggle it as dead
     const deadLetter: Element | undefined =
       word?.querySelectorAll("letter")[len];

frontend/src/ts/elements/keymap.ts

@@ -22,6 +22,12 @@ const stenoKeys: MonkeyTypes.Layout = {
   },
 };
 
+const accentMap = {
+  "^": ["ê", "â", "î", "ô", "û"],
+  "¨": ["ë", "ä", "ï", "ö", "ü", "ÿ"],
+  "~": ["ã", "õ", "ñ"],
+};
+
 function highlightKey(currentKey: string): void {
   if (Config.mode === "zen") return;
   if (currentKey === "") currentKey = " ";
@@ -32,15 +38,27 @@ function highlightKey(currentKey: string): void {
     if (Config.language.startsWith("korean")) {
       currentKey = Hangul.disassemble(currentKey)[0] ?? currentKey;
     }
+
     if (currentKey === " ") {
       highlightKey = "#keymap .keySpace, #keymap .keySplitSpace";
     } else if (currentKey === '"') {
       highlightKey = `#keymap .keymapKey[data-key*='${currentKey}']`;
     } else {
       highlightKey = `#keymap .keymapKey[data-key*="${currentKey}"]`;
+
+      //if accented letter not highlighted, highlight the required dead key to write it
+      if ($(highlightKey).length === 0) {
+        for (const [accent, accentedChars] of Object.entries(accentMap)) {
+          console.log("for accent : " + accent + " ; " + accentedChars);
+          if (accentedChars.includes(currentKey)) {
+            highlightKey = `#keymap .keymapKey[data-key*="${accent}"]`;
+            break;
+          }
+        }
+      }
     }
 
-    // console.log("highlighting", highlightKey);
+    console.log("highlighting", highlightKey);
 
     $(highlightKey).addClass("activeKey");
   } catch (e) {

frontend/src/ts/utils/strings.ts

@@ -149,3 +149,23 @@ export function cleanTypographySymbols(textToClean: string): string {
     (char) => specials[char as keyof typeof specials] || ""
   );
 }
+
+export function unaccentedCharacter(character: string): string {
+  const charMap = {
+    e: ["ê", "ë"],
+    a: ["â", "ã", "ä"],
+    o: ["ô", "ö", "õ"],
+    i: ["î", "ï", "ĩ"],
+    u: ["û", "ü"],
+    n: ["ñ"],
+    y: ["ÿ"],
+  };
+
+  for (const [normalizedChar, accentedChars] of Object.entries(charMap)) {
+    if (accentedChars.includes(character)) {
+      return normalizedChar;
+    }
+  }
+
+  return character;
+}