From c218b8d56c6e76c32233313b8c5c75c6354e514d Mon Sep 17 00:00:00 2001 From: Bart Enkelaar Date: Sat, 9 May 2020 20:04:14 +0200 Subject: [PATCH] Issue 12033 - Use version of habitica-markdown that includes mentions (#12089) * Issue 12033 - Use version of habitica-markdown that includes mention plugin Also fixes frontend parts of 11504 and 10924 * Issue 12033 - Reduce duplication in chatCard & messageCard * Issue 12033 - Use habitica-markdown version 2.0.0 * Issue 12033 - Use new entry point and fix tests * Issue 12033 - Rename renderMarkdown to renderWithMentions --- package-lock.json | 6 +-- package.json | 2 +- website/client/package-lock.json | 6 +-- website/client/package.json | 2 +- .../client/src/components/chat/chatCard.vue | 11 ++--- .../src/components/messages/messageCard.vue | 11 ++--- website/client/src/libs/highlightUsers.js | 26 ------------ website/client/src/libs/renderWithMentions.js | 7 ++++ ...ers.spec.js => renderWithMentions.spec.js} | 40 +++++++++++-------- 9 files changed, 44 insertions(+), 67 deletions(-) delete mode 100644 website/client/src/libs/highlightUsers.js create mode 100644 website/client/src/libs/renderWithMentions.js rename website/client/tests/unit/libs/{highlightUsers.spec.js => renderWithMentions.spec.js} (54%) diff --git a/package-lock.json b/package-lock.json index b4514dd4d8..a28fa731c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7379,9 +7379,9 @@ } }, "habitica-markdown": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/habitica-markdown/-/habitica-markdown-1.4.0.tgz", - "integrity": "sha512-hklG3eBILNbx/VxGeRxuk+/RiWWllcd5QLNv7Kvm2wGBRTeK9c3my2eusGuHXkwStEFGxjJD5e0iMO47cGPxYw==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/habitica-markdown/-/habitica-markdown-2.0.0.tgz", + "integrity": "sha512-70Kl/d7v1d2Rz6TFkQQ9hYcBYGAHnIPbRgS3PrW/dD/GGpN42q6gT3sCLsIpLqEXbN0EWjVscGs2qKWYLc6BMQ==", "requires": { "habitica-markdown-emoji": "1.2.4", "markdown-it": "10.0.0", diff --git a/package.json b/package.json index 1250b25a9a..c3ff4a8e1d 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "gulp-imagemin": "^6.2.0", "gulp-nodemon": "^2.5.0", "gulp.spritesmith": "^6.9.0", - "habitica-markdown": "^1.4.0", + "habitica-markdown": "^2.0.0", "helmet": "^3.22.0", "image-size": "^0.8.3", "in-app-purchase": "^1.11.3", diff --git a/website/client/package-lock.json b/website/client/package-lock.json index 7139937497..4f6069389e 100644 --- a/website/client/package-lock.json +++ b/website/client/package-lock.json @@ -11676,9 +11676,9 @@ } }, "habitica-markdown": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/habitica-markdown/-/habitica-markdown-1.4.0.tgz", - "integrity": "sha512-hklG3eBILNbx/VxGeRxuk+/RiWWllcd5QLNv7Kvm2wGBRTeK9c3my2eusGuHXkwStEFGxjJD5e0iMO47cGPxYw==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/habitica-markdown/-/habitica-markdown-2.0.0.tgz", + "integrity": "sha512-70Kl/d7v1d2Rz6TFkQQ9hYcBYGAHnIPbRgS3PrW/dD/GGpN42q6gT3sCLsIpLqEXbN0EWjVscGs2qKWYLc6BMQ==", "requires": { "habitica-markdown-emoji": "1.2.4", "markdown-it": "10.0.0", diff --git a/website/client/package.json b/website/client/package.json index c814c230fa..bd91206461 100644 --- a/website/client/package.json +++ b/website/client/package.json @@ -36,7 +36,7 @@ "eslint-config-habitrpg": "^6.2.0", "eslint-plugin-mocha": "^5.3.0", "eslint-plugin-vue": "^6.2.2", - "habitica-markdown": "^1.4.0", + "habitica-markdown": "^2.0.0", "hellojs": "^1.18.4", "inspectpack": "^4.4.0", "intro.js": "^2.9.3", diff --git a/website/client/src/components/chat/chatCard.vue b/website/client/src/components/chat/chatCard.vue index eaa4b9c919..473c5180ce 100644 --- a/website/client/src/components/chat/chatCard.vue +++ b/website/client/src/components/chat/chatCard.vue @@ -34,7 +34,7 @@
{ // eslint-disable-line no-param-reassign, max-len - if ((preMention && preMention.includes('/g, '_'); - fixedStr = fixedStr.replace(/<\/?strong>/g, '__'); - - const isUserMention = currentUser.includes(fixedStr) ? 'at-highlight' : ''; - - return fullMatched.replace(mentionStr, `${fixedStr}`); - }); - - return text; -} diff --git a/website/client/src/libs/renderWithMentions.js b/website/client/src/libs/renderWithMentions.js new file mode 100644 index 0000000000..e5e86fcdf3 --- /dev/null +++ b/website/client/src/libs/renderWithMentions.js @@ -0,0 +1,7 @@ +import habiticaMarkdown from 'habitica-markdown/withMentions'; + +export default function renderWithMentions (text, user) { + if (!text) return null; + const env = { userName: user.auth.local.username, displayName: user.profile.name }; + return habiticaMarkdown.render(String(text), env); +} diff --git a/website/client/tests/unit/libs/highlightUsers.spec.js b/website/client/tests/unit/libs/renderWithMentions.spec.js similarity index 54% rename from website/client/tests/unit/libs/highlightUsers.spec.js rename to website/client/tests/unit/libs/renderWithMentions.spec.js index 9f3ba6b865..bb5b9a6a1b 100644 --- a/website/client/tests/unit/libs/highlightUsers.spec.js +++ b/website/client/tests/unit/libs/renderWithMentions.spec.js @@ -1,11 +1,20 @@ -import habiticaMarkdown from 'habitica-markdown'; -import { highlightUsers } from '@/libs/highlightUsers'; +import renderMarkdown from '@/libs/renderWithMentions'; + +describe('renderWithMentions', () => { + function user (name, displayName) { + return { auth: { local: { username: name } }, profile: { name: displayName } }; + } + + it('returns null if no text supplied', () => { + const result = renderMarkdown('', user('a', 'b')); + + expect(result).to.be.null; + }); -describe('highlightUserAndEmail', () => { it('highlights displayname', () => { const text = 'hello @displayedUser with text after'; - const result = highlightUsers(text, 'user', 'displayedUser'); + const result = renderMarkdown(text, user('user', 'displayedUser')); expect(result).to.contain('@displayedUser'); }); @@ -13,45 +22,42 @@ describe('highlightUserAndEmail', () => { it('highlights username', () => { const text = 'hello @user'; - const result = highlightUsers(text, 'user', 'displayedUser'); + const result = renderMarkdown(text, user('user', 'displayedUser')); expect(result).to.contain('@user'); }); it('highlights username sandwiched with underscores', () => { - const text = 'hello @user'; + const text = 'hello @_user_'; - const result = highlightUsers(text, '_user_', 'displayedUser'); + const result = renderMarkdown(text, user('_user_', 'displayedUser')); expect(result).to.contain('@_user_'); expect(result).to.not.contain(''); expect(result).to.not.contain(''); }); it('highlights username sandwiched with double underscores', () => { - const text = 'hello @user'; + const text = 'hello @__user__'; - const result = highlightUsers(text, 'diffUser', 'displayDiffUser'); - expect(result).to.contain('@__user__'); + const result = renderMarkdown(text, user('diffUser', 'displayDiffUser')); + expect(result).to.contain('@__user__'); expect(result).to.not.contain(''); expect(result).to.not.contain(''); }); it('not highlights any email', () => { - const text = habiticaMarkdown.render('hello@example.com'); + const result = renderMarkdown('hello@example.com', user('example', 'displayedUser')); - const result = highlightUsers(text, 'example', 'displayedUser'); expect(result).to.not.contain('@example'); }); - it('complex highlight', () => { - const plainText = 'a bit more @mentions to @use my@mentions.com broken.@mail.com'; + const plainText = 'a bit more @mentions to @use my@mentions.com broken @mail.com'; - const text = habiticaMarkdown.render(plainText); - - const result = highlightUsers(text, 'use', 'mentions'); + const result = renderMarkdown(plainText, user('use', 'mentions')); expect(result).to.contain('@mentions'); expect(result).to.contain('@use'); + expect(result).to.contain('@mail'); expect(result).to.not.contain('@mentions.com'); }); });