diff options
-rw-r--r-- | webapp/tests/utils/formatting_channel_links.test.jsx | 49 | ||||
-rw-r--r-- | webapp/utils/text_formatting.jsx | 19 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 4 |
3 files changed, 65 insertions, 7 deletions
diff --git a/webapp/tests/utils/formatting_channel_links.test.jsx b/webapp/tests/utils/formatting_channel_links.test.jsx new file mode 100644 index 000000000..39dddf008 --- /dev/null +++ b/webapp/tests/utils/formatting_channel_links.test.jsx @@ -0,0 +1,49 @@ +// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import assert from 'assert'; + +import * as TextFormatting from 'utils/text_formatting.jsx'; + +describe('TextFormatting.ChannelLinks', () => { + it('Not channel links', (done) => { + assert.equal( + TextFormatting.formatText('~123').trim(), + '<p>~123</p>' + ); + + assert.equal( + TextFormatting.formatText('~town-square').trim(), + '<p>~town-square</p>' + ); + + done(); + }); + + it('Channel links', (done) => { + assert.equal( + TextFormatting.formatText('~town-square', { + channelNamesMap: {'town-square': {display_name: 'Town Square'}}, + team: {name: 'myteam'} + }).trim(), + '<p><a class="mention-link" href="/myteam/channels/town-square" data-channel-mention="town-square">~Town Square</a></p>' + ); + assert.equal( + TextFormatting.formatText('~town-square.', { + channelNamesMap: {'town-square': {display_name: 'Town Square'}}, + team: {name: 'myteam'} + }).trim(), + '<p><a class="mention-link" href="/myteam/channels/town-square" data-channel-mention="town-square">~Town Square</a>.</p>' + ); + + assert.equal( + TextFormatting.formatText('~town-square', { + channelNamesMap: {'town-square': {display_name: '<b>Reception</b>'}}, + team: {name: 'myteam'} + }).trim(), + '<p><a class="mention-link" href="/myteam/channels/town-square" data-channel-mention="town-square">~<b>Reception</b></a></p>' + ); + + done(); + }); +}); diff --git a/webapp/utils/text_formatting.jsx b/webapp/utils/text_formatting.jsx index 4602a31b2..e34b8fdbb 100644 --- a/webapp/utils/text_formatting.jsx +++ b/webapp/utils/text_formatting.jsx @@ -185,7 +185,7 @@ function autolinkChannelMentions(text, tokens, channelNamesMap, team) { } tokens.set(alias, { - value: `<a class='mention-link' href="${href}" data-channel-mention="${channelName}">${displayName}</a>`, + value: `<a class="mention-link" href="${href}" data-channel-mention="${channelName}">~${displayName}</a>`, originalText: mention }); return alias; @@ -196,7 +196,7 @@ function autolinkChannelMentions(text, tokens, channelNamesMap, team) { if (channelMentionExists(channelNameLower)) { // Exact match - const alias = addToken(channelNameLower, mention, '~' + channelNamesMap[channelNameLower].display_name); + const alias = addToken(channelNameLower, mention, escapeHtml(channelNamesMap[channelNameLower].display_name)); return spacer + alias; } @@ -209,7 +209,8 @@ function autolinkChannelMentions(text, tokens, channelNamesMap, team) { if (channelMentionExists(channelNameLower)) { const suffix = originalChannelName.substr(c - 1); - const alias = addToken(channelNameLower, '~' + channelNameLower, '~' + channelNamesMap[channelNameLower].display_name); + const alias = addToken(channelNameLower, '~' + channelNameLower, + escapeHtml(channelNamesMap[channelNameLower].display_name)); return spacer + alias + suffix; } } else { @@ -231,6 +232,18 @@ export function escapeRegex(text) { return text.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'); } +const htmlEntities = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + "'": ''' +}; + +export function escapeHtml(text) { + return text.replace(/[&<>"']/g, (match) => htmlEntities[match]); +} + function highlightCurrentMentions(text, tokens, mentionKeys = []) { let output = text; diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index b99f7b967..aa98a9872 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -242,10 +242,6 @@ export function extractFirstLink(text) { return ''; } -export function escapeRegExp(string) { - return string.replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'); -} - // Taken from http://stackoverflow.com/questions/1068834/object-comparison-in-javascript and modified slightly export function areObjectsEqual(x, y) { let p; |