From 015d789c909c95a45326ea0dfd38d0dee1ca4956 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Wed, 1 Feb 2023 17:22:56 -0800
Subject: [PATCH] Fix mentions for messages with ASCII art characters

---
 .../conversation/AtMentionify.stories.tsx     | 41 +++++++++++--------
 ts/components/conversation/Linkify.tsx        |  2 +-
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/ts/components/conversation/AtMentionify.stories.tsx b/ts/components/conversation/AtMentionify.stories.tsx
index d4e1dcbc50..9ebc13e53e 100644
--- a/ts/components/conversation/AtMentionify.stories.tsx
+++ b/ts/components/conversation/AtMentionify.stories.tsx
@@ -4,7 +4,6 @@
 import * as React from 'react';
 
 import { action } from '@storybook/addon-actions';
-import { select, text } from '@storybook/addon-knobs';
 
 import type { Props } from './AtMentionify';
 import { AtMentionify } from './AtMentionify';
@@ -15,13 +14,9 @@ export default {
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   bodyRanges: overrideProps.bodyRanges,
-  direction: select(
-    'direction',
-    { incoming: 'incoming', outgoing: 'outgoing' },
-    overrideProps.direction || 'incoming'
-  ),
+  direction: overrideProps.direction || 'incoming',
   showConversation: action('showConversation'),
-  text: text('text', overrideProps.text || ''),
+  text: overrideProps.text || '',
 });
 
 export function NoMentions(): JSX.Element {
@@ -32,10 +27,6 @@ export function NoMentions(): JSX.Element {
   return <AtMentionify {...props} />;
 }
 
-NoMentions.story = {
-  name: 'No @mentions',
-};
-
 export function MultipleMentions(): JSX.Element {
   const bodyRanges = [
     {
@@ -69,10 +60,6 @@ export function MultipleMentions(): JSX.Element {
   return <AtMentionify {...props} />;
 }
 
-MultipleMentions.story = {
-  name: 'Multiple @Mentions',
-};
-
 export function ComplexMentions(): JSX.Element {
   const bodyRanges = [
     {
@@ -109,6 +96,24 @@ export function ComplexMentions(): JSX.Element {
   return <AtMentionify {...props} />;
 }
 
-ComplexMentions.story = {
-  name: 'Complex @mentions',
-};
+export function WithOddCharacter(): JSX.Element {
+  const bodyRanges = [
+    {
+      start: 4,
+      length: 1,
+      mentionUuid: 'ope',
+      replacementText: 'Zero Cool',
+      conversationID: 'x',
+    },
+  ];
+
+  const props = createProps({
+    bodyRanges,
+    text: AtMentionify.preprocessMentions(
+      'Hey \uFFFC - Check out │https://www.signal.org│',
+      bodyRanges
+    ),
+  });
+
+  return <AtMentionify {...props} />;
+}
diff --git a/ts/components/conversation/Linkify.tsx b/ts/components/conversation/Linkify.tsx
index bad73069fe..e7dad0d90d 100644
--- a/ts/components/conversation/Linkify.tsx
+++ b/ts/components/conversation/Linkify.tsx
@@ -332,7 +332,7 @@ export class Linkify extends React.Component<Props> {
     const { text, renderNonLink = defaultRenderNonLink } = this.props;
 
     if (!shouldLinkifyMessage(text)) {
-      return text;
+      return renderNonLink({ text, key: 1 });
     }
 
     const chunkData: Array<{