Render quoted mentions as text

js/models/messages.js

@@ -41,7 +41,7 @@
     savePackMetadata,
     getStickerPackStatus,
   } = window.Signal.Stickers;
-  const { GoogleChrome } = window.Signal.Util;
+  const { GoogleChrome, getTextWithMentions } = window.Signal.Util;
 
   const { addStickerPackReference, getMessageBySender } = window.Signal.Data;
   const { bytesFromString } = window.Signal.Crypto;
@@ -696,14 +696,6 @@
       );
     },
 
-    getTextWithMentionStrings(bodyRanges, text) {
-      return bodyRanges.reduce((str, range) => {
-        const textBegin = str.substr(0, range.start);
-        const textEnd = str.substr(range.start + range.length, str.length);
-        return `${textBegin}@${range.replacementText}${textEnd}`;
-      }, text);
-    },
-
     // Dependencies of prop-generation functions
     findAndFormatContact(identifier) {
       if (!identifier) {
@@ -1215,7 +1207,7 @@
 
       if (hasMentions) {
         const bodyRanges = this.processBodyRanges();
-        modifiedText = this.getTextWithMentionStrings(bodyRanges, modifiedText);
+        modifiedText = getTextWithMentions(bodyRanges, modifiedText);
       }
 
       // Linux emoji support is mixed, so we disable it. (Note that this doesn't touch

stylesheets/_modules.scss

@@ -5285,10 +5285,10 @@ button.module-image__border-overlay:focus {
     @include light-theme {
       background-color: $color-gray-20;
     }
+  }
 
-    @include dark-theme {
+  @include ios-dark-theme {
-      background-color: $color-gray-60;
+    background-color: $color-gray-60;
-    }
   }
 }
 

ts/components/conversation/Message.tsx

@@ -914,7 +914,6 @@ export class Message extends React.PureComponent<Props, State> {
       direction,
       disableScroll,
       i18n,
-      openConversation,
       quote,
       scrollToQuotedMessage,
     } = this.props;
@@ -951,7 +950,6 @@ export class Message extends React.PureComponent<Props, State> {
         authorColor={quoteColor}
         authorTitle={quote.authorTitle}
         bodyRanges={quote.bodyRanges}
-        openConversation={openConversation}
         referencedMessageNotFound={referencedMessageNotFound}
         isFromMe={quote.isFromMe}
         withContentAbove={withContentAbove}

ts/components/conversation/Quote.stories.tsx

@@ -104,7 +104,6 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   isIncoming: boolean('isIncoming', overrideProps.isIncoming || false),
   onClick: action('onClick'),
   onClose: action('onClose'),
-  openConversation: action('openConversation'),
   referencedMessageNotFound: boolean(
     'referencedMessageNotFound',
     overrideProps.referencedMessageNotFound || false

ts/components/conversation/Quote.tsx

@@ -8,6 +8,7 @@ import { MessageBody } from './MessageBody';
 import { BodyRangesType, LocalizerType } from '../../types/Util';
 import { ColorType } from '../../types/Colors';
 import { ContactName } from './ContactName';
+import { getTextWithMentions } from '../../util/getTextWithMentions';
 
 export interface Props {
   attachment?: QuotedAttachmentType;
@@ -23,7 +24,6 @@ export interface Props {
   withContentAbove: boolean;
   onClick?: () => void;
   onClose?: () => void;
-  openConversation: (conversationId: string, messageId?: string) => void;
   text: string;
   referencedMessageNotFound: boolean;
 }
@@ -238,16 +238,13 @@ export class Quote extends React.Component<Props, State> {
   }
 
   public renderText(): JSX.Element | null {
-    const {
+    const { bodyRanges, i18n, text, attachment, isIncoming } = this.props;
-      bodyRanges,
-      i18n,
-      text,
-      attachment,
-      isIncoming,
-      openConversation,
-    } = this.props;
 
     if (text) {
+      const quoteText = bodyRanges
+        ? getTextWithMentions(bodyRanges, text)
+        : text;
+
       return (
         <div
           dir="auto"
@@ -256,13 +253,7 @@ export class Quote extends React.Component<Props, State> {
             isIncoming ? 'module-quote__primary__text--incoming' : null
           )}
         >
-          <MessageBody
+          <MessageBody disableLinks text={quoteText} i18n={i18n} />
-            disableLinks
-            text={text}
-            i18n={i18n}
-            bodyRanges={bodyRanges}
-            openConversation={openConversation}
-          />
         </div>
       );
     }

ts/util/getTextWithMentions.ts

@@ -0,0 +1,12 @@
+import { BodyRangesType } from '../types/Util';
+
+export function getTextWithMentions(
+  bodyRanges: BodyRangesType,
+  text: string
+): string {
+  return bodyRanges.reduce((str, range) => {
+    const textBegin = str.substr(0, range.start);
+    const textEnd = str.substr(range.start + range.length, str.length);
+    return `${textBegin}@${range.replacementText}${textEnd}`;
+  }, text);
+}

ts/util/index.ts

@@ -11,6 +11,7 @@ import {
   getPlaceholder as getSafetyNumberPlaceholder,
 } from './safetyNumber';
 import { getStringForProfileChange } from './getStringForProfileChange';
+import { getTextWithMentions } from './getTextWithMentions';
 import { getUserAgent } from './getUserAgent';
 import { hasExpired } from './hasExpired';
 import { isFileDangerous } from './isFileDangerous';
@@ -30,6 +31,7 @@ export {
   generateSecurityNumber,
   getSafetyNumberPlaceholder,
   getStringForProfileChange,
+  getTextWithMentions,
   getUserAgent,
   GoogleChrome,
   hasExpired,