[GH-5915] Clicking on @mention of a user in a post shows the profile popover (#6129)

* post message at-mention profile pop-over

* remove hover effect to special mentions

* make non-clickable the non-existing at-mention username

* fix "video call" position

* use usernameMap instead of initially defined liteUsernameMap

* update per comments

1 files changed, 7 insertions, 3 deletions

diff --git a/webapp/utils/text_formatting.jsx b/webapp/utils/text_formatting.jsx
index c2c71a4e1..bd718b363 100644
--- a/webapp/utils/text_formatting.jsx
+++ b/webapp/utils/text_formatting.jsx
@@ -166,8 +166,13 @@ export function autolinkAtMentions(text, tokens, usernameMap) {
         const index = tokens.size;
         const alias = `$MM_ATMENTION${index}`;
 
+        let tokenValue = `<span data-mention='${username}'><a class='mention-link' href='#'>${mention}</a></span>`;
+        if (Constants.SPECIAL_MENTIONS.indexOf(username) >= 0) {
+            tokenValue = mention;
+        }
+
         tokens.set(alias, {
-            value: `<a class='mention-link' href='#' data-mention='${username}'>${mention}</a>`,
+            value: tokenValue,
             originalText: mention
         });
         return alias;
@@ -181,8 +186,7 @@ export function autolinkAtMentions(text, tokens, usernameMap) {
             const truncated = usernameLower.substring(0, c);
             const suffix = usernameLower.substring(c);
 
-            // If we've found a username or run out of punctuation to trim off, render it as an at mention
-            if (mentionExists(truncated) || !punctuation.test(truncated[truncated.length - 1])) {
+            if (mentionExists(truncated) && (c === usernameLower.length || punctuation.test(usernameLower[c]))) {
                 const alias = addToken(truncated, '@' + truncated);
                 return prefix + alias + suffix;
             }