call keybardRemapper when no binding found in mousetrap

Author: yafred

ui/lib/src/keyboardRemapper.ts

@@ -23,10 +23,33 @@ export class KeyboardRemapper {
   }
 }
 
+const alphabet: string[] = Array.from(
+  { length: 26 },
+  (_, i) => String.fromCharCode(97 + i), // 'a' is char code 97
+);
+
+const digits: string[] = Array.from(
+  { length: 10 },
+  (_, i) => String.fromCharCode(48 + i), // '0' is char code 48
+);
+
+const qwertyMapLowerCaseLetters: Mapping[] = alphabet.map(
+  (letter: string) => <Mapping>{ key: letter, code: 'Key' + letter.toUpperCase(), shiftKey: false },
+);
+
+const qwertyMapUpperCaseLetters: Mapping[] = alphabet.map(
+  (letter: string) =>
+    <Mapping>{ key: letter.toUpperCase(), code: 'Key' + letter.toUpperCase(), shiftKey: true },
+);
+
+const qwertyMapDigits: Mapping[] = digits.map(
+  (letter: string) => <Mapping>{ key: letter, code: 'Digit' + letter.toUpperCase(), shiftKey: false },
+);
+
 const qwertyMappings: Mapping[] = [
-  ...qwertyMapUpperCaseLetters(),
-  ...qwertyMapLowerCaseLetters(),
-  ...qwertyMapDigits(),
+  ...qwertyMapUpperCaseLetters,
+  ...qwertyMapLowerCaseLetters,
+  ...qwertyMapDigits,
   {
     key: '?',
     code: 'Slash',
@@ -53,32 +76,3 @@ const qwertyMappings: Mapping[] = [
     shiftKey: true,
   },
 ];
-
-const alphabet: string[] = Array.from(
-  { length: 26 },
-  (_, i) => String.fromCharCode(97 + i), // 'a' is char code 97
-);
-
-function qwertyMapLowerCaseLetters(): Mapping[] {
-  return alphabet.map(
-    (letter: string) => <Mapping>{ key: letter, code: 'Key' + letter.toUpperCase(), shiftKey: false },
-  );
-}
-
-function qwertyMapUpperCaseLetters(): Mapping[] {
-  return alphabet.map(
-    (letter: string) =>
-      <Mapping>{ key: letter.toUpperCase(), code: 'Key' + letter.toUpperCase(), shiftKey: true },
-  );
-}
-
-const digits: string[] = Array.from(
-  { length: 10 },
-  (_, i) => String.fromCharCode(48 + i), // '0' is char code 48
-);
-
-function qwertyMapDigits(): Mapping[] {
-  return digits.map(
-    (letter: string) => <Mapping>{ key: letter, code: 'Digit' + letter.toUpperCase(), shiftKey: false },
-  );
-}

ui/site/src/mousetrap.ts

@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+import { KeyboardRemapper } from 'lib/keyboardRemapper';
+
 type Action = 'keypress' | 'keydown' | 'keyup';
 
 type Callback = (e: KeyboardEvent) => void;
@@ -32,6 +34,8 @@ interface Binding {
   action: Action;
 }
 
+const qwertyRemapper = new KeyboardRemapper('QWERTY');
+
 const MAP: Record<string, string> = {
   8: 'backspace',
   9: 'tab',
@@ -209,10 +213,11 @@ export default class Mousetrap {
   };
 
   private getMatches = (e: KeyboardEvent): Binding[] => {
+    const { mapped: mapped, key: mappedKey } = qwertyRemapper.map(e);
     const key = keyFromEvent(e);
     const action = e.type;
     const modifiers = action === 'keyup' && isModifier(key) ? [key] : eventModifiers(e);
-    return (this.bindings[key] || []).filter(
+    return (this.bindings[key] || (mapped && this.bindings[mappedKey]) || []).filter(
       binding =>
         action === binding.action &&
         // Chrome will not fire a keypress if meta or control is down,