From d094a9319144fb0a90e9bd95c884a814e6f35249 Mon Sep 17 00:00:00 2001 From: Vladislav Gorenkin Date: Thu, 31 Mar 2022 11:58:28 +0600 Subject: [PATCH] Fix several shortcuts not working with non-EN keyboard layouts --- ts/components/CompositionArea.tsx | 4 +++- ts/components/LeftPane.tsx | 6 ++++-- ts/components/emoji/EmojiButton.tsx | 4 +++- ts/components/leftPane/LeftPaneArchiveHelper.tsx | 6 ++++-- ts/components/leftPane/handleKeydownForSearch.ts | 7 +++++-- ts/components/stickers/StickerButton.tsx | 4 +++- 6 files changed, 22 insertions(+), 9 deletions(-) diff --git a/ts/components/CompositionArea.tsx b/ts/components/CompositionArea.tsx index 8173f74ba1..de9cbf83d7 100644 --- a/ts/components/CompositionArea.tsx +++ b/ts/components/CompositionArea.tsx @@ -56,6 +56,7 @@ import { import { MediaEditor } from './MediaEditor'; import { IMAGE_PNG } from '../types/MIME'; import { isImageTypeSupported } from '../util/GoogleChrome'; +import * as KeyboardLayout from '../services/keyboardLayout'; export type CompositionAPIType = | { @@ -451,7 +452,8 @@ export const CompositionArea = ({ // Listen for cmd/ctrl-shift-x to toggle large composition mode useEffect(() => { const handler = (e: KeyboardEvent) => { - const { key, shiftKey, ctrlKey, metaKey } = e; + const { shiftKey, ctrlKey, metaKey } = e; + const key = KeyboardLayout.lookup(e); // When using the ctrl key, `key` is `'X'`. When using the cmd key, `key` is `'x'` const xKey = key === 'x' || key === 'X'; const commandKey = get(window, 'platform') === 'darwin' && metaKey; diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index 093e058968..4f81679723 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -30,6 +30,7 @@ import { usePrevious } from '../hooks/usePrevious'; import { missingCaseError } from '../util/missingCaseError'; import type { WidthBreakpoint } from './_util'; import { getConversationListWidthBreakpoint } from './_util'; +import * as KeyboardLayout from '../services/keyboardLayout'; import { MIN_WIDTH, SNAP_WIDTH, @@ -289,10 +290,11 @@ export const LeftPane: React.FC = ({ useEffect(() => { const onKeyDown = (event: KeyboardEvent) => { - const { ctrlKey, shiftKey, altKey, metaKey, key } = event; + const { ctrlKey, shiftKey, altKey, metaKey } = event; const commandOrCtrl = OS.isMacOS() ? metaKey : ctrlKey; + const key = KeyboardLayout.lookup(event); - if (event.key === 'Escape') { + if (key === 'Escape') { const backAction = helper.getBackAction({ showInbox, startComposing, diff --git a/ts/components/emoji/EmojiButton.tsx b/ts/components/emoji/EmojiButton.tsx index d4508147de..1636cb2dda 100644 --- a/ts/components/emoji/EmojiButton.tsx +++ b/ts/components/emoji/EmojiButton.tsx @@ -10,6 +10,7 @@ import { Emoji } from './Emoji'; import type { Props as EmojiPickerProps } from './EmojiPicker'; import { EmojiPicker } from './EmojiPicker'; import type { LocalizerType } from '../../types/Util'; +import * as KeyboardLayout from '../../services/keyboardLayout'; export type OwnProps = { readonly className?: string; @@ -86,10 +87,11 @@ export const EmojiButton = React.memo( // Install keyboard shortcut to open emoji picker React.useEffect(() => { const handleKeydown = (event: KeyboardEvent) => { - const { ctrlKey, key, metaKey, shiftKey } = event; + const { ctrlKey, metaKey, shiftKey } = event; const commandKey = get(window, 'platform') === 'darwin' && metaKey; const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey; const commandOrCtrl = commandKey || controlKey; + const key = KeyboardLayout.lookup(event); // We don't want to open up if the conversation has any panels open const panels = document.querySelectorAll('.conversation .panel'); diff --git a/ts/components/leftPane/LeftPaneArchiveHelper.tsx b/ts/components/leftPane/LeftPaneArchiveHelper.tsx index 1ec99e2e78..c3465050a5 100644 --- a/ts/components/leftPane/LeftPaneArchiveHelper.tsx +++ b/ts/components/leftPane/LeftPaneArchiveHelper.tsx @@ -16,6 +16,7 @@ import type { ConversationType } from '../../state/ducks/conversations'; import { LeftPaneSearchInput } from '../LeftPaneSearchInput'; import type { LeftPaneSearchPropsType } from './LeftPaneSearchHelper'; import { LeftPaneSearchHelper } from './LeftPaneSearchHelper'; +import * as KeyboardLayout from '../../services/keyboardLayout'; type LeftPaneArchiveBasePropsType = { archivedConversations: ReadonlyArray; @@ -219,17 +220,18 @@ export class LeftPaneArchiveHelper extends LeftPaneHelper id === selectedConversationId) ) { searchInConversation(selectedConversationId); diff --git a/ts/components/leftPane/handleKeydownForSearch.ts b/ts/components/leftPane/handleKeydownForSearch.ts index 2591f44d53..20736b8c26 100644 --- a/ts/components/leftPane/handleKeydownForSearch.ts +++ b/ts/components/leftPane/handleKeydownForSearch.ts @@ -1,6 +1,8 @@ // Copyright 2021 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only +import * as KeyboardLayout from '../../services/keyboardLayout'; + export function handleKeydownForSearch( event: Readonly, { @@ -13,13 +15,14 @@ export function handleKeydownForSearch( startSearch: () => unknown; }> ): void { - const { ctrlKey, metaKey, shiftKey, key } = event; + const { ctrlKey, metaKey, shiftKey } = event; const commandKey = window.platform === 'darwin' && metaKey; const controlKey = window.platform !== 'darwin' && ctrlKey; const commandOrCtrl = commandKey || controlKey; const commandAndCtrl = commandKey && ctrlKey; + const key = KeyboardLayout.lookup(event); - if (commandOrCtrl && !commandAndCtrl && key.toLowerCase() === 'f') { + if (commandOrCtrl && !commandAndCtrl && (key === 'f' || key === 'F')) { if (!shiftKey) { startSearch(); event.preventDefault(); diff --git a/ts/components/stickers/StickerButton.tsx b/ts/components/stickers/StickerButton.tsx index d3938d28ae..37e08e10cc 100644 --- a/ts/components/stickers/StickerButton.tsx +++ b/ts/components/stickers/StickerButton.tsx @@ -14,6 +14,7 @@ import { StickerPicker } from './StickerPicker'; import { countStickers } from './lib'; import { offsetDistanceModifier } from '../../util/popperUtil'; import { themeClassName } from '../../util/theme'; +import * as KeyboardLayout from '../../services/keyboardLayout'; export type OwnProps = { readonly className?: string; @@ -151,10 +152,11 @@ export const StickerButton = React.memo( // Install keyboard shortcut to open sticker picker React.useEffect(() => { const handleKeydown = (event: KeyboardEvent) => { - const { ctrlKey, key, metaKey, shiftKey } = event; + const { ctrlKey, metaKey, shiftKey } = event; const commandKey = get(window, 'platform') === 'darwin' && metaKey; const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey; const commandOrCtrl = commandKey || controlKey; + const key = KeyboardLayout.lookup(event); // We don't want to open up if the conversation has any panels open const panels = document.querySelectorAll('.conversation .panel');