fix(renderText): special case @ symbol at the end of the message (#1873)

* fix: handle special case of @ symbol at the end of the message

* test: add test for special case with @ symbol

Author: arnautov-anton

src/__tests__/__snapshots__/utils.test.js.snap

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renderText handles the special case where there's at least one mention and @ symbol at the end 1`] = `
+<p>
+  <span
+    className="str-chat__message-mention"
+    data-user-id="[email protected]"
+  >
+    @[email protected]
+  </span>
+   @
+</p>
+`;
+
 exports[`renderText handles the special case where user name matches to an e-mail pattern - 1 1`] = `
 <p>
   Hello 

src/__tests__/utils.test.js

@@ -80,4 +80,12 @@ describe(`renderText`, () => {
     const tree = renderer.create(Markdown).toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it("handles the special case where there's at least one mention and @ symbol at the end", () => {
+    const Markdown = renderText('@[email protected] @', [
+      { id: '[email protected]', name: '[email protected]' },
+    ]);
+    const tree = renderer.create(Markdown).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });

src/utils.tsx

@@ -188,7 +188,7 @@ export const mentionsMarkdownPlugin = <
       if (!parent) return;
 
       const nextChild = parent.children.at(index + 1) as Element;
-      const nextChildHref = nextChild?.properties?.href as string;
+      const nextChildHref = nextChild?.properties?.href as string | undefined;
 
       if (
         node.type === 'text' &&
@@ -197,7 +197,7 @@ export const mentionsMarkdownPlugin = <
         // valid cases:   "text @", "@", " @"
         // invalid cases: "text@", "@text",
         /.?\s?@$|^@$/.test(node.value) &&
-        nextChildHref.startsWith('mailto:')
+        nextChildHref?.startsWith('mailto:')
       ) {
         const newTextValue = node.value.replace(/@$/, '');
         const username = nextChildHref.replace('mailto:', '');