Replace mentions with text when forwarding

Co-authored-by: Scott Nonnenberg <scott@signal.org>

ts/state/selectors/message.ts

@@ -38,6 +38,7 @@ import type { EmbeddedContactType } from '../../types/EmbeddedContact';
 import { embeddedContactSelector } from '../../types/EmbeddedContact';
 import type { AssertProps, BodyRangesType } from '../../types/Util';
 import type { LinkPreviewType } from '../../types/message/LinkPreviews';
+import { getMentionsRegex } from '../../types/Message';
 import { CallMode } from '../../types/Calling';
 import { SignalService as Proto } from '../../protobuf';
 import type { AttachmentType } from '../../types/Attachment';
@@ -705,7 +706,7 @@ function getTextAttachment(
 }
 
 export function cleanBodyForDirectionCheck(text: string): string {
-  const MENTIONS_REGEX = /\uFFFC/g;
+  const MENTIONS_REGEX = getMentionsRegex();
   const EMOJI_REGEX = emojiRegex();
   const initial = text.replace(MENTIONS_REGEX, '').replace(EMOJI_REGEX, '');
 

ts/state/smart/ForwardMessageModal.tsx

@@ -10,7 +10,11 @@ import * as log from '../../logging/log';
 import { ForwardMessageModal } from '../../components/ForwardMessageModal';
 import { LinkPreviewSourceType } from '../../types/LinkPreview';
 import { ToastMessageBodyTooLong } from '../../components/ToastMessageBodyTooLong';
-import { getAllComposableConversations } from '../selectors/conversations';
+import type { GetConversationByIdType } from '../selectors/conversations';
+import {
+  getAllComposableConversations,
+  getConversationSelector,
+} from '../selectors/conversations';
 import { getEmojiSkinTone } from '../selectors/items';
 import { getIntl, getTheme, getRegionCode } from '../selectors/user';
 import { getLinkPreview } from '../selectors/linkPreviews';
@@ -27,6 +31,29 @@ import { useActions as useEmojiActions } from '../ducks/emojis';
 import { useActions as useItemsActions } from '../ducks/items';
 import { useGlobalModalActions } from '../ducks/globalModals';
 import { useLinkPreviewActions } from '../ducks/linkPreviews';
+import { processBodyRanges } from '../selectors/message';
+import { getTextWithMentions } from '../../util/getTextWithMentions';
+
+function renderMentions(
+  message: ForwardMessagePropsType,
+  conversationSelector: GetConversationByIdType
+): string | undefined {
+  const { text } = message;
+
+  if (!text) {
+    return text;
+  }
+
+  const bodyRanges = processBodyRanges(message, {
+    conversationSelector,
+  });
+
+  if (bodyRanges && bodyRanges.length) {
+    return getTextWithMentions(bodyRanges, text);
+  }
+
+  return text;
+}
 
 export function SmartForwardMessageModal(): JSX.Element | null {
   const forwardMessageProps = useSelector<
@@ -35,6 +62,7 @@ export function SmartForwardMessageModal(): JSX.Element | null {
   >(state => state.globalModals.forwardMessageProps);
   const candidateConversations = useSelector(getAllComposableConversations);
   const getPreferredBadge = useSelector(getPreferredBadgeSelector);
+  const getConversation = useSelector(getConversationSelector);
   const i18n = useSelector(getIntl);
   const linkPreviewForSource = useSelector(getLinkPreview);
   const recentEmojis = useSelector(selectRecentEmojis);
@@ -58,6 +86,8 @@ export function SmartForwardMessageModal(): JSX.Element | null {
     toggleForwardMessageModal();
   }
 
+  const cleanedBody = renderMentions(forwardMessageProps, getConversation);
+
   return (
     <ForwardMessageModal
       attachments={attachments}
@@ -96,7 +126,7 @@ export function SmartForwardMessageModal(): JSX.Element | null {
       linkPreview={linkPreviewForSource(
         LinkPreviewSourceType.ForwardMessageModal
       )}
-      messageBody={forwardMessageProps.text}
+      messageBody={cleanedBody}
       onClose={closeModal}
       onEditorStateChange={(
         messageText: string,

ts/types/Message.ts

@@ -7,6 +7,10 @@ import type { AttachmentType } from './Attachment';
 import type { EmbeddedContactType } from './EmbeddedContact';
 import type { IndexableBoolean, IndexablePresence } from './IndexedDB';
 
+export function getMentionsRegex(): RegExp {
+  return /\uFFFC/g;
+}
+
 export type Message = (
   | UserMessage
   | VerifiedChangeMessage

ts/types/VisualAttachment.ts

@@ -127,7 +127,7 @@ export function makeVideoScreenshot({
       strictAssert(context, 'Failed to get canvas context');
       context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
-      video.addEventListener('loadeddata', seek);
+      video.removeEventListener('loadeddata', seek);
       video.removeEventListener('seeked', capture);
 
       try {