Adds keyboard shortcut for editing last message sent
This commit is contained in:
Josh Perez
GitHub
parent
a1fd4e55ee
commit
216ee67c50
13 changed files with 675 additions and 550 deletions
545
ts/services/addGlobalKeyboardShortcuts.ts
Normal file
545
ts/services/addGlobalKeyboardShortcuts.ts
Normal file
|
|
@ -0,0 +1,545 @@
|
|||
// 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 {
|
||||
document.addEventListener('keydown', event => {
|
||||
const { ctrlKey, metaKey, shiftKey, altKey } = event;
|
||||
|
||||
const commandKey = window.platform === 'darwin' && metaKey;
|
||||
const controlKey = window.platform !== 'darwin' && 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<HTMLElement> = 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<HTMLElement>(
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue