IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

PLT-4457 Added AtMention component to better render at mentions (#6563)

Browse Source 
* 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
This commit is contained in:
Harrison Healey
2017-06-20 15:22:46 -04:00
committed by GitHub
parent 270fc41c0f
commit 68ea0abfa6
11 changed files with 216 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/actions/post_actions.jsx
View File

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

79
webapp/components/at_mention/at_mention.jsx Normal file
View File

@@ -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 <span>{'@' + this.props.mentionName}</span>;
}
const suffix = this.props.mentionName.substring(username.length);
return (
<span>
<a
className='mention-link'
href='#'
onClick={this.search}
>
{'@' + username}
</a>
{suffix}
</span>
);
}
}

27
webapp/components/at_mention/index.jsx Normal file
View File

@@ -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);

29
webapp/components/post_view/post_body/post_body.jsx
View File

@@ -1,21 +1,24 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import PropTypes from 'prop-types';
import React from 'react';
import {FormattedMessage} from 'react-intl';
import * as PostActions from 'actions/post_actions.jsx';
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 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 * as Utils from 'utils/utils.jsx';
import * as PostUtils from 'utils/post_utils.jsx';
import {Posts} from 'mattermost-redux/constants';
import CommentedOnFilesMessage from 'components/post_view/commented_on_files_message';
import FileAttachmentListContainer from 'components/file_attachment_list';
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 React from 'react';
import PropTypes from 'prop-types';
import {FormattedMessage} from 'react-intl';
export default class PostBody extends React.PureComponent {
static propTypes = {
@@ -89,7 +92,7 @@ export default class PostBody extends React.PureComponent {
name = (
<a
className='theme'
onClick={Utils.searchForTerm.bind(null, username)}
onClick={PostActions.searchForTerm.bind(null, username)}
>
{username}
</a>
@@ -156,7 +159,7 @@ export default class PostBody extends React.PureComponent {
className={postClass}
>
{failedOptions}
<PostMessageContainer
<PostMessageView
lastPostCount={this.props.lastPostCount}
post={this.props.post}
/>

54
webapp/components/post_view/post_message_view/post_message_view.jsx
View File

@@ -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 <AtMention mentionName={mentionName}/>;
}
},
{
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 (
<div>
<span
id={postId}
className='post-message__text'
onClick={Utils.handleFormattedTextClick}
dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, options)}}
/>
>
{postMessageComponent}
</span>
{this.renderEditedIndicator()}
</div>
);

1
webapp/package.json
View File

@@ -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",

57
webapp/tests/utils/formatting_at_mentions.test.jsx
View File

@@ -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': {}}),
TextFormatting.autolinkAtMentions('@user1/@user2/@user3', new Map()),
'$MM_ATMENTION0/$MM_ATMENTION1/$MM_ATMENTION2',
'should replace multiple mentions with tokens'
);
assert.equal(
TextFormatting.autolinkAtMentions('@us_-e.r', new Map()),
'$MM_ATMENTION0',
'should replace multiple explicit mentions containing punctuation with token'
'should replace multiple mentions containing punctuation with token'
);
assert.equal(
TextFormatting.autolinkAtMentions('@us_-e.r', new Map(), {'us_-e.r': {}}),
TextFormatting.autolinkAtMentions('@user.', new Map()),
'$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'
);
assert.equal(
TextFormatting.autolinkAtMentions('@user.', new Map(), {'user.': {}}),
'$MM_ATMENTION0',
'should replace explicit mention ending with period 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(), {}),
'$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'
);
});

6
webapp/tests/utils/formatting_hashtags.test.jsx
View File

@@ -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(),
"<p>#<a class='mention-link' href='#' data-mention='test'>@test</a></p>"
'<p>#<span data-mention="test">@test</span></p>'
);
assert.equal(

45
webapp/utils/text_formatting.jsx
View File

@@ -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;
}
let output = text;
output = output.replace(/(^|\W)(@([a-z0-9.\-_]*))/gi, replaceAtMentionWithToken);
output = output.replace(/\B@([a-z0-9.\-_]*)/gi, replaceAtMentionWithToken);
return output;
}

24
webapp/utils/utils.jsx
View File

@@ -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;

3
webapp/webpack.config.js
View File

@@ -241,7 +241,8 @@ var config = {
alias: {
jquery: 'jquery/dist/jquery',
superagent: 'node_modules/superagent/lib/client'
}
},
extensions: ['.js', '.jsx']
},
performance: {
hints: 'warning'