diff options
Diffstat (limited to 'webapp/utils')
-rw-r--r-- | webapp/utils/markdown.jsx | 30 | ||||
-rw-r--r-- | webapp/utils/syntax_hightlighting.jsx | 10 | ||||
-rw-r--r-- | webapp/utils/text_formatting.jsx | 79 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 24 |
4 files changed, 72 insertions, 71 deletions
diff --git a/webapp/utils/markdown.jsx b/webapp/utils/markdown.jsx index 028e667fd..f6b218812 100644 --- a/webapp/utils/markdown.jsx +++ b/webapp/utils/markdown.jsx @@ -6,12 +6,11 @@ import * as SyntaxHighlighting from './syntax_hightlighting.jsx'; import marked from 'marked'; import katex from 'katex'; -import 'katex/dist/katex.min.css'; function markdownImageLoaded(image) { image.style.height = 'auto'; } -window.markdownImageLoaded = markdownImageLoaded; +global.markdownImageLoaded = markdownImageLoaded; class MattermostMarkdownRenderer extends marked.Renderer { constructor(options, formattingOptions = {}) { @@ -63,11 +62,11 @@ class MattermostMarkdownRenderer extends marked.Renderer { const content = SyntaxHighlighting.highlight(usedLanguage, code); let searchedContent = ''; - if (this.formattingOptions.searchTerm) { + if (this.formattingOptions.searchPatterns) { const tokens = new Map(); let searched = TextFormatting.sanitizeHtml(code); - searched = TextFormatting.highlightSearchTerms(searched, tokens, this.formattingOptions.searchTerm); + searched = TextFormatting.highlightSearchTerms(searched, tokens, this.formattingOptions.searchPatterns); if (tokens.size > 0) { searched = TextFormatting.replaceTokens(searched, tokens); @@ -94,9 +93,9 @@ class MattermostMarkdownRenderer extends marked.Renderer { codespan(text) { let output = text; - if (this.formattingOptions.searchTerm) { + if (this.formattingOptions.searchPatterns) { const tokens = new Map(); - output = TextFormatting.highlightSearchTerms(output, tokens, this.formattingOptions.searchTerm); + output = TextFormatting.highlightSearchTerms(output, tokens, this.formattingOptions.searchPatterns); output = TextFormatting.replaceTokens(output, tokens); } @@ -149,11 +148,22 @@ class MattermostMarkdownRenderer extends marked.Renderer { outHref = `http://${outHref}`; } - let output = '<a class="theme markdown__link" href="' + outHref + '" rel="noreferrer"'; + let output = '<a class="theme markdown__link'; + + if (this.formattingOptions.searchPatterns) { + for (const pattern of this.formattingOptions.searchPatterns) { + if (pattern.test(href)) { + output += ' search-highlight'; + break; + } + } + } + + output += '" href="' + outHref + '" rel="noreferrer"'; // special case for channel links and permalinks that are inside the app - if (new RegExp('^' + TextFormatting.escapeRegex(global.mm_config.SiteURL) + '\\/[^\\/]+\\/(pl|channels)\\/').test(outHref)) { - output += ' data-link="' + outHref.substring(global.mm_config.SiteURL.length) + '"'; + if (this.formattingOptions.siteURL && new RegExp('^' + TextFormatting.escapeRegex(this.formattingOptions.siteURL) + '\\/[^\\/]+\\/(pl|channels)\\/').test(outHref)) { + output += ' data-link="' + outHref.substring(this.formattingOptions.siteURL) + '"'; } else { output += ' target="_blank"'; } @@ -201,7 +211,7 @@ class MattermostMarkdownRenderer extends marked.Renderer { } } -export function format(text, options) { +export function format(text, options = {}) { const markdownOptions = { renderer: new MattermostMarkdownRenderer(null, options), sanitize: true, diff --git a/webapp/utils/syntax_hightlighting.jsx b/webapp/utils/syntax_hightlighting.jsx index ce904c41f..4146c43c5 100644 --- a/webapp/utils/syntax_hightlighting.jsx +++ b/webapp/utils/syntax_hightlighting.jsx @@ -1,7 +1,6 @@ // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import * as Utils from './utils.jsx'; import * as TextFormatting from './text_formatting.jsx'; import Constants from './constants.jsx'; @@ -138,18 +137,17 @@ export function highlight(lang, code) { } export function getLanguageFromFilename(filename) { - const fileInfo = Utils.splitFileLocation(filename); - var ext = fileInfo.ext; - if (!ext) { - return null; - } + const fileSplit = filename.split('.'); + let ext = fileSplit.length > 1 ? fileSplit[fileSplit.length - 1] : ''; ext = ext.toLowerCase(); + for (var key in HighlightedLanguages) { if (HighlightedLanguages[key].extensions.find((x) => x === ext)) { return key; } } + return null; } diff --git a/webapp/utils/text_formatting.jsx b/webapp/utils/text_formatting.jsx index c110fc52f..f97c74625 100644 --- a/webapp/utils/text_formatting.jsx +++ b/webapp/utils/text_formatting.jsx @@ -2,15 +2,11 @@ // See License.txt for license information. import Autolinker from 'autolinker'; -import {browserHistory} from 'react-router/es6'; import Constants from './constants.jsx'; import EmojiStore from 'stores/emoji_store.jsx'; import * as Emoticons from './emoticons.jsx'; import * as Markdown from './markdown.jsx'; -import PreferenceStore from 'stores/preference_store.jsx'; -import UserStore from 'stores/user_store.jsx'; import twemoji from 'twemoji'; -import * as Utils from './utils.jsx'; import XRegExp from 'xregexp'; // pattern to detect the existance of a Chinese, Japanese, or Korean character in a string @@ -22,16 +18,19 @@ const cjkPattern = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00- // as part of the second parameter: // - searchTerm - If specified, this word is highlighted in the resulting html. Defaults to nothing. // - mentionHighlight - Specifies whether or not to highlight mentions of the current user. Defaults to true. +// - mentionKeys - A list of mention keys for the current user to highlight. // - singleline - Specifies whether or not to remove newlines. Defaults to false. // - emoticons - Enables emoticon parsing. Defaults to true. // - markdown - Enables markdown parsing. Defaults to true. -export function formatText(text, options = {}) { +// - 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) +export function formatText(text, inputOptions) { let output = text; - // would probably make more sense if it was on the calling components, but this option is intended primarily for debugging - if (window.mm_config.EnableDeveloper === 'true' && PreferenceStore.get(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', 'true') === 'false') { - return output; - } + const options = Object.assign({}, inputOptions); + options.searchPatterns = parseSearchTerms(options.searchTerm).map(convertSearchTermToRegex); if (!('markdown' in options) || options.markdown) { // the markdown renderer will call doFormatText as necessary @@ -58,7 +57,10 @@ export function doFormatText(text, options) { const tokens = new Map(); // replace important words and phrases with tokens - output = autolinkAtMentions(output, tokens); + if (options.usernameMap) { + output = autolinkAtMentions(output, tokens, options.usernameMap); + } + output = autolinkEmails(output, tokens); output = autolinkHashtags(output, tokens); @@ -66,12 +68,12 @@ export function doFormatText(text, options) { output = Emoticons.handleEmoticons(output, tokens, options.emojis || EmojiStore.getEmojis()); } - if (options.searchTerm) { - output = highlightSearchTerms(output, tokens, options.searchTerm); + if (options.searchPatterns) { + output = highlightSearchTerms(output, tokens, options.searchPatterns); } if (!('mentionHighlight' in options) || options.mentionHighlight) { - output = highlightCurrentMentions(output, tokens); + output = highlightCurrentMentions(output, tokens, options.mentionKeys); } if (!('emoticons' in options) || options.emoticon) { @@ -143,10 +145,10 @@ function autolinkEmails(text, tokens) { const punctuation = XRegExp.cache('[^\\pL\\d]'); -function autolinkAtMentions(text, tokens) { +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 || UserStore.getProfileByUsername(u)); + return (Constants.SPECIAL_MENTIONS.indexOf(u) !== -1 || !!usernameMap[u]); } function addToken(username, mention) { @@ -200,12 +202,9 @@ export function escapeRegex(text) { return text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); } -function highlightCurrentMentions(text, tokens) { +function highlightCurrentMentions(text, tokens, mentionKeys = []) { let output = text; - const mentionKeys = UserStore.getCurrentMentionKeys(); - mentionKeys.push('@here'); - // look for any existing tokens which are self mentions and should be highlighted var newTokens = new Map(); for (const [alias, token] of tokens) { @@ -239,7 +238,7 @@ function highlightCurrentMentions(text, tokens) { return prefix + alias; } - for (const mention of UserStore.getCurrentMentionKeys()) { + for (const mention of mentionKeys) { if (!mention) { continue; } @@ -369,10 +368,8 @@ function convertSearchTermToRegex(term) { return new RegExp(pattern, 'gi'); } -export function highlightSearchTerms(text, tokens, searchTerm) { - const terms = parseSearchTerms(searchTerm); - - if (terms.length === 0) { +export function highlightSearchTerms(text, tokens, searchPatterns) { + if (!searchPatterns || searchPatterns.length === 0) { return text; } @@ -390,13 +387,11 @@ export function highlightSearchTerms(text, tokens, searchTerm) { return prefix + alias; } - for (const term of terms) { + for (const pattern of searchPatterns) { // highlight existing tokens matching search terms - const trimmedTerm = term.replace(/\*$/, '').toLowerCase(); var newTokens = new Map(); for (const [alias, token] of tokens) { - if (token.originalText.toLowerCase() === trimmedTerm || - (token.hashtag && token.hashtag.toLowerCase() === trimmedTerm)) { + if (pattern.test(token.originalText)) { const index = tokens.size + newTokens.size; const newAlias = `MM_SEARCHTERM${index}`; @@ -414,7 +409,7 @@ export function highlightSearchTerms(text, tokens, searchTerm) { tokens.set(newToken[0], newToken[1]); } - output = output.replace(convertSearchTermToRegex(term), replaceSearchTermWithToken); + output = output.replace(pattern, replaceSearchTermWithToken); } return output; @@ -438,32 +433,6 @@ function replaceNewlines(text) { return text.replace(/\n/g, ' '); } -// A click handler that can be used with the results of TextFormatting.formatText to add default functionality -// to clicked hashtags and @mentions. -export function handleClick(e) { - const mentionAttribute = e.target.getAttributeNode('data-mention'); - const hashtagAttribute = e.target.getAttributeNode('data-hashtag'); - const linkAttribute = e.target.getAttributeNode('data-link'); - - if (mentionAttribute) { - e.preventDefault(); - - Utils.searchForTerm(mentionAttribute.value); - } else if (hashtagAttribute) { - e.preventDefault(); - - Utils.searchForTerm(hashtagAttribute.value); - } else if (linkAttribute) { - const MIDDLE_MOUSE_BUTTON = 1; - - if (!(e.button === MIDDLE_MOUSE_BUTTON || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) { - e.preventDefault(); - - browserHistory.push(linkAttribute.value); - } - } -} - //replace all "/" inside <a> tags to "/<wbr />" function insertLongLinkWbr(test) { return test.replace(/\//g, (match, position, string) => { diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index a880c1783..3059ce529 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -1344,3 +1344,27 @@ export function isValidPassword(password) { export function getSiteURL() { return global.mm_config.SiteURL || window.location.origin; } + +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'); + + if (mentionAttribute) { + e.preventDefault(); + + searchForTerm(mentionAttribute.value); + } else if (hashtagAttribute) { + e.preventDefault(); + + searchForTerm(hashtagAttribute.value); + } else if (linkAttribute) { + const MIDDLE_MOUSE_BUTTON = 1; + + if (!(e.button === MIDDLE_MOUSE_BUTTON || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) { + e.preventDefault(); + + browserHistory.push(linkAttribute.value); + } + } +}
\ No newline at end of file |