Reply to a message by double clicking on its row

ts/components/conversation/Message.tsx

@@ -1745,6 +1745,11 @@ export class Message extends React.PureComponent<Props, State> {
             : null
         )}
         dir={isRTL ? 'rtl' : undefined}
+        onDoubleClick={(event: React.MouseEvent) => {
+          // Prevent double-click interefering with interactions _inside_
+          // the bubble.
+          event.stopPropagation();
+        }}
       >
         <MessageBodyReadMore
           bodyRanges={bodyRanges}
@@ -2505,6 +2510,10 @@ export class Message extends React.PureComponent<Props, State> {
           role="row"
           onKeyDown={onKeyDown}
           onClick={this.handleClick}
+          onDoubleClick={ev => {
+            // Prevent double click from triggering the replyToMessage action
+            ev.stopPropagation();
+          }}
           tabIndex={-1}
         >
           {this.renderAuthor()}

ts/components/conversation/TimelineMessage.tsx

@@ -290,55 +290,66 @@ export function TimelineMessage(props: Props): JSX.Element {
           {i18n('deleteWarning')}
         </ConfirmationDialog>
       )}
-      <Message
+      <div
-        {...props}
+        onDoubleClick={ev => {
-        renderingContext="conversation/TimelineItem"
+          if (!handleReplyToMessage) {
-        onContextMenu={handleContextMenu}
+            return;
-        menu={
+          }
-          <Manager>
-            <MessageMenu
-              i18n={i18n}
-              triggerId={triggerId}
-              isWindowWidthNotNarrow={isWindowWidthNotNarrow}
-              direction={direction}
-              menuTriggerRef={menuTriggerRef}
-              showMenu={handleContextMenu}
-              onDownload={handleDownload}
-              onReplyToMessage={handleReplyToMessage}
-              onReact={handleReact}
-            />
 
-            {reactionPickerRoot &&
+          ev.stopPropagation();
-              createPortal(
+          ev.preventDefault();
-                <Popper
+          handleReplyToMessage();
-                  placement="top"
+        }}
-                  modifiers={[
+      >
-                    offsetDistanceModifier(4),
+        <Message
-                    popperPreventOverflowModifier(),
+          {...props}
-                  ]}
+          renderingContext="conversation/TimelineItem"
-                >
+          onContextMenu={handleContextMenu}
-                  {({ ref, style }) =>
+          menu={
-                    renderReactionPicker({
+            <Manager>
-                      ref,
+              <MessageMenu
-                      style,
+                i18n={i18n}
-                      selected: selectedReaction,
+                triggerId={triggerId}
-                      onClose: toggleReactionPicker,
+                isWindowWidthNotNarrow={isWindowWidthNotNarrow}
-                      onPick: emoji => {
+                direction={direction}
-                        toggleReactionPicker(true);
+                menuTriggerRef={menuTriggerRef}
-                        reactToMessage(id, {
+                showMenu={handleContextMenu}
-                          emoji,
+                onDownload={handleDownload}
-                          remove: emoji === selectedReaction,
+                onReplyToMessage={handleReplyToMessage}
-                        });
+                onReact={handleReact}
-                      },
+              />
-                      renderEmojiPicker,
+              {reactionPickerRoot &&
-                    })
+                createPortal(
-                  }
+                  <Popper
-                </Popper>,
+                    placement="top"
-                reactionPickerRoot
+                    modifiers={[
-              )}
+                      offsetDistanceModifier(4),
-          </Manager>
+                      popperPreventOverflowModifier(),
-        }
+                    ]}
-      />
+                  >
+                    {({ ref, style }) =>
+                      renderReactionPicker({
+                        ref,
+                        style,
+                        selected: selectedReaction,
+                        onClose: toggleReactionPicker,
+                        onPick: emoji => {
+                          toggleReactionPicker(true);
+                          reactToMessage(id, {
+                            emoji,
+                            remove: emoji === selectedReaction,
+                          });
+                        },
+                        renderEmojiPicker,
+                      })
+                    }
+                  </Popper>,
+                  reactionPickerRoot
+                )}
+            </Manager>
+          }
+        />
+      </div>
 
       <MessageContextMenu
         i18n={i18n}
@@ -412,6 +423,10 @@ function MessageMenu({
                   'module-message__buttons__menu',
                   `module-message__buttons__download--${direction}`
                 )}
+                onDoubleClick={ev => {
+                  // Prevent double click from triggering the replyToMessage action
+                  ev.stopPropagation();
+                }}
               />
             </ContextMenuTrigger>
           </StopPropagation>
@@ -455,6 +470,10 @@ function MessageMenu({
                     role="button"
                     className="module-message__buttons__react"
                     aria-label={i18n('reactToMessage')}
+                    onDoubleClick={ev => {
+                      // Prevent double click from triggering the replyToMessage action
+                      ev.stopPropagation();
+                    }}
                   />
                 );
               }}
@@ -473,6 +492,10 @@ function MessageMenu({
                 'module-message__buttons__download',
                 `module-message__buttons__download--${direction}`
               )}
+              onDoubleClick={ev => {
+                // Prevent double click from triggering the replyToMessage action
+                ev.stopPropagation();
+              }}
             />
           )}
 
@@ -494,6 +517,10 @@ function MessageMenu({
                 'module-message__buttons__reply',
                 `module-message__buttons__download--${direction}`
               )}
+              onDoubleClick={ev => {
+                // Prevent double click from triggering the replyToMessage action
+                ev.stopPropagation();
+              }}
             />
           )}
         </>