Detect key from keyboard event by key property

src/components/appMediaViewerBase.ts

@@ -42,6 +42,7 @@ import EventListenerBase from "../helpers/eventListenerBase";
 import { MyMessage } from "../lib/appManagers/appMessagesManager";
 import RichTextProcessor from "../lib/richtextprocessor";
 import { NULL_PEER_ID } from "../lib/mtproto/mtproto_config";
+import getKeyFromEventCaseInsensitive from "../helpers/dom/getKeyFromEventCaseInsensitive";
 
 const ZOOM_STEP = 0.5;
 const ZOOM_INITIAL_VALUE = 1;
@@ -492,14 +493,16 @@ export default class AppMediaViewerBase<
       return;
     }
 
+    const key = getKeyFromEventCaseInsensitive(e);
+    
     let good = true;
-    if(e.key === 'ArrowRight') {
+    if(key === 'ArrowRight') {
       this.buttons.next.click();
-    } else if(e.key === 'ArrowLeft') {
+    } else if(key === 'ArrowLeft') {
       this.buttons.prev.click();
-    } else if(e.key === '-' || e.key === '=') {
+    } else if(key === '-' || key === '=') {
       if(this.ctrlKeyDown) {
-        this.changeZoom(e.key === '=');
+        this.changeZoom(key === '=');
       }
     } else {
       good = false;

src/components/appNavigationController.ts

@@ -12,6 +12,7 @@ import blurActiveElement from "../helpers/dom/blurActiveElement";
 import { cancelEvent } from "../helpers/dom/cancelEvent";
 import { indexOfAndSplice } from "../helpers/array";
 import isSwipingBackSafari from "../helpers/dom/isSwipingBackSafari";
+import getKeyFromEvent from "../helpers/dom/getKeyFromEvent";
 
 export type NavigationItem = {
   type: 'left' | 'right' | 'im' | 'chat' | 'popup' | 'media' | 'menu' | 
@@ -63,7 +64,7 @@ export class AppNavigationController {
     window.addEventListener('keydown', (e) => {
       const item = this.navigations[this.navigations.length - 1];
       if(!item) return;
-      if(e.key === 'Escape' && (item.onEscape ? item.onEscape() : true)) {
+      if(getKeyFromEvent(e) === 'Escape' && (item.onEscape ? item.onEscape() : true)) {
         cancelEvent(e);
         this.back(item.type);
       }

src/components/chat/input.ts

@@ -82,6 +82,8 @@ import MEDIA_MIME_TYPES_SUPPORTED from '../../environment/mediaMimeTypesSupport'
 import appMediaPlaybackController from '../appMediaPlaybackController';
 import { NULL_PEER_ID } from '../../lib/mtproto/mtproto_config';
 import setCaretAt from '../../helpers/dom/setCaretAt';
+import getKeyFromEvent from '../../helpers/dom/getKeyFromEvent';
+import getKeyFromEventCaseInsensitive from '../../helpers/dom/getKeyFromEventCaseInsensitive';
 
 const RECORD_MIN_TIME = 500;
 const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.';
@@ -947,15 +949,16 @@ export default class ChatInput {
 
   private attachMessageInputListeners() {
     this.listenerSetter.add(this.messageInput)('keydown', (e: KeyboardEvent) => {
+      const key = getKeyFromEvent(e);
       if(isSendShortcutPressed(e)) {
         cancelEvent(e);
         this.sendMessage();
       } else if(e.ctrlKey || e.metaKey) {
         this.handleMarkdownShortcut(e);
-      } else if((e.key === 'PageUp' || e.key === 'PageDown') && !e.shiftKey) { // * fix pushing page to left (Chrome Windows)
+      } else if((key === 'PageUp' || key === 'PageDown') && !e.shiftKey) { // * fix pushing page to left (Chrome Windows)
         e.preventDefault();
 
-        if(e.key === 'PageUp') {
+        if(key === 'PageUp') {
           const range = document.createRange();
           const sel = window.getSelection();
           
@@ -1152,32 +1155,30 @@ export default class ChatInput {
       'I': 'italic',
       'U': 'underline',
       'S': 'strikethrough',
-      'M': 'monospace',
+      'M': 'monospace'
-      'K': 'link'
     };
 
-    const selection = document.getSelection();
+    if(this.appImManager.markupTooltip) {
-    if(selection.toString().trim().length) {
+      formatKeys['K'] = 'link';
-      for(const key in formatKeys) {
+    }
-        const good = e.code === ('Key' + key);
-  
-        if(good) {
-          // * костыльчик
-          if(key === 'K' && this.appImManager.markupTooltip) {
-            this.appImManager.markupTooltip.showLinkEditor();
-            cancelEvent(e);
-            break;
-          }
 
-          this.applyMarkdown(formatKeys[key]);
+    const key = getKeyFromEventCaseInsensitive(e);
-          cancelEvent(e); // cancel legacy event
+    const applyMarkdown = formatKeys[key];
-          break;
+
-        }
+    const selection = document.getSelection();
+    if(selection.toString().trim().length && applyMarkdown) {
+      // * костыльчик
+      if(key === 'K') {
+        this.appImManager.markupTooltip.showLinkEditor();
+      } else {
+        this.applyMarkdown(applyMarkdown);
       }
+  
+      cancelEvent(e); // cancel legacy event
     }
 
     //return;
-    if(e.code === 'KeyZ') {
+    if(key === 'Z') {
       let html = this.messageInput.innerHTML;
 
       if(e.shiftKey) {

src/components/chat/markupTooltip.ts

@@ -17,6 +17,7 @@ import { attachClickEvent } from "../../helpers/dom/clickEvent";
 import getSelectedNodes from "../../helpers/dom/getSelectedNodes";
 import isSelectionEmpty from "../../helpers/dom/isSelectionEmpty";
 import { MarkdownType, markdownTags } from "../../helpers/dom/getRichElementValue";
+import getKeyFromEvent from "../../helpers/dom/getKeyFromEvent";
 //import { logger } from "../../lib/logger";
 
 export default class MarkupTooltip {
@@ -80,7 +81,7 @@ export default class MarkupTooltip {
     this.linkInput.addEventListener('keydown', (e) => {
       const valid = !this.linkInput.value.length || !!RichTextProcessor.matchUrl(this.linkInput.value);///^(http)|(https):\/\//i.test(this.linkInput.value);
 
-      if(e.code === 'Enter') {
+      if(getKeyFromEvent(e) === 'Enter') {
         if(!valid) {
           if(this.linkInput.classList.contains('error')) {
             this.linkInput.classList.remove('error');

src/components/popups/index.ts

@@ -15,6 +15,7 @@ import ListenerSetter from "../../helpers/listenerSetter";
 import { attachClickEvent, simulateClickEvent } from "../../helpers/dom/clickEvent";
 import isSendShortcutPressed from "../../helpers/dom/isSendShortcutPressed";
 import { cancelEvent } from "../../helpers/dom/cancelEvent";
+import getKeyFromEvent from "../../helpers/dom/getKeyFromEvent";
 
 export type PopupButton = {
   text?: string,
@@ -167,7 +168,7 @@ export default class PopupElement {
     // cannot add event instantly because keydown propagation will fire it
     setTimeout(() => {
       this.listenerSetter.add(document.body)('keydown', (e) => {
-        if(this.confirmShortcutIsSendShortcut ? isSendShortcutPressed(e) : e.key === 'Enter') {
+        if(this.confirmShortcutIsSendShortcut ? isSendShortcutPressed(e) : getKeyFromEvent(e) === 'Enter') {
           simulateClickEvent(this.btnConfirmOnEnter);
           cancelEvent(e);
         }

src/components/sidebarLeft/tabs/2fa/email.ts

@@ -20,6 +20,7 @@ import PopupPeer from "../../../popups/peer";
 import { cancelEvent } from "../../../../helpers/dom/cancelEvent";
 import { canFocus } from "../../../../helpers/dom/canFocus";
 import { attachClickEvent } from "../../../../helpers/dom/clickEvent";
+import getKeyFromEvent from "../../../../helpers/dom/getKeyFromEvent";
 
 export default class AppTwoStepVerificationEmailTab extends SliderSuperTab {
   public inputField: InputField;
@@ -72,7 +73,7 @@ export default class AppTwoStepVerificationEmailTab extends SliderSuperTab {
     });
 
     inputField.input.addEventListener('keypress', (e) => {
-      if(e.key === 'Enter') {
+      if(getKeyFromEvent(e) === 'Enter') {
         cancelEvent(e);
         return onContinueClick();
       }

src/components/sidebarLeft/tabs/2fa/enterPassword.ts

@@ -10,6 +10,7 @@ import { cancelEvent } from "../../../../helpers/dom/cancelEvent";
 import { canFocus } from "../../../../helpers/dom/canFocus";
 import { attachClickEvent } from "../../../../helpers/dom/clickEvent";
 import replaceContent from "../../../../helpers/dom/replaceContent";
+import getKeyFromEvent from "../../../../helpers/dom/getKeyFromEvent";
 import { AccountPassword } from "../../../../layer";
 import I18n, { i18n } from "../../../../lib/langPack";
 import passwordManager from "../../../../lib/mtproto/passwordManager";
@@ -64,7 +65,7 @@ export default class AppTwoStepVerificationEnterPasswordTab extends SliderSuperT
         textEl.update();
       }
   
-      if(e.key === 'Enter') {
+      if(getKeyFromEvent(e) === 'Enter') {
         return onContinueClick();
       }
     });

src/components/sidebarLeft/tabs/2fa/hint.ts

@@ -16,6 +16,7 @@ import { toast } from "../../../toast";
 import I18n from "../../../../lib/langPack";
 import { cancelEvent } from "../../../../helpers/dom/cancelEvent";
 import { attachClickEvent } from "../../../../helpers/dom/clickEvent";
+import getKeyFromEvent from "../../../../helpers/dom/getKeyFromEvent";
 
 export default class AppTwoStepVerificationHintTab extends SliderSuperTab {
   public inputField: InputField;
@@ -62,7 +63,7 @@ export default class AppTwoStepVerificationHintTab extends SliderSuperTab {
     });
 
     inputField.input.addEventListener('keypress', (e) => {
-      if(e.key === 'Enter') {
+      if(getKeyFromEvent(e) === 'Enter') {
         cancelEvent(e);
         return inputField.value ? onContinueClick() : onSkipClick();
       }

src/components/sidebarLeft/tabs/2fa/reEnterPassword.ts

@@ -14,6 +14,7 @@ import AppTwoStepVerificationHintTab from "./hint";
 import { InputState } from "../../../inputField";
 import { cancelEvent } from "../../../../helpers/dom/cancelEvent";
 import { attachClickEvent } from "../../../../helpers/dom/clickEvent";
+import getKeyFromEvent from "../../../../helpers/dom/getKeyFromEvent";
 
 export default class AppTwoStepVerificationReEnterPasswordTab extends SliderSuperTab {
   public state: AccountPassword;
@@ -51,7 +52,7 @@ export default class AppTwoStepVerificationReEnterPasswordTab extends SliderSupe
         passwordInputField.setState(InputState.Neutral);
       }
   
-      if(e.key === 'Enter') {
+      if(getKeyFromEvent(e) === 'Enter') {
         return onContinueClick();
       }
     });

src/components/telInputField.ts

@@ -9,6 +9,7 @@ import { formatPhoneNumber } from "../helpers/formatPhoneNumber";
 import { IS_APPLE, IS_ANDROID, IS_APPLE_MOBILE } from "../environment/userAgent";
 import { HelpCountry, HelpCountryCode } from "../layer";
 import InputField, { InputFieldOptions } from "./inputField";
+import getKeyFromEvent from "../helpers/dom/getKeyFromEvent";
 
 export default class TelInputField extends InputField {
   private pasted = false;
@@ -97,7 +98,8 @@ export default class TelInputField extends InputField {
   
     telEl.addEventListener('keypress', (e) => {
       //console.log('keypress', this.value);
-      if(/\D/.test(e.key) && !(e.metaKey || e.ctrlKey) && e.key !== 'Backspace' && !(e.key === '+' && e.shiftKey/*  && !this.value */)) {
+      const key = getKeyFromEvent(e);
+      if(/\D/.test(key) && !(e.metaKey || e.ctrlKey) && key !== 'Backspace' && !(key === '+' && e.shiftKey/*  && !this.value */)) {
         e.preventDefault();
         return false;
       }

src/helpers/dom/attachListNavigation.ts

@@ -5,6 +5,7 @@
  */
 
 import fastSmoothScroll from "../fastSmoothScroll";
+import getKeyFromEventCaseInsensitive from "./getKeyFromEventCaseInsensitive";
 import { cancelEvent } from "./cancelEvent";
 import { attachClickEvent, detachClickEvent } from "./clickEvent";
 import findUpAsChild from "./findUpAsChild";
@@ -88,8 +89,9 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
   }
 
   let onKeyDown = (e: KeyboardEvent) => {
-    if(!keyNames.has(e.key as any)) {
+    const key = getKeyFromEventCaseInsensitive(e);
-      if(e.key === 'Enter' || (type !== 'xy' && e.key === 'Tab')) {
+    if(!keyNames.has(key as any)) {
+      if(key === 'Enter' || (type !== 'xy' && key === 'Tab')) {
         cancelEvent(e);
         fireSelect(getCurrentTarget());
       }
@@ -101,7 +103,7 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
 
     if(list.childElementCount > 1) {
       let currentTarget = getCurrentTarget();
-      currentTarget = handleArrowKey(currentTarget, e.key as any);
+      currentTarget = handleArrowKey(currentTarget, key as any);
       setCurrentTarget(currentTarget, true);
     }
   };
@@ -152,7 +154,7 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
   if(waitForKey) {
     const _onKeyDown = onKeyDown;
     onKeyDown = (e) => {
-      if(e.key === waitForKey) {
+      if(getKeyFromEventCaseInsensitive(e) === waitForKey) {
         cancelEvent(e);
 
         document.removeEventListener(HANDLE_EVENT, onKeyDown, {capture: true});

src/helpers/dom/getKeyFromEvent.ts

@@ -0,0 +1,21 @@
+/*
+ * https://github.com/morethanwords/tweb
+ * Copyright (C) 2019-2021 Eduard Kuzmenko
+ * https://github.com/morethanwords/tweb/blob/master/LICENSE
+ */
+
+export default function getKeyFromEvent(e: KeyboardEvent) {
+  let key = e.key;
+	if(!key) {
+    key = e.code;
+    if(key.startsWith('Key')) {
+      key = e.code.slice(3);
+
+      if(!e.shiftKey && key.length < 2) {
+        key = key.toLowerCase();
+      }
+    }
+	}
+
+	return key;
+}

src/helpers/dom/getKeyFromEventCaseInsensitive.ts

@@ -0,0 +1,12 @@
+/*
+ * https://github.com/morethanwords/tweb
+ * Copyright (C) 2019-2021 Eduard Kuzmenko
+ * https://github.com/morethanwords/tweb/blob/master/LICENSE
+ */
+
+import getKeyFromEvent from "./getKeyFromEvent";
+import { capitalizeFirstLetter } from "../string";
+
+export default function getKeyFromEventCaseInsensitive(e: KeyboardEvent) {
+  return capitalizeFirstLetter(getKeyFromEvent(e));
+}

src/helpers/dom/isSendShortcutPressed.ts

@@ -6,9 +6,10 @@
 
 import rootScope from "../../lib/rootScope";
 import { IS_MOBILE, IS_APPLE } from "../../environment/userAgent";
+import getKeyFromEvent from "./getKeyFromEvent";
 
 export default function isSendShortcutPressed(e: KeyboardEvent) {
-  if(e.key === 'Enter' && !IS_MOBILE && !e.isComposing) {
+  if(getKeyFromEvent(e) === 'Enter' && !IS_MOBILE && !e.isComposing) {
     /* if(e.ctrlKey || e.metaKey) {
       this.messageInput.innerHTML += '<br>';
       placeCaretAtEnd(this.message)

src/lib/appManagers/appImManager.ts

@@ -72,6 +72,7 @@ import { NULL_PEER_ID } from '../mtproto/mtproto_config';
 import telegramMeWebManager from '../mtproto/telegramMeWebManager';
 import { ONE_DAY } from '../../helpers/date';
 import { numberThousandSplitter } from '../../helpers/number';
+import getKeyFromEventCaseInsensitive from '../../helpers/dom/getKeyFromEventCaseInsensitive';
 
 //console.log('appImManager included33!');
 
@@ -440,7 +441,8 @@ export class AppImManager {
   private attachKeydownListener() {
     const IGNORE_KEYS = new Set(['PageUp', 'PageDown', 'Meta', 'Control']);
     const onKeyDown = (e: KeyboardEvent) => {
-      if(rootScope.isOverlayActive || IGNORE_KEYS.has(e.key)) return;
+      const key = getKeyFromEventCaseInsensitive(e);
+      if(rootScope.isOverlayActive || IGNORE_KEYS.has(key)) return;
       
       const target = e.target as HTMLElement;
       
@@ -450,19 +452,19 @@ export class AppImManager {
 
       const chat = this.chat;
 
-      if(e.code === 'KeyC' && (e.ctrlKey || e.metaKey) && target.tagName !== 'INPUT') {
+      if(key === 'C' && (e.ctrlKey || e.metaKey) && target.tagName !== 'INPUT') {
         return;
-      } else if(e.altKey && (e.code === 'ArrowUp' || e.code === 'ArrowDown')) {
+      } else if(e.altKey && (key === 'ArrowUp' || key === 'ArrowDown')) {
         const folder = appMessagesManager.dialogsStorage.getFolderDialogs(rootScope.filterId, true);
         let nextDialog: Dialog.dialog;
         if(!rootScope.peerId) {
-          if(e.code === 'ArrowDown') {
+          if(key === 'ArrowDown') {
             nextDialog = folder[0];
           }
         } else {
           const idx = folder.findIndex(dialog => dialog.peerId === rootScope.peerId);
           if(idx !== -1) {
-            const nextIndex = e.code === 'ArrowUp' ? idx - 1 : idx + 1;
+            const nextIndex = key === 'ArrowUp' ? idx - 1 : idx + 1;
             nextDialog = folder[nextIndex];
           }
         }
@@ -470,7 +472,7 @@ export class AppImManager {
         if(nextDialog) {
           this.setPeer(nextDialog.peerId);
         }
-      } else if(e.code === 'ArrowUp') {
+      } else if(key === 'ArrowUp') {
         if(!chat.input.editMsgId && chat.input.isInputEmpty()) {
           const historyStorage = appMessagesManager.getHistoryStorage(chat.peerId, chat.threadId);
           const slice = historyStorage.history.slice;
@@ -499,7 +501,7 @@ export class AppImManager {
         } else {
           return;
         }
-      } else if(e.code === 'ArrowDown') {
+      } else if(key === 'ArrowDown') {
         return;
       }
       

src/lib/mediaPlayer.ts

@@ -18,6 +18,7 @@ import rootScope from "./rootScope";
 import findUpClassName from "../helpers/dom/findUpClassName";
 import { GrabEvent } from "../helpers/dom/attachGrabListeners";
 import { attachClickEvent } from "../helpers/dom/clickEvent";
+import getKeyFromEventCaseInsensitive from "../helpers/dom/getKeyFromEventCaseInsensitive";
 
 export class MediaProgressLine extends RangeSelector {
   protected filledLoad: HTMLDivElement;
@@ -386,19 +387,21 @@ export default class VideoPlayer extends EventListenerBase<{
             return;
           }
 
+          const key = getKeyFromEventCaseInsensitive(e);
+
           let good = true;
-          if(e.code === 'KeyF') {
+          if(key === 'F') {
             this.toggleFullScreen(fullScreenButton);
-          } else if(e.code === 'KeyM') {
+          } else if(key === 'M') {
             appMediaPlaybackController.muted = !appMediaPlaybackController.muted;
-          } else if(e.code === 'Space') {
+          } else if(key === ' ') {
             this.togglePlay();
-          } else if(e.altKey && e.code === 'Equal') {
+          } else if(e.altKey && key === '=') {
             appMediaPlaybackController.playbackRate += .25;
-          } else if(e.altKey && e.code === 'Minus') {
+          } else if(e.altKey && key === '-') {
             appMediaPlaybackController.playbackRate -= .25;
-          } else if(this.wrapper.classList.contains('ckin__fullscreen') && (e.code === 'ArrowLeft' || e.code === 'ArrowRight')) {
+          } else if(this.wrapper.classList.contains('ckin__fullscreen') && (key === 'ArrowLeft' || key === 'ArrowRight')) {
-            if(e.code === 'ArrowLeft') appMediaPlaybackController.seekBackward({action: 'seekbackward'});
+            if(key === 'ArrowLeft') appMediaPlaybackController.seekBackward({action: 'seekbackward'});
             else appMediaPlaybackController.seekForward({action: 'seekforward'});
           } else {
             good = false;

src/pages/pagePassword.ts

@@ -21,6 +21,7 @@ import { attachClickEvent } from '../helpers/dom/clickEvent';
 import htmlToSpan from '../helpers/dom/htmlToSpan';
 import replaceContent from '../helpers/dom/replaceContent';
 import toggleDisability from '../helpers/dom/toggleDisability';
+import getKeyFromEvent from '../helpers/dom/getKeyFromEvent';
 
 const TEST = false;
 let passwordInput: HTMLInputElement;
@@ -125,7 +126,7 @@ let onFirstMount = (): Promise<any> => {
     this.classList.remove('error');
     btnNextI18n.update({key: 'Login.Next'});
 
-    if(e.key === 'Enter') {
+    if(getKeyFromEvent(e) === 'Enter') {
       return onSubmit();
     }
   });

src/pages/pageSignIn.ts

@@ -40,6 +40,7 @@ import stateStorage from "../lib/stateStorage";
 import rootScope from "../lib/rootScope";
 import TelInputField from "../components/telInputField";
 import IS_EMOJI_SUPPORTED from "../environment/emojiSupport";
+import getKeyFromEvent from "../helpers/dom/getKeyFromEvent";
 
 //import _countries from '../countries_pretty.json';
 let btnNext: HTMLButtonElement = null, btnQr: HTMLButtonElement;
@@ -232,7 +233,8 @@ let onFirstMount = () => {
   }, {capture: true}); */
 
   countryInput.addEventListener('keyup', (e) => {
-    if(e.ctrlKey || e.key === 'Control') return false;
+    const key = getKeyFromEvent(e);
+    if(e.ctrlKey || key === 'Control') return false;
 
     //let i = new RegExp('^' + this.value, 'i');
     let _value = countryInputField.value.toLowerCase();
@@ -257,7 +259,7 @@ let onFirstMount = () => {
       countries.forEach((c) => {
         liMap.get(c.iso2).forEach(li => li.style.display = '');
       });
-    } else if(matches.length === 1 && e.key === 'Enter') {
+    } else if(matches.length === 1 && key === 'Enter') {
       selectCountryByTarget(liMap.get(matches[0].iso2)[0]);
     }
   });
@@ -302,7 +304,7 @@ let onFirstMount = () => {
 
   telEl.addEventListener('keypress', (e) => {
     //console.log('keypress', this.value);
-    if(!btnNext.style.visibility &&/* this.value.length >= 9 && */ e.key === 'Enter') {
+    if(!btnNext.style.visibility &&/* this.value.length >= 9 && */ getKeyFromEvent(e) === 'Enter') {
       return onSubmit();
     }
   });