Render quoted mentions as text

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 {
-      bodyRanges,
-      i18n,
-      text,
-      attachment,
-      isIncoming,
-      openConversation,
-    } = this.props;
+    const { bodyRanges, i18n, text, attachment, isIncoming } = 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
-            disableLinks
-            text={text}
-            i18n={i18n}
-            bodyRanges={bodyRanges}
-            openConversation={openConversation}
-          />
+          <MessageBody disableLinks text={quoteText} i18n={i18n} />
         </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,