diff options
Diffstat (limited to 'webapp/components/post_view')
-rw-r--r-- | webapp/components/post_view/components/post.jsx | 2 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_header.jsx | 2 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_message_view.jsx | 40 |
3 files changed, 41 insertions, 3 deletions
diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index f5c96d2bc..cf25b28e4 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -3,7 +3,7 @@ import PostHeader from './post_header.jsx'; import PostBody from './post_body.jsx'; -import ProfilePicture from 'components/profile_picture.jsx'; +import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx'; import Constants from 'utils/constants.jsx'; const ActionTypes = Constants.ActionTypes; diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx index 9de0b7e79..e19285963 100644 --- a/webapp/components/post_view/components/post_header.jsx +++ b/webapp/components/post_view/components/post_header.jsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import UserProfile from 'components/user_profile.jsx'; +import UserProfile from 'components/profile_popover/username_profile_popover.jsx'; import PostInfo from './post_info.jsx'; import {FormattedMessage} from 'react-intl'; diff --git a/webapp/components/post_view/components/post_message_view.jsx b/webapp/components/post_view/components/post_message_view.jsx index 5b0790f36..db522c974 100644 --- a/webapp/components/post_view/components/post_message_view.jsx +++ b/webapp/components/post_view/components/post_message_view.jsx @@ -3,6 +3,9 @@ import React from 'react'; import {FormattedMessage} from 'react-intl'; +import {Parser, ProcessNodeDefinitions} from 'html-to-react'; + +import AtMentionProfile from 'components/profile_popover/atmention_profile_popover.jsx'; import Constants from 'utils/constants.jsx'; import * as PostUtils from 'utils/post_utils.jsx'; @@ -88,6 +91,38 @@ export default class PostMessageView extends React.Component { ); } + 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] && this.props.usernameMap.hasOwnProperty(node.attribs[attrib]), + processNode: (node) => { + const username = node.attribs[attrib]; + return ( + <AtMentionProfile + user={this.props.usernameMap[username]} + username={username} + /> + ); + } + }, + { + shouldProcessNode: () => true, + processNode: processNodeDefinitions.processDefaultNode + } + ]; + + return parser.parseWithInstructions(html, isValidNode, processingInstructions); + } + render() { if (this.props.post.state === Constants.POST_DELETED) { return this.renderDeletedPost(); @@ -111,14 +146,17 @@ export default class PostMessageView extends React.Component { return <div>{renderedSystemMessage}</div>; } + const htmlFormattedText = TextFormatting.formatText(this.props.post.message, options); + const postMessageComponent = this.postMessageHtmlToComponent(htmlFormattedText); + return ( <div> <span id={this.props.isLastPost ? 'lastPostMessageText' : null} className='post-message__text' onClick={Utils.handleFormattedTextClick} - dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, options)}} /> + {postMessageComponent} {this.renderEditedIndicator()} </div> ); |