From bc4f3dcd01271e08dce8dc63c4517b8c5d77bfb9 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Fri, 2 Dec 2022 19:40:33 -0500
Subject: [PATCH] Handle cmd+shift+e keyboard shortcut

---
 ts/components/conversation/TimelineItem.tsx   |  1 +
 .../conversation/TimelineMessage.tsx          | 18 +++++++++++++++
 ts/hooks/useKeyboardShortcuts.tsx             | 22 +++++++++++++++++++
 3 files changed, 41 insertions(+)

diff --git a/ts/components/conversation/TimelineItem.tsx b/ts/components/conversation/TimelineItem.tsx
index 60adb19fc..7ac032193 100644
--- a/ts/components/conversation/TimelineItem.tsx
+++ b/ts/components/conversation/TimelineItem.tsx
@@ -218,6 +218,7 @@ export class TimelineItem extends React.PureComponent<PropsType> {
         <TimelineMessage
           {...this.props}
           {...item.data}
+          isSelected={isSelected}
           shouldCollapseAbove={shouldCollapseAbove}
           shouldCollapseBelow={shouldCollapseBelow}
           shouldHideMetadata={shouldHideMetadata}
diff --git a/ts/components/conversation/TimelineMessage.tsx b/ts/components/conversation/TimelineMessage.tsx
index 5ec41ec80..29d157563 100644
--- a/ts/components/conversation/TimelineMessage.tsx
+++ b/ts/components/conversation/TimelineMessage.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import classNames from 'classnames';
+import { noop } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import type { Ref } from 'react';
 import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
@@ -25,6 +26,7 @@ import type {
 } from './Message';
 import { doesMessageBodyOverflow } from './MessageBodyReadMore';
 import type { Props as ReactionPickerProps } from './ReactionPicker';
+import { useToggleReactionPicker } from '../../hooks/useKeyboardShortcuts';
 
 export type PropsData = {
   canDownload: boolean;
@@ -33,6 +35,7 @@ export type PropsData = {
   canReact: boolean;
   canReply: boolean;
   selectedReaction?: string;
+  isSelected?: boolean;
 } & Omit<MessagePropsData, 'renderingContext' | 'menu'>;
 
 export type PropsActions = {
@@ -86,6 +89,7 @@ export function TimelineMessage(props: Props): JSX.Element {
     deleteMessageForEveryone,
     direction,
     giftBadge,
+    isSelected,
     isSticker,
     isTapToView,
     reactToMessage,
@@ -233,6 +237,20 @@ export function TimelineMessage(props: Props): JSX.Element {
 
   const handleReact = canReact ? () => toggleReactionPicker() : undefined;
 
+  const toggleReactionPickerKeyboard = useToggleReactionPicker(
+    handleReact || noop
+  );
+
+  useEffect(() => {
+    if (isSelected) {
+      document.addEventListener('keydown', toggleReactionPickerKeyboard);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', toggleReactionPickerKeyboard);
+    };
+  }, [isSelected, toggleReactionPickerKeyboard]);
+
   return (
     <>
       <Message
diff --git a/ts/hooks/useKeyboardShortcuts.tsx b/ts/hooks/useKeyboardShortcuts.tsx
index 908052b8d..ffc9228a0 100644
--- a/ts/hooks/useKeyboardShortcuts.tsx
+++ b/ts/hooks/useKeyboardShortcuts.tsx
@@ -159,6 +159,28 @@ export function useAttachFileShortcut(
   );
 }
 
+export function useToggleReactionPicker(
+  handleReact: () => unknown
+): KeyboardShortcutHandlerType {
+  return useCallback(
+    ev => {
+      const { shiftKey } = ev;
+      const key = KeyboardLayout.lookup(ev);
+
+      if (isCmdOrCtrl(ev) && shiftKey && (key === 'e' || key === 'E')) {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        handleReact();
+        return true;
+      }
+
+      return false;
+    },
+    [handleReact]
+  );
+}
+
 export function useKeyboardShortcuts(
   ...eventHandlers: Array<KeyboardShortcutHandlerType>
 ): void {