fix emails in chat (#10912)

* additional regex checks to ignore the <tag attribute="content">

* extract highlightUsers method - add test

* refactor highlight regex

* refactor the regex without `lookbehind`

* remove unneeded regex

test/client/unit/specs/libs/highlightUsers.js

@@ -0,0 +1,32 @@
+import {highlightUsers} from '../../../../../website/client/libs/highlightUsers';
+import habiticaMarkdown from 'habitica-markdown';
+
+describe('highlightUserAndEmail', () => {
+  it('highlights displayname', () => {
+    const text = 'hello @displayedUser';
+
+    const result = highlightUsers(text, 'user', 'displayedUser');
+    expect(result).to.contain('<span class="at-highlight at-text">@displayedUser</span>');
+  });
+
+  it('highlights username', () => {
+    const text = 'hello @user';
+
+    const result = highlightUsers(text, 'user', 'displayedUser');
+    expect(result).to.contain('<span class="at-highlight at-text">@user</span>');
+  });
+
+  it('highlights email with username', () => {
+    const text = habiticaMarkdown.render('hello hello@user.com');
+
+    const result = highlightUsers(text, 'user', 'displayedUser');
+    expect(result).to.contain('>hello<span class="at-highlight at-text">@user</span>.com</a>');
+  });
+
+  it('highlights any mention', () => {
+    const text = habiticaMarkdown.render('hello y.@user.com other words');
+
+    const result = highlightUsers(text, 'test', 'displayedUser');
+    expect(result).to.contain('<span class="at-text">@user</span>');
+  });
+});

website/client/components/chat/chatCard.vue

@@ -129,6 +129,7 @@ import copyIcon from 'assets/svg/copy.svg';
 import likeIcon from 'assets/svg/like.svg';
 import likedIcon from 'assets/svg/liked.svg';
 import reportIcon from 'assets/svg/report.svg';
+import {highlightUsers} from '../../libs/highlightUsers';
 
 export default {
   props: ['msg', 'inbox', 'groupId'],
@@ -238,24 +239,7 @@ export default {
       });
     },
     atHighlight (text) {
-      const escapedDisplayName = escapeRegExp(this.user.profile.name);
+      return highlightUsers(text, this.user.auth.local.username, this.user.profile.name);
-      const escapedUsername = escapeRegExp(this.user.auth.local.username);
-      const userRegex = new RegExp(`@(${escapedDisplayName}|${escapedUsername})(?:\\b)`, 'gi');
-      const atRegex = new RegExp(/(?!\b)@[\w-]+/g);
-
-      if (userRegex.test(text)) {
-        text = text.replace(userRegex, match => {
-          return `<span class="at-highlight at-text">${match}</span>`;
-        });
-      }
-
-      if (atRegex.test(text)) {
-        text = text.replace(atRegex, match => {
-          return `<span class="at-text">${match}</span>`;
-        });
-      }
-
-      return text;
     },
     parseMarkdown (text) {
       return habiticaMarkdown.render(text);

website/client/libs/highlightUsers.js

@@ -0,0 +1,18 @@
+export function highlightUsers (text, userName, displayName) {
+  const findAnyMentionRegex = '@[\\w-]+(?:\\b)';
+
+  const atRegex = new RegExp(`${findAnyMentionRegex}`, 'gi');
+  const currentUser = [`@${userName}`, `@${displayName}`];
+
+  if (atRegex.test(text)) {
+    text = text.replace(atRegex, match => {
+      if (currentUser.includes(match)) {
+        return `<span class="at-highlight at-text">${match}</span>`;
+      }
+
+      return `<span class="at-text">${match}</span>`;
+    });
+  }
+
+  return text;
+}