diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2017-06-20 15:22:46 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-06-20 15:22:46 -0400 |
commit | 68ea0abfa665144164041c9421899bfc21412f8a (patch) | |
tree | 5d2f2aa5665a084bd1e544d8342e229a8fafc064 /webapp/utils | |
parent | 270fc41c0ffe52266f821748db9fd8b4e9d10b36 (diff) | |
download | chat-68ea0abfa665144164041c9421899bfc21412f8a.tar.gz chat-68ea0abfa665144164041c9421899bfc21412f8a.tar.bz2 chat-68ea0abfa665144164041c9421899bfc21412f8a.zip |
PLT-4457 Added AtMention component to better render at mentions (#6563)
* Moved Utils.searchForTerm into an action
* Added easier importing of index.jsx files
* PLT-4457 Added AtMention component to better render at mentions
* Fixed client unit tests
* Fixed merge conflict
* Fixed merge conflicts
Diffstat (limited to 'webapp/utils')
-rw-r--r-- | webapp/utils/text_formatting.jsx | 45 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 24 |
2 files changed, 21 insertions, 48 deletions
diff --git a/webapp/utils/text_formatting.jsx b/webapp/utils/text_formatting.jsx index ed251bcb4..5cae81f4e 100644 --- a/webapp/utils/text_formatting.jsx +++ b/webapp/utils/text_formatting.jsx @@ -9,6 +9,8 @@ import * as Markdown from './markdown.jsx'; import twemoji from 'twemoji'; import XRegExp from 'xregexp'; +const punctuation = XRegExp.cache('[^\\pL\\d]'); + // pattern to detect the existance of a Chinese, Japanese, or Korean character in a string // http://stackoverflow.com/questions/15033196/using-javascript-to-check-whether-a-string-contains-japanese-characters-includi const cjkPattern = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf\uac00-\ud7a3]/; @@ -24,8 +26,7 @@ const cjkPattern = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00- // - markdown - Enables markdown parsing. Defaults to true. // - siteURL - The origin of this Mattermost instance. If provided, links to channels and posts will be replaced with internal // links that can be handled by a special click handler. -// - usernameMap - An object mapping usernames to users. If provided, at mentions will be replaced with internal links that can -// be handled by a special click handler (Utils.handleFormattedTextClick) +// - atMentions - Whether or not to render at mentions into spans with a data-mention attribute. Defaults to false. // - channelNamesMap - An object mapping channel display names to channels. If provided, ~channel mentions will be replaced with // links to the relevant channel. // - team - The current team. @@ -67,8 +68,8 @@ export function doFormatText(text, options) { const tokens = new Map(); // replace important words and phrases with tokens - if (options.usernameMap) { - output = autolinkAtMentions(output, tokens, options.usernameMap); + if (options.atMentions) { + output = autolinkAtMentions(output, tokens); } if (options.channelNamesMap) { @@ -157,45 +158,21 @@ function autolinkEmails(text, tokens) { return autolinker.link(text); } -const punctuation = XRegExp.cache('[^\\pL\\d]'); - -export function autolinkAtMentions(text, tokens, usernameMap) { - // Test if provided text needs to be highlighted, special mention or current user - function mentionExists(u) { - return (Constants.SPECIAL_MENTIONS.indexOf(u) !== -1 || Boolean(usernameMap[u])); - } - - function addToken(username, mention) { +export function autolinkAtMentions(text, tokens) { + function replaceAtMentionWithToken(fullMatch, username) { const index = tokens.size; const alias = `$MM_ATMENTION${index}`; tokens.set(alias, { - value: `<a class='mention-link' href='#' data-mention='${username}'>${mention}</a>`, - originalText: mention + value: `<span data-mention="${username}">@${username}</span>`, + originalText: fullMatch }); - return alias; - } - - function replaceAtMentionWithToken(fullMatch, prefix, mention, username) { - const usernameLower = username.toLowerCase(); - - // Check if the text makes up an explicit mention, possible trimming extra punctuation from the end of the name if necessary - for (let c = usernameLower.length; c > 0; c--) { - const truncated = usernameLower.substring(0, c); - const suffix = usernameLower.substring(c); - - // If we've found a username or run out of punctuation to trim off, render it as an at mention - if (mentionExists(truncated) || !punctuation.test(truncated[truncated.length - 1])) { - const alias = addToken(truncated, '@' + truncated); - return prefix + alias + suffix; - } - } - return fullMatch; + return alias; } let output = text; - output = output.replace(/(^|\W)(@([a-z0-9.\-_]*))/gi, replaceAtMentionWithToken); + output = output.replace(/\B@([a-z0-9.\-_]*)/gi, replaceAtMentionWithToken); return output; } diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 84b02beb1..6ef267eed 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -388,14 +388,6 @@ export function insertHtmlEntities(text) { return newtext; } -export function searchForTerm(term) { - AppDispatcher.handleServerAction({ - type: ActionTypes.RECEIVED_SEARCH_TERM, - term, - do_search: true - }); -} - export function getFileType(extin) { var ext = extin.toLowerCase(); if (Constants.IMAGE_TYPES.indexOf(ext) > -1) { @@ -1312,16 +1304,11 @@ export function isValidPassword(password) { } export function handleFormattedTextClick(e) { - const mentionAttribute = e.target.getAttributeNode('data-mention'); const hashtagAttribute = e.target.getAttributeNode('data-hashtag'); const linkAttribute = e.target.getAttributeNode('data-link'); const channelMentionAttribute = e.target.getAttributeNode('data-channel-mention'); - if (mentionAttribute) { - e.preventDefault(); - - searchForTerm(mentionAttribute.value); - } else if (hashtagAttribute) { + if (hashtagAttribute) { e.preventDefault(); searchForTerm(hashtagAttribute.value); @@ -1339,6 +1326,15 @@ export function handleFormattedTextClick(e) { } } +// This should eventually be removed once everywhere else calls the action +function searchForTerm(term) { + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_SEARCH_TERM, + term, + do_search: true + }); +} + export function isEmptyObject(object) { if (!object) { return true; |