Merge signalapp/Signal-Desktop#6500

ts/components/conversation/Message.tsx

@@ -193,6 +193,7 @@ export enum GiftBadgeStates {
   Opened = 'Opened',
   Redeemed = 'Redeemed',
 }
+
 export type GiftBadgeType = {
   expiration: number;
   id: string | undefined;
@@ -390,6 +391,8 @@ export class Message extends React.PureComponent<Props, State> {
     current: false,
   };
 
+  private metadataRef: React.RefObject<HTMLDivElement> = React.createRef();
+
   public reactionsContainerRefMerger = createRefMerger();
 
   public expirationCheckInterval: NodeJS.Timeout | undefined;
@@ -823,6 +826,7 @@ export class Message extends React.PureComponent<Props, State> {
         isTapToViewExpired={isTapToViewExpired}
         onWidthMeasured={isInline ? this.updateMetadataWidth : undefined}
         pushPanelForConversation={pushPanelForConversation}
+        ref={this.metadataRef}
         retryMessageSend={retryMessageSend}
         showEditHistoryModal={showEditHistoryModal}
         status={status}
@@ -1779,7 +1783,7 @@ export class Message extends React.PureComponent<Props, State> {
     }
 
     return (
-      <div
+      <div // eslint-disable-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         className={classNames(
           'module-message__text',
           `module-message__text--${direction}`,
@@ -1790,6 +1794,18 @@ export class Message extends React.PureComponent<Props, State> {
             ? 'module-message__text--delete-for-everyone'
             : null
         )}
+        onClick={e => {
+          // Prevent metadata from being selected on triple clicks.
+          const clickCount = e.detail;
+          const range = window.getSelection()?.getRangeAt(0);
+          if (
+            clickCount === 3 &&
+            this.metadataRef.current &&
+            range?.intersectsNode(this.metadataRef.current)
+          ) {
+            range.setEndBefore(this.metadataRef.current);
+          }
+        }}
         onDoubleClick={(event: React.MouseEvent) => {
           // Prevent double-click interefering with interactions _inside_
           // the bubble.

ts/components/conversation/MessageMetadata.tsx

@@ -1,8 +1,8 @@
 // Copyright 2018 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { ReactChild, ReactElement } from 'react';
-import React, { useCallback, useState } from 'react';
+import type { ReactChild } from 'react';
+import React, { forwardRef, useCallback, useState } from 'react';
 import classNames from 'classnames';
 import type { ContentRect } from 'react-measure';
 import Measure from 'react-measure';
@@ -16,6 +16,7 @@ import { MessageTimestamp } from './MessageTimestamp';
 import { PanelType } from '../../types/Panels';
 import { Spinner } from '../Spinner';
 import { ConfirmationDialog } from '../ConfirmationDialog';
+import { refMerger } from '../../util/refMerger';
 
 type PropsType = {
   deletedForEveryone?: boolean;
@@ -43,7 +44,9 @@ enum ConfirmationType {
   EditError = 'EditError',
 }
 
-export function MessageMetadata({
+export const MessageMetadata = forwardRef<HTMLDivElement, Readonly<PropsType>>(
+  function MessageMetadataInner(
+    {
       deletedForEveryone,
       direction,
       expirationLength,
@@ -63,11 +66,15 @@ export function MessageMetadata({
       status,
       textPending,
       timestamp,
-}: Readonly<PropsType>): ReactElement {
+    },
+    ref
+  ) {
     const [confirmationType, setConfirmationType] = useState<
       ConfirmationType | undefined
     >();
-  const withImageNoCaption = Boolean(!isSticker && !hasText && isShowingImage);
+    const withImageNoCaption = Boolean(
+      !isSticker && !hasText && isShowingImage
+    );
     const metadataDirection = isSticker ? undefined : direction;
 
     let timestampNode: ReactChild;
@@ -257,7 +264,7 @@ export function MessageMetadata({
       return (
         <Measure bounds onResize={onResize}>
           {({ measureRef }) => (
-          <div className={className} ref={measureRef}>
+            <div className={className} ref={refMerger(measureRef, ref)}>
               {children}
             </div>
           )}
@@ -265,5 +272,10 @@ export function MessageMetadata({
       );
     }
 
-  return <div className={className}>{children}</div>;
-}
+    return (
+      <div className={className} ref={ref}>
+        {children}
+      </div>
+    );
+  }
+);

ts/util/lint/exceptions.json

@@ -2391,6 +2391,14 @@
     "updated": "2021-03-05T19:57:01.431Z",
     "reasonDetail": "Used for propagating click from the Message to MessageAudio's button"
   },
+  {
+    "rule": "React-createRef",
+    "path": "ts/components/conversation/Message.tsx",
+    "line": "  private metadataRef: React.RefObject<HTMLDivElement> = React.createRef();",
+    "reasonCategory": "usageTrusted",
+    "updated": "2023-06-30T22:12:49.259Z",
+    "reasonDetail": "Used for excluding the message metadata from triple-click selections."
+  },
   {
     "rule": "React-useRef",
     "path": "ts/components/conversation/MessageDetail.tsx",