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/components/post_view/post_message_view/post_message_view.jsx | |
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/components/post_view/post_message_view/post_message_view.jsx')
-rw-r--r-- | webapp/components/post_view/post_message_view/post_message_view.jsx | 54 |
1 files changed, 42 insertions, 12 deletions
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'; @@ -44,11 +48,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 */ siteUrl: PropTypes.string, @@ -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> ); |