Fix multiple mentions rendered incorrectly

[VNDRN]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

When rendering mentioned users, I noticed a bug. It's fine if you mention a single user in a message, but when you mention multiple, they get rendered as plain text. I dug into the code and noticed that the separator used between the mentions | is also being escaped. A fix for this is to escape the user names instead of the entire string.

Here is the diff that solved my problem:

diff --git a/node_modules/stream-chat-react-native-core/src/components/Message/MessageSimple/utils/renderText.tsx b/node_modules/stream-chat-react-native-core/src/components/Message/MessageSimple/utils/renderText.tsx
index e533655..bfaba5d 100644
--- a/node_modules/stream-chat-react-native-core/src/components/Message/MessageSimple/utils/renderText.tsx
+++ b/node_modules/stream-chat-react-native-core/src/components/Message/MessageSimple/utils/renderText.tsx
@@ -224,9 +224,9 @@ export const renderText = <
     ? mentioned_users.reduce((acc, cur) => {
         const userName = cur.name || cur.id || '';
         if (userName) {
-          acc += `${acc.length ? '|' : ''}@${userName}`;
+          acc += `${acc.length ? '|' : ''}@${userName.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&')}`;
         }
-        return acc.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        return acc;
       }, '')
     : '';

Hope this can get merged into an upcoming release.

This issue body was partially generated by patch-package.

[vishalnarkhede]

@khushal87 could you please take care of this? Please make sure to use replace instead of replaceAll. #2253

[khushal87]

Yes for sure @vishalnarkhede

[VNDRN]

Just wanted to mention (no pun intended) that when a username is an email address, it gets resolved as a link instead of a mention. Would be great if this could get fixed too 😄

[khushal87]

username is an email address; it gets resolved as a link instead of a mention

Created a new issue for this as it will need some separate attention and should not block this original issue.

[stream-ci-bot]

🎉 This issue has been resolved in version 5.20.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀