fix: app crash when the message links have special characters in it (#…

…2318)

* fix: app crash when the message links have special characters in it

* refactor: added comments for the escapeRegExp function

package/src/components/Message/MessageSimple/utils/generateMarkdownText.test.ts

@@ -0,0 +1,23 @@
+import { generateMarkdownText } from './generateMarkdownText';
+
+describe('generateMarkdownText', () => {
+  it.each([
+    ['', null],
+    ['  test message  ', 'test message'],
+    ['https://www.getstream.io', '[https://www.getstream.io](https://www.getstream.io)'],
+    [
+      'https://getstream-production.s3-accelerate.amazonaws.com/N336903591601695/33e78ef89e64642862a75c5cca2541eaf6b1c924/trimmedVideos/alert/2_270_881/outputVideo.mp4?AWSAccessKeyId=AKIAVJAW2AD2SQVQCBXV&Expires=1699998768&Signature=zdEMCGzf4Pq++16YkPprvN5NAds=',
+      '[https://getstream-production.s3-accelerate.amazonaws.com/N336903591601695/33e78ef89e64642862a75c5cca2541eaf6b1c924/trimmedVideos/alert/2_270_881/outputVideo.mp4?AWSAccessKeyId=AKIAVJAW2AD2SQVQCBXV&...](https://getstream-production.s3-accelerate.amazonaws.com/N336903591601695/33e78ef89e64642862a75c5cca2541eaf6b1c924/trimmedVideos/alert/2_270_881/outputVideo.mp4?AWSAccessKeyId=AKIAVJAW2AD2SQVQCBXV&Expires=1699998768&Signature=zdEMCGzf4Pq++16YkPprvN5NAds=)',
+    ],
+    ['Hi @getstream.io', 'Hi @getstream.io'],
+    [
+      'Hi [email protected] @[email protected]',
+      'Hi [[email protected]](mailto:[email protected]) @[email protected]',
+    ],
+    ['Hi @getstream.io getstream.io', 'Hi @getstream.io [getstream.io](http://getstream.io)'],
+    ['Hi <Stream>', 'Hi \\<Stream\\>'],
+  ])('Returns the generated markdown text for %p and %p', (text, expected) => {
+    const result = generateMarkdownText(text);
+    expect(result).toBe(expected);
+  });
+});

package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts

@@ -2,16 +2,12 @@ import truncate from 'lodash/truncate';
 
 import { parseLinksFromText } from './parseLinks';
 
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
-import type { MessageType } from '../../../MessageList/hooks/useMessageList';
-
-export const generateMarkdownText = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  message: MessageType<StreamChatGenerics>,
-) => {
-  const { text } = message;
+// If you need to use any of the special characters literally (actually searching for a "*", for instance), you must escape it by putting a backslash in front of it.
+function escapeRegExp(text: string) {
+  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+}
 
+export const generateMarkdownText = (text?: string) => {
   if (!text) return null;
 
   // Trim the extra spaces from the text.
@@ -26,18 +22,21 @@ export const generateMarkdownText = <
       omission: '...',
     });
     // Convert raw links/emails in the text to respective markdown syntax.
-    // Eg: Hi getstream.io -> Hi [getstream.io](getstream.io).
-    const normalRegEx = new RegExp(linkInfo.raw, 'g');
+    // Eg: Hi @getstream.io -> Hi @[getstream.io](getstream.io).
+    const normalRegEx = new RegExp(escapeRegExp(linkInfo.raw), 'g');
     const markdown = `[${displayLink}](${linkInfo.encodedUrl})`;
     resultText = text.replace(normalRegEx, markdown);
 
     // After previous step, in some cases, the mentioned user after `@` might have a link/email so we convert it back to normal raw text.
     // Eg: Hi, @[[email protected]](mailto:[email protected]) to @[email protected].
-    const mentionsRegex = new RegExp(`@\\[${displayLink}\\]\\(${linkInfo.encodedUrl}\\)`, 'g');
+    const mentionsRegex = new RegExp(
+      `@\\[${escapeRegExp(displayLink)}\\]\\(${escapeRegExp(linkInfo.encodedUrl)}\\)`,
+      'g',
+    );
     resultText = resultText.replace(mentionsRegex, `@${displayLink}`);
   }
 
-  resultText = resultText.replace(/[<&"'>]/g, '\\$&');
+  resultText = resultText.replace(/[<"'>]/g, '\\$&');
 
   return resultText;
 };

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -100,8 +100,9 @@ export const renderText = <
     onPress: onPressParam,
     preventPress,
   } = params;
+  const { text } = message;
 
-  const markdownText = generateMarkdownText<StreamChatGenerics>(message);
+  const markdownText = generateMarkdownText(text);
 
   const styles: MarkdownStyle = {
     ...defaultMarkdownStyles,