ignore CapsLock when handling keyDown event (#2373)

* ignore CapsLock when handling keyDown event

* fix `this`

src/components/App.tsx

@@ -1518,6 +1518,30 @@ class App extends React.Component<ExcalidrawProps, AppState> {
   // Input handling
 
   private onKeyDown = withBatchedUpdates((event: KeyboardEvent) => {
+    // normalize `event.key` when CapsLock is pressed #2372
+    if (
+      "Proxy" in window &&
+      ((!event.shiftKey && /^[A-Z]$/.test(event.key)) ||
+        (event.shiftKey && /^[a-z]$/.test(event.key)))
+    ) {
+      event = new Proxy(event, {
+        get(ev: any, prop) {
+          const value = ev[prop];
+          if (typeof value === "function") {
+            // fix for Proxies hijacking `this`
+            return value.bind(ev);
+          }
+          return prop === "key"
+            ? // CapsLock inverts capitalization based on ShiftKey, so invert
+              // it back
+              event.shiftKey
+              ? ev.key.toUpperCase()
+              : ev.key.toLowerCase()
+            : value;
+        },
+      });
+    }
+
     // ensures we don't prevent devTools select-element feature
     if (event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === "C") {
       return;