mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

PLT-1752/PLT-3567/PLT-3998 Highlighting links in search, unit tests for autolinking (#3865)

Просмотр исходного кода 
* Added highlighting to links when their URL includes the search term

* Decoupling UserStore from react-router to allow for unit tests involving it

* PLT-3998 Added SiteURL as an option to be passed into the text formatting code

* Removed reference to PreferenceStore and window from TextFormatting

* Refactored TextFormatting to remove remaining browser-only code

* Updated ChannelHeader and MessageWrapper to match the changes to TextFormatting

* Increased max listeners for Preference and Emoji stores

* PLT-3832 Added automated unit tests for autolinking

* PLT-3567 Rerender posts when mention keywords change

* Updated RHS and search to match the changes to TextFormatting

* Broke TextFormatting's dependency on the UserStore
Этот коммит содержится в:
Harrison Healey
2016-08-29 09:50:00 -04:00
коммит произвёл Christopher Speller
родитель 55342e8fe1
Коммит 167dd22eef
20 изменённых файлов: 765 добавлений и 142 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

30
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,

10
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;
}

79
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) => {

24
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);
}
}
}