From 657327edd7dd831f488da34e24f2e8d8141d97fb Mon Sep 17 00:00:00 2001
From: kareenf <60551112+kareenf@users.noreply.github.com>
Date: Fri, 17 Apr 2020 15:45:01 -0400
Subject: [PATCH] Fixes issue where usernames that are sandwiched with
 underscores are not properly formatted [fixes #12033] (#12071)

* For some reason this file shows as modified, however I checked and it seems as though the same code chunk was 'deleted' and 'added' back in

* Added in logic to take care of issue pertaining to usernames with underscores such as @_spider_ was not showing up in the proper username format

* Added component test to test underscores in username issue

* I accidentally forgot to change the expected result to be @_user_

* Fixed strange spacing issue in profile.vue to match the original

* Another place where I needed to put _user_

* Accidentally left in describe.only in highlightUsers.spec.js,so removed .only

* Added in suggestions from @benkelaar and added in support for fixing double underscore sandwiched usernames which is Markdown's way of bolding

* Added component test to test that usernames sandwiched with double underscores are properly formatted

* Added fixes to test case input and variable mismatch in function

* Updated expect result statement to not be a user mention instance

Co-authored-by: Kareen <kareenf@umich.edu>
---
 website/client/src/libs/highlightUsers.js      |  9 ++++++---
 .../tests/unit/libs/highlightUsers.spec.js     | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/website/client/src/libs/highlightUsers.js b/website/client/src/libs/highlightUsers.js
index 89b3b4d3c8..7cd42c37b2 100644
--- a/website/client/src/libs/highlightUsers.js
+++ b/website/client/src/libs/highlightUsers.js
@@ -1,7 +1,7 @@
 import escapeRegExp from 'lodash/escapeRegExp';
 
 const optionalAnchorTagRegExStr = '(<\\w[^>]*)?'; // everything including the anchor tag is recognized
-const mentionRegExStr = '(@[\\w-]+)';
+const mentionRegExStr = '(@(?:<(?:em|strong)>)?[\\w-]+(?:<\\/(?:em|strong)>)?)';
 const optionalPostMentionRegExStr = '(\\.\\w+)?'; // like dot-TLD
 
 const finalMentionRegEx = new RegExp(`${optionalAnchorTagRegExStr}${mentionRegExStr}${optionalPostMentionRegExStr}`, 'gi');
@@ -14,9 +14,12 @@ export function highlightUsers (text, userName, displayName) { // eslint-disable
       return fullMatched;
     }
 
-    const isUserMention = currentUser.includes(mentionStr) ? 'at-highlight' : '';
+    let fixedStr = mentionStr.replace(/<\/?em>/g, '_');
+    fixedStr = fixedStr.replace(/<\/?strong>/g, '__');
 
-    return fullMatched.replace(mentionStr, `<span class="at-text ${isUserMention}">${mentionStr}</span>`);
+    const isUserMention = currentUser.includes(fixedStr) ? 'at-highlight' : '';
+
+    return fullMatched.replace(mentionStr, `<span class="at-text ${isUserMention}">${fixedStr}</span>`);
   });
 
   return text;
diff --git a/website/client/tests/unit/libs/highlightUsers.spec.js b/website/client/tests/unit/libs/highlightUsers.spec.js
index 1a36d1f1fa..9f3ba6b865 100644
--- a/website/client/tests/unit/libs/highlightUsers.spec.js
+++ b/website/client/tests/unit/libs/highlightUsers.spec.js
@@ -17,6 +17,24 @@ describe('highlightUserAndEmail', () => {
     expect(result).to.contain('<span class="at-text at-highlight">@user</span>');
   });
 
+  it('highlights username sandwiched with underscores', () => {
+    const text = 'hello @<em>user</em>';
+
+    const result = highlightUsers(text, '_user_', 'displayedUser');
+    expect(result).to.contain('<span class="at-text at-highlight">@_user_</span>');
+    expect(result).to.not.contain('<em>');
+    expect(result).to.not.contain('</em>');
+  });
+
+  it('highlights username sandwiched with double underscores', () => {
+    const text = 'hello @<strong>user</strong>';
+
+    const result = highlightUsers(text, 'diffUser', 'displayDiffUser');
+    expect(result).to.contain('<span class="at-text ">@__user__</span>');
+    expect(result).to.not.contain('<strong>');
+    expect(result).to.not.contain('</strong>');
+  });
+
   it('not highlights any email', () => {
     const text = habiticaMarkdown.render('hello@example.com');