From 68ea0abfa665144164041c9421899bfc21412f8a Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Tue, 20 Jun 2017 15:22:46 -0400 Subject: 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 --- webapp/actions/post_actions.jsx | 8 +++ webapp/components/at_mention/at_mention.jsx | 79 ++++++++++++++++++++++ webapp/components/at_mention/index.jsx | 27 ++++++++ .../components/post_view/post_body/post_body.jsx | 25 ++++--- .../post_message_view/post_message_view.jsx | 54 +++++++++++---- webapp/package.json | 1 + webapp/tests/utils/formatting_at_mentions.test.jsx | 51 ++++---------- webapp/tests/utils/formatting_hashtags.test.jsx | 6 +- webapp/utils/text_formatting.jsx | 45 +++--------- webapp/utils/utils.jsx | 24 +++---- webapp/webpack.config.js | 3 +- 11 files changed, 211 insertions(+), 112 deletions(-) create mode 100644 webapp/components/at_mention/at_mention.jsx create mode 100644 webapp/components/at_mention/index.jsx (limited to 'webapp') diff --git a/webapp/actions/post_actions.jsx b/webapp/actions/post_actions.jsx index 1eb1f4feb..81935f615 100644 --- a/webapp/actions/post_actions.jsx +++ b/webapp/actions/post_actions.jsx @@ -351,3 +351,11 @@ export function increasePostVisibility(channelId, focusedPostId) { return posts.order.length >= POST_INCREASE_AMOUNT; }; } + +export function searchForTerm(term) { + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_SEARCH_TERM, + term, + do_search: true + }); +} diff --git a/webapp/components/at_mention/at_mention.jsx b/webapp/components/at_mention/at_mention.jsx new file mode 100644 index 000000000..760884b88 --- /dev/null +++ b/webapp/components/at_mention/at_mention.jsx @@ -0,0 +1,79 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; +import PropTypes from 'prop-types'; + +export default class AtMention extends React.PureComponent { + static propTypes = { + mentionName: PropTypes.string.isRequired, + usersByUsername: PropTypes.object.isRequired, + actions: PropTypes.shape({ + searchForTerm: PropTypes.func.isRequired + }).isRequired + }; + + constructor(props) { + super(props); + + this.state = { + username: this.getUsernameFromMentionName(props) + }; + } + + componentWillReceiveProps(nextProps) { + if (nextProps.mentionName !== this.props.mentionName || nextProps.usersByUsername !== this.props.usersByUsername) { + this.setState({ + username: this.getUsernameFromMentionName(nextProps) + }); + } + } + + getUsernameFromMentionName(props) { + let mentionName = props.mentionName; + + while (mentionName.length > 0) { + if (props.usersByUsername[mentionName]) { + return props.usersByUsername[mentionName].username; + } + + // Repeatedly trim off trailing punctuation in case this is at the end of a sentence + if ((/[._-]$/).test(mentionName)) { + mentionName = mentionName.substring(0, mentionName.length - 1); + } else { + break; + } + } + + return ''; + } + + search = (e) => { + e.preventDefault(); + + this.props.actions.searchForTerm(this.state.username); + } + + render() { + const username = this.state.username; + + if (!username) { + return {'@' + this.props.mentionName}; + } + + const suffix = this.props.mentionName.substring(username.length); + + return ( + + + {'@' + username} + + {suffix} + + ); + } +} diff --git a/webapp/components/at_mention/index.jsx b/webapp/components/at_mention/index.jsx new file mode 100644 index 000000000..c733158c6 --- /dev/null +++ b/webapp/components/at_mention/index.jsx @@ -0,0 +1,27 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import {connect} from 'react-redux'; + +import {getUsersByUsername} from 'mattermost-redux/selectors/entities/users'; + +import {searchForTerm} from 'actions/post_actions.jsx'; + +import AtMention from './at_mention.jsx'; + +function mapStateToProps(state, ownProps) { + return { + ...ownProps, + usersByUsername: getUsersByUsername(state) + }; +} + +function mapDispatchToProps() { + return { + actions: { + searchForTerm + } + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(AtMention); diff --git a/webapp/components/post_view/post_body/post_body.jsx b/webapp/components/post_view/post_body/post_body.jsx index a14141dcd..044b46c55 100644 --- a/webapp/components/post_view/post_body/post_body.jsx +++ b/webapp/components/post_view/post_body/post_body.jsx @@ -1,20 +1,23 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import * as Utils from 'utils/utils.jsx'; -import * as PostUtils from 'utils/post_utils.jsx'; -import {Posts} from 'mattermost-redux/constants'; +import PropTypes from 'prop-types'; +import React from 'react'; +import {FormattedMessage} from 'react-intl'; + +import * as PostActions from 'actions/post_actions.jsx'; -import CommentedOnFilesMessage from 'components/post_view/commented_on_files_message'; import FileAttachmentListContainer from 'components/file_attachment_list'; +import CommentedOnFilesMessage from 'components/post_view/commented_on_files_message'; import PostBodyAdditionalContent from 'components/post_view/post_body_additional_content.jsx'; -import PostMessageContainer from 'components/post_view/post_message_view'; -import ReactionListContainer from 'components/post_view/reaction_list'; import FailedPostOptions from 'components/post_view/failed_post_options'; +import PostMessageView from 'components/post_view/post_message_view'; +import ReactionListContainer from 'components/post_view/reaction_list'; -import React from 'react'; -import PropTypes from 'prop-types'; -import {FormattedMessage} from 'react-intl'; +import * as Utils from 'utils/utils.jsx'; +import * as PostUtils from 'utils/post_utils.jsx'; + +import {Posts} from 'mattermost-redux/constants'; export default class PostBody extends React.PureComponent { static propTypes = { @@ -89,7 +92,7 @@ export default class PostBody extends React.PureComponent { name = ( {username} @@ -156,7 +159,7 @@ export default class PostBody extends React.PureComponent { className={postClass} > {failedOptions} - diff --git a/webapp/components/post_view/post_message_view/post_message_view.jsx b/webapp/components/post_view/post_message_view/post_message_view.jsx index 66a8d01f8..d066183ff 100644 --- a/webapp/components/post_view/post_message_view/post_message_view.jsx +++ b/webapp/components/post_view/post_message_view/post_message_view.jsx @@ -1,17 +1,21 @@ // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import React from 'react'; +import {Parser, ProcessNodeDefinitions} from 'html-to-react'; import PropTypes from 'prop-types'; +import React from 'react'; import {FormattedMessage} from 'react-intl'; +import AtMention from 'components/at_mention'; + +import store from 'stores/redux_store.jsx'; + import * as PostUtils from 'utils/post_utils.jsx'; import * as TextFormatting from 'utils/text_formatting.jsx'; import * as Utils from 'utils/utils.jsx'; import {getChannelsNameMapInCurrentTeam} from 'mattermost-redux/selectors/entities/channels'; import {Posts} from 'mattermost-redux/constants'; -import store from 'stores/redux_store.jsx'; import {renderSystemMessage} from './system_message_helpers.jsx'; @@ -43,11 +47,6 @@ export default class PostMessageView extends React.PureComponent { */ mentionKeys: PropTypes.arrayOf(PropTypes.string), - /* - * Object mapping usernames to users - */ - usernameMap: PropTypes.object, - /* * The URL that the app is hosted on */ @@ -66,8 +65,7 @@ export default class PostMessageView extends React.PureComponent { static defaultProps = { options: {}, - mentionKeys: [], - usernameMap: {} + mentionKeys: [] }; renderDeletedPost() { @@ -96,6 +94,34 @@ export default class PostMessageView extends React.PureComponent { ); } + postMessageHtmlToComponent(html) { + const parser = new Parser(); + const attrib = 'data-mention'; + const processNodeDefinitions = new ProcessNodeDefinitions(React); + + function isValidNode() { + return true; + } + + const processingInstructions = [ + { + replaceChildren: true, + shouldProcessNode: (node) => node.attribs && node.attribs[attrib], + processNode: (node) => { + const mentionName = node.attribs[attrib]; + + return ; + } + }, + { + shouldProcessNode: () => true, + processNode: processNodeDefinitions.processDefaultNode + } + ]; + + return parser.parseWithInstructions(html, isValidNode, processingInstructions); + } + render() { if (this.props.post.state === Posts.POST_DELETED) { return this.renderDeletedPost(); @@ -109,7 +135,7 @@ export default class PostMessageView extends React.PureComponent { emojis: this.props.emojis, siteURL: this.props.siteUrl, mentionKeys: this.props.mentionKeys, - usernameMap: this.props.usernameMap, + atMentions: true, channelNamesMap: getChannelsNameMapInCurrentTeam(store.getState()), team: this.props.team }); @@ -124,14 +150,18 @@ export default class PostMessageView extends React.PureComponent { postId = Utils.createSafeId('lastPostMessageText' + this.props.lastPostCount); } + const htmlFormattedText = TextFormatting.formatText(this.props.post.message, options); + const postMessageComponent = this.postMessageHtmlToComponent(htmlFormattedText); + return (
+ > + {postMessageComponent} + {this.renderEditedIndicator()}
); diff --git a/webapp/package.json b/webapp/package.json index 729a3c7bf..37a6351f5 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -15,6 +15,7 @@ "flux": "3.1.2", "font-awesome": "4.7.0", "highlight.js": "9.11.0", + "html-to-react": "1.2.9", "inobounce": "0.1.4", "intl": "1.2.5", "jasny-bootstrap": "3.1.3", diff --git a/webapp/tests/utils/formatting_at_mentions.test.jsx b/webapp/tests/utils/formatting_at_mentions.test.jsx index d64b42c3f..e9147b565 100644 --- a/webapp/tests/utils/formatting_at_mentions.test.jsx +++ b/webapp/tests/utils/formatting_at_mentions.test.jsx @@ -8,71 +8,50 @@ import * as TextFormatting from 'utils/text_formatting.jsx'; describe('TextFormatting.AtMentions', function() { it('At mentions', function() { assert.equal( - TextFormatting.autolinkAtMentions('@user', new Map(), {user: {}}), + TextFormatting.autolinkAtMentions('@user', new Map()), '$MM_ATMENTION0', - 'should replace explicit mention with token' + 'should replace mention with token' ); assert.equal( - TextFormatting.autolinkAtMentions('abc"@user"def', new Map(), {user: {}}), + TextFormatting.autolinkAtMentions('abc"@user"def', new Map()), 'abc"$MM_ATMENTION0"def', - 'should replace explicit mention surrounded by punctuation with token' + 'should replace mention surrounded by punctuation with token' ); assert.equal( - TextFormatting.autolinkAtMentions('@user1 @user2', new Map(), {user1: {}, user2: {}}), + TextFormatting.autolinkAtMentions('@user1 @user2', new Map()), '$MM_ATMENTION0 $MM_ATMENTION1', - 'should replace multiple explicit mentions with tokens' + 'should replace multiple mentions with tokens' ); assert.equal( - TextFormatting.autolinkAtMentions('@us_-e.r', new Map(), {'us_-e.r': {}}), - '$MM_ATMENTION0', - 'should replace multiple explicit mentions containing punctuation with token' - ); - - assert.equal( - TextFormatting.autolinkAtMentions('@us_-e.r', new Map(), {'us_-e.r': {}}), - '$MM_ATMENTION0', - 'should replace multiple explicit mentions containing valid punctuation with token' - ); - - assert.equal( - TextFormatting.autolinkAtMentions('@user.', new Map(), {user: {}}), - '$MM_ATMENTION0.', - 'should replace explicit mention followed by period with token' + TextFormatting.autolinkAtMentions('@user1/@user2/@user3', new Map()), + '$MM_ATMENTION0/$MM_ATMENTION1/$MM_ATMENTION2', + 'should replace multiple mentions with tokens' ); assert.equal( - TextFormatting.autolinkAtMentions('@user.', new Map(), {'user.': {}}), + TextFormatting.autolinkAtMentions('@us_-e.r', new Map()), '$MM_ATMENTION0', - 'should replace explicit mention ending with period with token' + 'should replace multiple mentions containing punctuation with token' ); - }); - it('Implied at mentions', function() { - // PLT-4454 Assume users exist for things that look like at mentions until we support the new mention syntax assert.equal( - TextFormatting.autolinkAtMentions('@user', new Map(), {}), + TextFormatting.autolinkAtMentions('@user.', new Map()), '$MM_ATMENTION0', - 'should imply user exists and replace mention with token' - ); - - assert.equal( - TextFormatting.autolinkAtMentions('@user.', new Map(), {}), - '$MM_ATMENTION0.', - 'should assume username doesn\'t end in punctuation' + 'should capture trailing punctuation as part of mention' ); }); it('Not at mentions', function() { assert.equal( - TextFormatting.autolinkAtMentions('user@host', new Map(), {user: {}, host: {}}), + TextFormatting.autolinkAtMentions('user@host', new Map()), 'user@host' ); assert.equal( - TextFormatting.autolinkAtMentions('user@email.com', new Map(), {user: {}, email: {}}), + TextFormatting.autolinkAtMentions('user@email.com', new Map()), 'user@email.com' ); }); diff --git a/webapp/tests/utils/formatting_hashtags.test.jsx b/webapp/tests/utils/formatting_hashtags.test.jsx index 1740a8ce7..917f0135a 100644 --- a/webapp/tests/utils/formatting_hashtags.test.jsx +++ b/webapp/tests/utils/formatting_hashtags.test.jsx @@ -160,13 +160,11 @@ describe('TextFormatting.Hashtags', function() { ); let options = { - usernameMap: { - test: {id: '1234', username: 'test'} - } + atMentions: true }; assert.equal( TextFormatting.formatText('#@test', options).trim(), - "

#@test

" + '

#@test

' ); assert.equal( 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: `${mention}`, - originalText: mention + value: `@${username}`, + 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; diff --git a/webapp/webpack.config.js b/webapp/webpack.config.js index 6bc2834e0..16540d22d 100644 --- a/webapp/webpack.config.js +++ b/webapp/webpack.config.js @@ -241,7 +241,8 @@ var config = { alias: { jquery: 'jquery/dist/jquery', superagent: 'node_modules/superagent/lib/client' - } + }, + extensions: ['.js', '.jsx'] }, performance: { hints: 'warning' -- cgit v1.2.3-1-g7c22