Removed all calls to textToJsx and replaced them with calls to TextFormatting

web/react/components/channel_header.jsx

@@ -8,6 +8,7 @@ const SocketStore = require('../stores/socket_store.jsx');
 const NavbarSearchBox = require('./search_bar.jsx');
 const AsyncClient = require('../utils/async_client.jsx');
 const Client = require('../utils/client.jsx');
+const TextFormatting = require('../utils/text_formatting.jsx');
 const Utils = require('../utils/utils.jsx');
 const MessageWrapper = require('./message_wrapper.jsx');
 const PopoverListMembers = require('./popover_list_members.jsx');
@@ -107,7 +108,6 @@ export default class ChannelHeader extends React.Component {
         }
 
         const channel = this.state.channel;
-        const description = Utils.textToJsx(channel.description, {singleline: true, noMentionHighlight: true});
         const popoverContent = React.renderToString(<MessageWrapper message={channel.description}/>);
         let channelTitle = channel.display_name;
         const currentId = UserStore.getCurrentId();
@@ -326,9 +326,9 @@ export default class ChannelHeader extends React.Component {
                                 data-toggle='popover'
                                 data-content={popoverContent}
                                 className='description'
-                            >
+                                onClick={TextFormatting.handleClick}
-                                {description}
+                                dangerouslySetInnerHTML={{__html: TextFormatting.formatText(channel.description, {singleline: true, mentionHighlight: false})}}
-                            </div>
+                            />
                         </div>
                     </th>
                     <th>

web/react/components/message_wrapper.jsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-var Utils = require('../utils/utils.jsx');
+var TextFormatting = require('../utils/text_formatting.jsx');
 
 export default class MessageWrapper extends React.Component {
     constructor(props) {
@@ -10,10 +10,7 @@ export default class MessageWrapper extends React.Component {
     }
     render() {
         if (this.props.message) {
-            var inner = Utils.textToJsx(this.props.message, this.props.options);
+            return <div dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.message, this.props.options)}}/>;
-            return (
-                <div>{inner}</div>
-            );
         }
 
         return <div/>;
@@ -21,8 +18,7 @@ export default class MessageWrapper extends React.Component {
 }
 
 MessageWrapper.defaultProps = {
-    message: null,
+    message: ''
-    options: null
 };
 MessageWrapper.propTypes = {
     message: React.PropTypes.string,

web/react/components/navbar.jsx

@@ -332,7 +332,7 @@ export default class Navbar extends React.Component {
             popoverContent = React.renderToString(
                 <MessageWrapper
                     message={channel.description}
-                    options={{singleline: true, noMentionHighlight: true}}
+                    options={{singleline: true, mentionHighlight: false}}
                 />
             );
             isAdmin = this.state.member.roles.indexOf('admin') > -1;

web/react/components/post_body.jsx

@@ -13,7 +13,6 @@ export default class PostBody extends React.Component {
         super(props);
 
         this.parseEmojis = this.parseEmojis.bind(this);
-        this.handleClick = this.handleClick.bind(this);
 
         const linkData = Utils.extractLinks(this.props.post.message);
         this.state = {links: linkData.links, message: linkData.text};
@@ -31,17 +30,10 @@ export default class PostBody extends React.Component {
         const linkData = Utils.extractLinks(nextProps.post.message);
         this.setState({links: linkData.links, message: linkData.text});
     }
-    handleClick(e) {
-        let mentionAttribute = e.target.getAttributeNode('data-mention');
-        if (mentionAttribute) {
-            Utils.searchForTerm(mentionAttribute.value);
-        }
-    }
     render() {
         const post = this.props.post;
         const filenames = this.props.post.filenames;
         const parentPost = this.props.parentPost;
-        const inner = Utils.textToJsx(this.state.message);
 
         let comment = '';
         let postClass = '';
@@ -143,7 +135,11 @@ export default class PostBody extends React.Component {
                     key={`${post.id}_message`}
                     className={postClass}
                 >
-                    {loading}<span onClick={this.handleClick} dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.state.message)}}/>
+                    {loading}
+                    <span
+                        onClick={TextFormatting.handleClick}
+                        dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.state.message)}}
+                    />
                 </p>
                 {fileAttachmentHolder}
                 {embed}

web/react/components/rhs_comment.jsx

@@ -12,6 +12,7 @@ var FileAttachmentList = require('./file_attachment_list.jsx');
 var Client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
 var ActionTypes = Constants.ActionTypes;
+var TextFormatting = require('../utils/text_formatting.jsx');
 var twemoji = require('twemoji');
 
 export default class RhsComment extends React.Component {
@@ -84,7 +85,6 @@ export default class RhsComment extends React.Component {
             type = 'Comment';
         }
 
-        var message = Utils.textToJsx(post.message);
         var timestamp = UserStore.getCurrentUser().update_at;
 
         var loading;
@@ -202,7 +202,13 @@ export default class RhsComment extends React.Component {
                         </li>
                     </ul>
                     <div className='post-body'>
-                        <p className={postClass}>{loading}{message}</p>
+                        <p className={postClass}>
+                            {loading}
+                            <span
+                                onClick={TextFormatting.handleClick}
+                                dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}}
+                            />
+                        </p>
                         {fileAttachment}
                     </div>
                 </div>

web/react/components/rhs_root_post.jsx

@@ -4,6 +4,7 @@
 var ChannelStore = require('../stores/channel_store.jsx');
 var UserProfile = require('./user_profile.jsx');
 var UserStore = require('../stores/user_store.jsx');
+var TextFormatting = require('../utils/text_formatting.jsx');
 var utils = require('../utils/utils.jsx');
 var FileAttachmentList = require('./file_attachment_list.jsx');
 var twemoji = require('twemoji');
@@ -35,7 +36,6 @@ export default class RhsRootPost extends React.Component {
     }
     render() {
         var post = this.props.post;
-        var message = utils.textToJsx(post.message);
         var isOwner = UserStore.getCurrentId() === post.user_id;
         var timestamp = UserStore.getProfile(post.user_id).update_at;
         var channel = ChannelStore.get(post.channel_id);
@@ -140,7 +140,10 @@ export default class RhsRootPost extends React.Component {
                         </li>
                     </ul>
                     <div className='post-body'>
-                        <p>{message}</p>
+                        <p
+                            onClick={TextFormatting.handleClick}
+                            dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}}
+                        />
                         {fileAttachment}
                     </div>
                 </div>

web/react/components/search_results_item.jsx

@@ -10,6 +10,7 @@ var client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var Constants = require('../utils/constants.jsx');
+var TextFormatting = require('../utils/text_formatting.jsx');
 var ActionTypes = Constants.ActionTypes;
 
 export default class SearchResultsItem extends React.Component {
@@ -56,7 +57,6 @@ export default class SearchResultsItem extends React.Component {
     }
 
     render() {
-        var message = utils.textToJsx(this.props.post.message, {searchTerm: this.props.term, noMentionHighlight: !this.props.isMentionSearch});
         var channelName = '';
         var channel = ChannelStore.get(this.props.post.channel_id);
         var timestamp = UserStore.getCurrentUser().update_at;
@@ -68,6 +68,11 @@ export default class SearchResultsItem extends React.Component {
             }
         }
 
+        const formattingOptions = {
+            searchTerm: this.props.term,
+            mentionHighlight: this.props.isMentionSearch
+        };
+
         return (
             <div
                 className='search-item-container post'
@@ -91,7 +96,12 @@ export default class SearchResultsItem extends React.Component {
                             </time>
                         </li>
                     </ul>
-                    <div className='search-item-snippet'><span>{message}</span></div>
+                    <div className='search-item-snippet'>
+                        <span
+                            onClick={this.handleClick}
+                            dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, formattingOptions)}}
+                        />
+                    </div>
                 </div>
             </div>
         );
@@ -102,4 +112,4 @@ SearchResultsItem.propTypes = {
     post: React.PropTypes.object,
     isMentionSearch: React.PropTypes.bool,
     term: React.PropTypes.string
-};
+};