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>
This commit is contained in:
kareenf 2020-04-17 15:45:01 -04:00 committed by GitHub
parent 9706a9c8be
commit 657327edd7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 3 deletions

View file

@ -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;

View file

@ -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');