Text Formatter: Keymap independent shortcuts; Global Search, Local Search: Support hotkeys (#1621)

src/components/left/LeftColumn.tsx

@@ -5,8 +5,9 @@ import { getDispatch, withGlobal } from '../../lib/teact/teactn';
 
 import { LeftColumnContent, SettingsScreens } from '../../types';
 
-import { LAYERS_ANIMATION_NAME } from '../../util/environment';
+import { IS_MAC_OS, LAYERS_ANIMATION_NAME } from '../../util/environment';
 import captureEscKeyListener from '../../util/captureEscKeyListener';
+import getKeyFromEvent from '../../util/getKeyFromEvent';
 import useFoldersReducer from '../../hooks/reducers/useFoldersReducer';
 import { useResize } from '../../hooks/useResize';
 
@@ -253,6 +254,25 @@ const LeftColumn: FC<StateProps> = ({
     [activeChatFolder, content, handleReset],
   );
 
+  useEffect(() => {
+    if (content === LeftColumnContent.GlobalSearch) {
+      return undefined;
+    }
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (((IS_MAC_OS && e.metaKey) || (!IS_MAC_OS && e.ctrlKey)) && e.shiftKey && getKeyFromEvent(e) === 'f') {
+        e.preventDefault();
+        setContent(LeftColumnContent.GlobalSearch);
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [content]);
+
   useEffect(() => {
     clearTwoFaError();
 

src/components/middle/HeaderActions.tsx

@@ -4,6 +4,7 @@ import React, {
   useRef,
   useCallback,
   useState,
+  useEffect,
 } from '../../lib/teact/teact';
 import { getDispatch, withGlobal } from '../../lib/teact/teactn';
 
@@ -11,7 +12,10 @@ import { MessageListType } from '../../global/types';
 import { MAIN_THREAD_ID } from '../../api/types';
 import { IAnchorPosition } from '../../types';
 
-import { ARE_CALLS_SUPPORTED, IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment';
+import {
+  ARE_CALLS_SUPPORTED, IS_MAC_OS, IS_PWA, IS_SINGLE_COLUMN_LAYOUT,
+} from '../../util/environment';
+import getKeyFromEvent from '../../util/getKeyFromEvent';
 import {
   isChatBasicGroup, isChatChannel, isChatSuperGroup, isUserId,
 } from '../../modules/helpers';
@@ -127,6 +131,27 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
     }
   }, [openLocalTextSearch]);
 
+  useEffect(() => {
+    if (!canSearch) {
+      return undefined;
+    }
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (
+        IS_PWA && ((IS_MAC_OS && e.metaKey) || (!IS_MAC_OS && e.ctrlKey)) && !e.shiftKey && getKeyFromEvent(e) === 'f'
+      ) {
+        e.preventDefault();
+        handleSearchClick();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [canSearch, handleSearchClick]);
+
   const lang = useLang();
 
   return (

src/components/middle/composer/TextFormatter.tsx

@@ -8,6 +8,7 @@ import { EDITABLE_INPUT_ID } from '../../../config';
 import buildClassName from '../../../util/buildClassName';
 import { ensureProtocol } from '../../../util/ensureProtocol';
 import captureEscKeyListener from '../../../util/captureEscKeyListener';
+import getKeyFromEvent from '../../../util/getKeyFromEvent';
 import useShowTransition from '../../../hooks/useShowTransition';
 import useVirtualBackdrop from '../../../hooks/useVirtualBackdrop';
 import useFlag from '../../../hooks/useFlag';
@@ -306,16 +307,16 @@ const TextFormatter: FC<OwnProps> = ({
   }
 
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    const HANDLERS_BY_KEY_CODE: Record<string, AnyToVoidFunction> = {
+    const HANDLERS_BY_KEY: Record<string, AnyToVoidFunction> = {
-      KeyK: openLinkControl,
+      k: openLinkControl,
-      KeyB: handleBoldText,
+      b: handleBoldText,
-      KeyU: handleUnderlineText,
+      u: handleUnderlineText,
-      KeyI: handleItalicText,
+      i: handleItalicText,
-      KeyM: handleMonospaceText,
+      m: handleMonospaceText,
-      KeyS: handleStrikethroughText,
+      s: handleStrikethroughText,
     };
 
-    const handler = HANDLERS_BY_KEY_CODE[e.code];
+    const handler = HANDLERS_BY_KEY[getKeyFromEvent(e)];
 
     if (
       e.altKey

src/util/getKeyFromEvent.ts

@@ -0,0 +1,5 @@
+export default function getKeyFromEvent(e: KeyboardEvent) {
+  const key = 'key' in e ? e.key : e.code;
+
+  return key.startsWith('Key') ? key.slice(3).toLowerCase() : key;
+}