Merge pull request #676 from hmhealey/mm1900b

MM-1900 Removed textToJsx

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'
-                            >
-                                {description}
-                            </div>
+                                onClick={TextFormatting.handleClick}
+                                dangerouslySetInnerHTML={{__html: TextFormatting.formatText(channel.description, {singleline: true, mentionHighlight: false})}}
+                            />
                         </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>{inner}</div>
-            );
+            return <div dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.message, this.props.options)}}/>;
         }
 
         return <div/>;
@@ -21,8 +18,7 @@ export default class MessageWrapper extends React.Component {
 }
 
 MessageWrapper.defaultProps = {
-    message: null,
-    options: null
+    message: ''
 };
 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

@@ -5,6 +5,7 @@ const FileAttachmentList = require('./file_attachment_list.jsx');
 const UserStore = require('../stores/user_store.jsx');
 const Utils = require('../utils/utils.jsx');
 const Constants = require('../utils/constants.jsx');
+const TextFormatting = require('../utils/text_formatting.jsx');
 const twemoji = require('twemoji');
 
 export default class PostBody extends React.Component {
@@ -33,7 +34,6 @@ export default class PostBody extends React.Component {
         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 = '';
@@ -135,7 +135,11 @@ export default class PostBody extends React.Component {
                     key={`${post.id}_message`}
                     className={postClass}
                 >
-                    {loading}<span>{inner}</span>
+                    {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
-};
+};

web/react/utils/text_formatting.jsx

@@ -0,0 +1,268 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+const Autolinker = require('autolinker');
+const Constants = require('./constants.jsx');
+const UserStore = require('../stores/user_store.jsx');
+const Utils = require('./utils.jsx');
+
+// Performs formatting of user posts including highlighting mentions and search terms and converting urls, hashtags, and
+// @mentions to links by taking a user's message and returning a string of formatted html. Also takes a number of options
+// as part of the second parameter:
+// - searchTerm - If specified, this word is highlighted in the resulting html. Defaults to nothing.
+// - mentionHighlight - Specifies whether or not to highlight mentions of the current user. Defaults to true.
+// - singleline - Specifies whether or not to remove newlines. Defaults to false.
+export function formatText(text, options = {}) {
+    let output = sanitizeHtml(text);
+    const tokens = new Map();
+
+    // replace important words and phrases with tokens
+    output = autolinkUrls(output, tokens);
+    output = autolinkAtMentions(output, tokens);
+    output = autolinkHashtags(output, tokens);
+
+    if (options.searchTerm) {
+        output = highlightSearchTerm(output, tokens, options.searchTerm);
+    }
+
+    if (!('mentionHighlight' in options) || options.mentionHighlight) {
+        output = highlightCurrentMentions(output, tokens);
+    }
+
+    // reinsert tokens with formatted versions of the important words and phrases
+    output = replaceTokens(output, tokens);
+
+    // replace newlines with html line breaks
+    output = replaceNewlines(output, options.singleline);
+
+    return output;
+}
+
+export function sanitizeHtml(text) {
+    let output = text;
+
+    // normal string.replace only does a single occurrance so use a regex instead
+    output = output.replace(/&/g, '&');
+    output = output.replace(/</g, '&lt;');
+    output = output.replace(/>/g, '&gt;');
+    output = output.replace(/'/g, '&apos;');
+    output = output.replace(/"/g, '&quot;');
+
+    return output;
+}
+
+function autolinkUrls(text, tokens) {
+    function replaceUrlWithToken(autolinker, match) {
+        const linkText = match.getMatchedText();
+        let url = linkText;
+
+        if (!url.startsWith('http')) {
+            url = `http://${linkText}`;
+        }
+
+        const index = tokens.size;
+        const alias = `__MM_LINK${index}__`;
+
+        tokens.set(alias, {
+            value: `<a class='theme' target='_blank' href='${url}'>${linkText}</a>`,
+            originalText: linkText
+        });
+
+        return alias;
+    }
+
+    // we can't just use a static autolinker because we need to set replaceFn
+    const autolinker = new Autolinker({
+        urls: true,
+        email: true,
+        phone: false,
+        twitter: false,
+        hashtag: false,
+        replaceFn: replaceUrlWithToken
+    });
+
+    return autolinker.link(text);
+}
+
+function autolinkAtMentions(text, tokens) {
+    let output = text;
+
+    function replaceAtMentionWithToken(fullMatch, prefix, mention, username) {
+        const usernameLower = username.toLowerCase();
+        if (Constants.SPECIAL_MENTIONS.indexOf(usernameLower) !== -1 || UserStore.getProfileByUsername(usernameLower)) {
+            const index = tokens.size;
+            const alias = `__MM_ATMENTION${index}__`;
+
+            tokens.set(alias, {
+                value: `<a class='mention-link' href='#' data-mention='${usernameLower}'>${mention}</a>`,
+                originalText: mention
+            });
+
+            return prefix + alias;
+        }
+
+        return fullMatch;
+    }
+
+    output = output.replace(/(^|\s)(@([a-z0-9.\-_]*[a-z0-9]))/gi, replaceAtMentionWithToken);
+
+    return output;
+}
+
+function highlightCurrentMentions(text, tokens) {
+    let output = text;
+
+    const mentionKeys = UserStore.getCurrentMentionKeys();
+
+    // look for any existing tokens which are self mentions and should be highlighted
+    var newTokens = new Map();
+    for (const [alias, token] of tokens) {
+        if (mentionKeys.indexOf(token.originalText) !== -1) {
+            const index = tokens.size + newTokens.size;
+            const newAlias = `__MM_SELFMENTION${index}__`;
+
+            newTokens.set(newAlias, {
+                value: `<span class='mention-highlight'>${alias}</span>`,
+                originalText: token.originalText
+            });
+
+            output = output.replace(alias, newAlias);
+        }
+    }
+
+    // the new tokens are stashed in a separate map since we can't add objects to a map during iteration
+    for (const newToken of newTokens) {
+        tokens.set(newToken[0], newToken[1]);
+    }
+
+    // look for self mentions in the text
+    function replaceCurrentMentionWithToken(fullMatch, prefix, mention) {
+        const index = tokens.size;
+        const alias = `__MM_SELFMENTION${index}__`;
+
+        tokens.set(alias, {
+            value: `<span class='mention-highlight'>${mention}</span>`,
+            originalText: mention
+        });
+
+        return prefix + alias;
+    }
+
+    for (const mention of UserStore.getCurrentMentionKeys()) {
+        output = output.replace(new RegExp(`(^|\\W)(${mention})\\b`, 'gi'), replaceCurrentMentionWithToken);
+    }
+
+    return output;
+}
+
+function autolinkHashtags(text, tokens) {
+    let output = text;
+
+    var newTokens = new Map();
+    for (const [alias, token] of tokens) {
+        if (token.originalText.startsWith('#')) {
+            const index = tokens.size + newTokens.size;
+            const newAlias = `__MM_HASHTAG${index}__`;
+
+            newTokens.set(newAlias, {
+                value: `<a class='mention-link' href='#' data-hashtag='${token.originalText}'>${token.originalText}</a>`,
+                originalText: token.originalText
+            });
+
+            output = output.replace(alias, newAlias);
+        }
+    }
+
+    // the new tokens are stashed in a separate map since we can't add objects to a map during iteration
+    for (const newToken of newTokens) {
+        tokens.set(newToken[0], newToken[1]);
+    }
+
+    // look for hashtags in the text
+    function replaceHashtagWithToken(fullMatch, prefix, hashtag) {
+        const index = tokens.size;
+        const alias = `__MM_HASHTAG${index}__`;
+
+        tokens.set(alias, {
+            value: `<a class='mention-link' href='#' data-hashtag='${hashtag}'>${hashtag}</a>`,
+            originalText: hashtag
+        });
+
+        return prefix + alias;
+    }
+
+    return output.replace(/(^|\W)(#[a-zA-Z0-9.\-_]+)\b/g, replaceHashtagWithToken);
+}
+
+function highlightSearchTerm(text, tokens, searchTerm) {
+    let output = text;
+
+    var newTokens = new Map();
+    for (const [alias, token] of tokens) {
+        if (token.originalText === searchTerm) {
+            const index = tokens.size + newTokens.size;
+            const newAlias = `__MM_SEARCHTERM${index}__`;
+
+            newTokens.set(newAlias, {
+                value: `<span class='search-highlight'>${alias}</span>`,
+                originalText: token.originalText
+            });
+
+            output = output.replace(alias, newAlias);
+        }
+    }
+
+    // the new tokens are stashed in a separate map since we can't add objects to a map during iteration
+    for (const newToken of newTokens) {
+        tokens.set(newToken[0], newToken[1]);
+    }
+
+    function replaceSearchTermWithToken(fullMatch, prefix, word) {
+        const index = tokens.size;
+        const alias = `__MM_SEARCHTERM${index}__`;
+
+        tokens.set(alias, {
+            value: `<span class='search-highlight'>${word}</span>`,
+            originalText: word
+        });
+
+        return prefix + alias;
+    }
+
+    return output.replace(new RegExp(`(^|\\W)(${searchTerm})\\b`, 'gi'), replaceSearchTermWithToken);
+}
+
+function replaceTokens(text, tokens) {
+    let output = text;
+
+    // iterate backwards through the map so that we do replacement in the opposite order that we added tokens
+    const aliases = [...tokens.keys()];
+    for (let i = aliases.length - 1; i >= 0; i--) {
+        const alias = aliases[i];
+        const token = tokens.get(alias);
+        output = output.replace(alias, token.value);
+    }
+
+    return output;
+}
+
+function replaceNewlines(text, singleline) {
+    if (!singleline) {
+        return text.replace(/\n/g, '<br />');
+    }
+
+    return text.replace(/\n/g, ' ');
+}
+
+// A click handler that can be used with the results of TextFormatting.formatText to add default functionality
+// to clicked hashtags and @mentions.
+export function handleClick(e) {
+    const mentionAttribute = e.target.getAttributeNode('data-mention');
+    const hashtagAttribute = e.target.getAttributeNode('data-hashtag');
+
+    if (mentionAttribute) {
+        Utils.searchForTerm(mentionAttribute.value);
+    } else if (hashtagAttribute) {
+        Utils.searchForTerm(hashtagAttribute.value);
+    }
+}

web/react/utils/utils.jsx

@@ -434,205 +434,6 @@ export function searchForTerm(term) {
     });
 }
 
-var puncStartRegex = /^((?![@#])\W)+/g;
-var puncEndRegex = /(\W)+$/g;
-
-export function textToJsx(textin, options) {
-    var text = textin;
-    if (options && options.singleline) {
-        var repRegex = new RegExp('\n', 'g'); //eslint-disable-line no-control-regex
-        text = text.replace(repRegex, ' ');
-    }
-
-    var searchTerm = '';
-    if (options && options.searchTerm) {
-        searchTerm = options.searchTerm.toLowerCase();
-    }
-
-    var mentionClass = 'mention-highlight';
-    if (options && options.noMentionHighlight) {
-        mentionClass = '';
-    }
-
-    var inner = [];
-
-    // Function specific regex
-    var hashRegex = /^href="#[^']+"|(^#[A-Za-z]+[A-Za-z0-9_\-]*[A-Za-z0-9])$/g;
-
-    var implicitKeywords = UserStore.getCurrentMentionKeys();
-
-    var lines = text.split('\n');
-    for (let i = 0; i < lines.length; i++) {
-        var line = lines[i];
-        var words = line.split(' ');
-        var highlightSearchClass = '';
-        for (let z = 0; z < words.length; z++) {
-            var word = words[z];
-            var trimWord = word.replace(puncStartRegex, '').replace(puncEndRegex, '').trim();
-            var mentionRegex = /^(?:@)([a-z0-9_]+)$/gi; // looks loop invariant but a weird JS bug needs it to be redefined here
-            var explicitMention = mentionRegex.exec(trimWord);
-
-            if (searchTerm !== '') {
-                let searchWords = searchTerm.split(' ');
-                for (let idx in searchWords) {
-                    if ({}.hasOwnProperty.call(searchWords, idx)) {
-                        let searchWord = searchWords[idx];
-                        if (searchWord === word.toLowerCase() || searchWord === trimWord.toLowerCase()) {
-                            highlightSearchClass = ' search-highlight';
-                            break;
-                        } else if (searchWord.charAt(searchWord.length - 1) === '*') {
-                            let searchWordPrefix = searchWord.slice(0, -1);
-                            if (trimWord.toLowerCase().indexOf(searchWordPrefix) > -1 || word.toLowerCase().indexOf(searchWordPrefix) > -1) {
-                                highlightSearchClass = ' search-highlight';
-                                break;
-                            }
-                        }
-                    }
-                }
-            }
-
-            if (explicitMention &&
-                (UserStore.getProfileByUsername(explicitMention[1]) ||
-                 Constants.SPECIAL_MENTIONS.indexOf(explicitMention[1]) !== -1)) {
-                let name = explicitMention[1];
-
-                // do both a non-case sensitive and case senstive check
-                let mClass = '';
-                if (implicitKeywords.indexOf('@' + name.toLowerCase()) !== -1 || implicitKeywords.indexOf('@' + name) !== -1) {
-                    mClass = mentionClass;
-                }
-
-                let suffix = word.match(puncEndRegex);
-                let prefix = word.match(puncStartRegex);
-
-                if (searchTerm === name) {
-                    highlightSearchClass = ' search-highlight';
-                }
-
-                inner.push(
-                    <span key={name + i + z + '_span'}>
-                        {prefix}
-                        <a
-                            className={mClass + highlightSearchClass + ' mention-link'}
-                            key={name + i + z + '_link'}
-                            href='#'
-                            onClick={() => searchForTerm(name)} //eslint-disable-line no-loop-func
-                        >
-                            @{name}
-                        </a>
-                        {suffix}
-                        {' '}
-                    </span>
-                );
-            } else if (testUrlMatch(word).length) {
-                let match = testUrlMatch(word)[0];
-                let link = match.link;
-
-                let prefix = word.substring(0, word.indexOf(match.text));
-                let suffix = word.substring(word.indexOf(match.text) + match.text.length);
-
-                inner.push(
-                    <span key={word + i + z + '_span'}>
-                        {prefix}
-                        <a
-                            key={word + i + z + '_link'}
-                            className={'theme' + highlightSearchClass}
-                            target='_blank'
-                            href={link}
-                        >
-                            {match.text}
-                        </a>
-                        {suffix}
-                        {' '}
-                    </span>
-                );
-            } else if (trimWord.match(hashRegex)) {
-                let suffix = word.match(puncEndRegex);
-                let prefix = word.match(puncStartRegex);
-                let mClass = '';
-                if (implicitKeywords.indexOf(trimWord) !== -1 || implicitKeywords.indexOf(trimWord.toLowerCase()) !== -1) {
-                    mClass = mentionClass;
-                }
-
-                if (searchTerm === trimWord.substring(1).toLowerCase() || searchTerm === trimWord.toLowerCase()) {
-                    highlightSearchClass = ' search-highlight';
-                }
-
-                inner.push(
-                    <span key={word + i + z + '_span'}>
-                        {prefix}
-                        <a
-                            key={word + i + z + '_hash'}
-                            className={'theme ' + mClass + highlightSearchClass}
-                            href='#'
-                            onClick={searchForTerm.bind(this, trimWord)} //eslint-disable-line no-loop-func
-                        >
-                            {trimWord}
-                        </a>
-                        {suffix}
-                        {' '}
-                    </span>
-                );
-            } else if (implicitKeywords.indexOf(trimWord) !== -1 || implicitKeywords.indexOf(trimWord.toLowerCase()) !== -1) {
-                let suffix = word.match(puncEndRegex);
-                let prefix = word.match(puncStartRegex);
-
-                if (trimWord.charAt(0) === '@') {
-                    if (searchTerm === trimWord.substring(1).toLowerCase()) {
-                        highlightSearchClass = ' search-highlight';
-                    }
-                    inner.push(
-                        <span key={word + i + z + '_span'}>
-                            {prefix}
-                            <a
-                                className={mentionClass + highlightSearchClass}
-                                key={name + i + z + '_link'}
-                                href='#'
-                            >
-                                {trimWord}
-                            </a>
-                            {suffix}
-                            {' '}
-                        </span>
-                    );
-                } else {
-                    inner.push(
-                        <span key={word + i + z + '_span'}>
-                            {prefix}
-                            <span className={mentionClass + highlightSearchClass}>
-                                {replaceHtmlEntities(trimWord)}
-                            </span>
-                            {suffix}
-                            {' '}
-                        </span>
-                    );
-                }
-            } else if (word === '') {
-
-                // if word is empty dont include a span
-
-            } else {
-                inner.push(
-                    <span key={word + i + z + '_span'}>
-                        <span className={highlightSearchClass}>
-                            {replaceHtmlEntities(word)}
-                        </span>
-                        {' '}
-                    </span>
-                );
-            }
-            highlightSearchClass = '';
-        }
-        if (i !== lines.length - 1) {
-            inner.push(
-                <br key={'br_' + i}/>
-            );
-        }
-    }
-
-    return inner;
-}
-
 export function getFileType(extin) {
     var ext = extin.toLowerCase();
     if (Constants.IMAGE_TYPES.indexOf(ext) > -1) {