// Copyright 2023 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only import * as KeyboardLayout from './keyboardLayout'; import * as log from '../logging/log'; import { PanelType } from '../types/Panels'; import { clearConversationDraftAttachments } from '../util/clearConversationDraftAttachments'; import { drop } from '../util/drop'; import { focusableSelectors } from '../util/focusableSelectors'; import { getQuotedMessageSelector } from '../state/selectors/composer'; import { removeLinkPreview } from './LinkPreview'; export function addGlobalKeyboardShortcuts(): void { const isMacOS = window.platform === 'darwin'; document.addEventListener('keydown', event => { const { ctrlKey, metaKey, shiftKey, altKey } = event; const commandKey = isMacOS && metaKey; const controlKey = !isMacOS && ctrlKey; const commandOrCtrl = commandKey || controlKey; const state = window.reduxStore.getState(); const { selectedConversationId } = state.conversations; const conversation = window.ConversationController.get( selectedConversationId ); const key = KeyboardLayout.lookup(event); // NAVIGATION // Show keyboard shortcuts - handled by Electron-managed keyboard shortcuts // However, on linux Ctrl+/ selects all text, so we prevent that if (commandOrCtrl && !altKey && key === '/') { window.Events.showKeyboardShortcuts(); event.stopPropagation(); event.preventDefault(); return; } // Super tab :) if ( (commandOrCtrl && key === 'F6') || (commandOrCtrl && !shiftKey && (key === 't' || key === 'T')) ) { window.enterKeyboardMode(); const focusedElement = document.activeElement; const targets: Array = Array.from( document.querySelectorAll('[data-supertab="true"]') ); const focusedIndex = targets.findIndex(target => { if (!target || !focusedElement) { return false; } if (target === focusedElement) { return true; } if (target.contains(focusedElement)) { return true; } return false; }); const lastIndex = targets.length - 1; const increment = shiftKey ? -1 : 1; let index; if (focusedIndex < 0 || focusedIndex >= lastIndex) { index = 0; } else { index = focusedIndex + increment; } while (!targets[index]) { index += increment; if (index > lastIndex || index < 0) { index = 0; } } const node = targets[index]; const firstFocusableElement = node.querySelectorAll( focusableSelectors.join(',') )[0]; if (firstFocusableElement) { firstFocusableElement.focus(); } else { const nodeInfo = Array.from(node.attributes) .map(attr => `${attr.name}=${attr.value}`) .join(','); log.warn( `supertab: could not find focus for DOM node ${node.nodeName}<${nodeInfo}>` ); window.enterMouseMode(); const { activeElement } = document; if ( activeElement && 'blur' in activeElement && typeof activeElement.blur === 'function' ) { activeElement.blur(); } } } // Cancel out of keyboard shortcut screen - has first precedence const isShortcutGuideModalVisible = window.reduxStore ? window.reduxStore.getState().globalModals.isShortcutGuideModalVisible : false; if (isShortcutGuideModalVisible && key === 'Escape') { window.reduxActions.globalModals.closeShortcutGuideModal(); event.preventDefault(); event.stopPropagation(); return; } // Escape is heavily overloaded - here we avoid clashes with other Escape handlers if (key === 'Escape') { // Check origin - if within a react component which handles escape, don't handle. // Why? Because React's synthetic events can cause events to be handled twice. const target = document.activeElement; // We might want to use NamedNodeMap.getNamedItem('class') /* eslint-disable @typescript-eslint/no-explicit-any */ if ( target && target.attributes && (target.attributes as any).class && (target.attributes as any).class.value ) { const className = (target.attributes as any).class.value; /* eslint-enable @typescript-eslint/no-explicit-any */ // Search box wants to handle events internally if (className.includes('LeftPaneSearchInput__input')) { return; } } // These add listeners to document, but we'll run first const confirmationModal = document.querySelector( '.module-confirmation-dialog__overlay' ); if (confirmationModal) { return; } const emojiPicker = document.querySelector('.module-emoji-picker'); if (emojiPicker) { return; } const lightBox = document.querySelector('.Lightbox'); if (lightBox) { return; } const stickerPicker = document.querySelector('.module-sticker-picker'); if (stickerPicker) { return; } const stickerPreview = document.querySelector( '.module-sticker-manager__preview-modal__overlay' ); if (stickerPreview) { return; } const reactionViewer = document.querySelector('.module-reaction-viewer'); if (reactionViewer) { return; } const reactionPicker = document.querySelector('.module-ReactionPicker'); if (reactionPicker) { return; } const contactModal = document.querySelector('.module-contact-modal'); if (contactModal) { return; } const modalHost = document.querySelector('.module-modal-host__overlay'); if (modalHost) { return; } } // Send Escape to active conversation so it can close panels if (conversation && key === 'Escape') { window.reduxActions.conversations.popPanelForConversation(); event.preventDefault(); event.stopPropagation(); return; } // Preferences - handled by Electron-managed keyboard shortcuts // Open the top-right menu for current conversation if ( conversation && commandOrCtrl && shiftKey && (key === 'l' || key === 'L') ) { const button = document.querySelector( '.module-ConversationHeader__button--more' ); if (!button) { return; } // Because the menu is shown at a location based on the initiating click, we need // to fake up a mouse event to get the menu to show somewhere other than (0,0). const { x, y, width, height } = button.getBoundingClientRect(); const mouseEvent = document.createEvent('MouseEvents'); // Types do not match signature /* eslint-disable @typescript-eslint/no-explicit-any */ mouseEvent.initMouseEvent( 'click', true, // bubbles false, // cancelable null as any, // view null as any, // detail 0, // screenX, 0, // screenY, x + width / 2, y + height / 2, false, // ctrlKey, false, // altKey, false, // shiftKey, false, // metaKey, false as any, // button, document.body ); /* eslint-enable @typescript-eslint/no-explicit-any */ button.dispatchEvent(mouseEvent); event.preventDefault(); event.stopPropagation(); return; } // Focus composer field if ( conversation && commandOrCtrl && shiftKey && (key === 't' || key === 'T') ) { window.reduxActions.composer.setComposerFocus(conversation.id); event.preventDefault(); event.stopPropagation(); return; } if ( conversation && commandOrCtrl && !shiftKey && (key === 'j' || key === 'J') ) { window.enterKeyboardMode(); const item: HTMLElement | null = document.querySelector( '.module-last-seen-indicator ~ div .module-message' ) || document.querySelector( '.module-timeline__last-message .module-message' ); item?.focus(); } // Open all media if ( conversation && commandOrCtrl && shiftKey && (key === 'm' || key === 'M') ) { window.reduxActions.conversations.pushPanelForConversation({ type: PanelType.AllMedia, }); event.preventDefault(); event.stopPropagation(); return; } // Open emoji picker - handled by component // Open sticker picker - handled by component // Begin recording voice note - handled by component // Archive or unarchive conversation if ( conversation && !conversation.get('isArchived') && commandOrCtrl && shiftKey && (key === 'a' || key === 'A') ) { event.preventDefault(); event.stopPropagation(); window.reduxActions.conversations.onArchive(conversation.id); // It's very likely that the act of archiving a conversation will set focus to // 'none,' or the top-level body element. This resets it to the left pane. if (document.activeElement === document.body) { const leftPaneEl: HTMLElement | null = document.querySelector( '.module-left-pane__list' ); if (leftPaneEl) { leftPaneEl.focus(); } } return; } if ( conversation && conversation.get('isArchived') && commandOrCtrl && shiftKey && (key === 'u' || key === 'U') ) { event.preventDefault(); event.stopPropagation(); window.reduxActions.conversations.onMoveToInbox(conversation.id); return; } // Scroll to bottom of list - handled by component // Scroll to top of list - handled by component // Close conversation if ( conversation && commandOrCtrl && shiftKey && (key === 'c' || key === 'C') ) { event.preventDefault(); event.stopPropagation(); window.reduxActions.conversations.onConversationClosed( conversation.id, 'keyboard shortcut close' ); window.reduxActions.conversations.showConversation({ conversationId: undefined, messageId: undefined, }); return; } // MESSAGES // Show message details if ( conversation && commandOrCtrl && !shiftKey && (key === 'd' || key === 'D') ) { event.preventDefault(); event.stopPropagation(); const { targetedMessage } = state.conversations; if (!targetedMessage) { return; } window.reduxActions.conversations.pushPanelForConversation({ type: PanelType.MessageDetails, args: { messageId: targetedMessage, }, }); return; } // Toggle reply to message if ( conversation && commandOrCtrl && shiftKey && (key === 'r' || key === 'R') ) { event.preventDefault(); event.stopPropagation(); const { targetedMessage } = state.conversations; const quotedMessageSelector = getQuotedMessageSelector(state); const quote = quotedMessageSelector(conversation.id); window.reduxActions.composer.setQuoteByMessageId( conversation.id, quote ? undefined : targetedMessage ); return; } // Save attachment if ( conversation && commandOrCtrl && !shiftKey && (key === 's' || key === 'S') ) { event.preventDefault(); event.stopPropagation(); const { targetedMessage } = state.conversations; if (targetedMessage) { window.reduxActions.conversations.saveAttachmentFromMessage( targetedMessage ); return; } } if ( conversation && commandOrCtrl && shiftKey && (key === 'd' || key === 'D') ) { const { forwardMessagesProps } = state.globalModals; const { targetedMessage, selectedMessageIds } = state.conversations; const messageIds = selectedMessageIds ?? (targetedMessage != null ? [targetedMessage] : null); if (forwardMessagesProps == null && messageIds != null) { event.preventDefault(); event.stopPropagation(); window.reduxActions.globalModals.toggleDeleteMessagesModal({ conversationId: conversation.id, messageIds, onDelete() { if (selectedMessageIds != null) { window.reduxActions.conversations.toggleSelectMode(false); } }, }); return; } } if ( conversation && commandOrCtrl && shiftKey && (key === 's' || key === 'S') ) { const { hasConfirmationModal } = state.globalModals; const { targetedMessage, selectedMessageIds } = state.conversations; const messageIds = selectedMessageIds ?? (targetedMessage != null ? [targetedMessage] : null); if (!hasConfirmationModal && messageIds != null) { event.preventDefault(); event.stopPropagation(); window.reduxActions.globalModals.toggleForwardMessagesModal( messageIds, () => { if (selectedMessageIds != null) { window.reduxActions.conversations.toggleSelectMode(false); } } ); return; } } // COMPOSER // Create a newline in your message - handled by component // Expand composer - handled by component // Send in expanded composer - handled by component // Attach file // hooks/useKeyboardShorcuts useAttachFileShortcut // Remove draft link preview if ( conversation && commandOrCtrl && !shiftKey && (key === 'p' || key === 'P') ) { removeLinkPreview(conversation.id); event.preventDefault(); event.stopPropagation(); return; } // Attach file if ( conversation && commandOrCtrl && shiftKey && (key === 'p' || key === 'P') ) { drop( clearConversationDraftAttachments( conversation.id, conversation.get('draftAttachments') ) ); event.preventDefault(); event.stopPropagation(); // Commented out because this is the last item // return; } }); }