Moved twemoji parsing so that it doesn't occur inside of code blocks (#2896)

webapp/components/post_body.jsx

@@ -1,13 +1,11 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import ReactDOM from 'react-dom';
 import FileAttachmentList from './file_attachment_list.jsx';
 import UserStore from 'stores/user_store.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
-import twemoji from 'twemoji';
 import PostBodyAdditionalContent from './post_body_additional_content.jsx';
 
 import {FormattedMessage} from 'react-intl';
@@ -17,39 +15,6 @@ import loadingGif from 'images/load.gif';
 import React from 'react';
 
 export default class PostBody extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.parseEmojis = this.parseEmojis.bind(this);
-    }
-
-    getAllChildNodes(nodeIn) {
-        var textNodes = [];
-
-        function getTextNodes(node) {
-            textNodes.push(node);
-
-            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
-                getTextNodes(node.childNodes[i]);
-            }
-        }
-
-        getTextNodes(nodeIn);
-        return textNodes;
-    }
-
-    parseEmojis() {
-        twemoji.parse(ReactDOM.findDOMNode(this), {
-            className: 'emoticon',
-            base: '',
-            folder: Constants.EMOJI_PATH
-        });
-    }
-
-    componentDidMount() {
-        this.parseEmojis();
-    }
-
     shouldComponentUpdate(nextProps) {
         if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
             return true;

webapp/components/rhs_comment.jsx

@@ -23,15 +23,12 @@ import {FormattedMessage, FormattedDate} from 'react-intl';
 import loadingGif from 'images/load.gif';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
-import twemoji from 'twemoji';
 
 export default class RhsComment extends React.Component {
     constructor(props) {
         super(props);
 
         this.retryComment = this.retryComment.bind(this);
-        this.parseEmojis = this.parseEmojis.bind(this);
         this.handlePermalink = this.handlePermalink.bind(this);
 
         this.state = {};
@@ -66,20 +63,10 @@ export default class RhsComment extends React.Component {
         PostStore.updatePendingPost(post);
         this.forceUpdate();
     }
-    parseEmojis() {
-        twemoji.parse(ReactDOM.findDOMNode(this), {
-            className: 'emoticon',
-            base: '',
-            folder: Constants.EMOJI_PATH
-        });
-    }
     handlePermalink(e) {
         e.preventDefault();
         GlobalActions.showGetPostLinkModal(this.props.post);
     }
-    componentDidMount() {
-        this.parseEmojis();
-    }
     shouldComponentUpdate(nextProps) {
         if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
             return true;
@@ -87,9 +74,6 @@ export default class RhsComment extends React.Component {
 
         return false;
     }
-    componentDidUpdate() {
-        this.parseEmojis();
-    }
     createDropdown() {
         var post = this.props.post;
 

webapp/components/rhs_root_post.jsx

@@ -1,14 +1,12 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import ReactDOM from 'react-dom';
 import ChannelStore from 'stores/channel_store.jsx';
 import UserProfile from './user_profile.jsx';
 import UserStore from 'stores/user_store.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import * as Utils from 'utils/utils.jsx';
 import FileAttachmentList from './file_attachment_list.jsx';
-import twemoji from 'twemoji';
 import PostBodyAdditionalContent from './post_body_additional_content.jsx';
 import * as GlobalActions from 'action_creators/global_actions.jsx';
 
@@ -22,25 +20,14 @@ export default class RhsRootPost extends React.Component {
     constructor(props) {
         super(props);
 
-        this.parseEmojis = this.parseEmojis.bind(this);
         this.handlePermalink = this.handlePermalink.bind(this);
 
         this.state = {};
     }
-    parseEmojis() {
-        twemoji.parse(ReactDOM.findDOMNode(this), {
-            className: 'emoticon',
-            base: '',
-            folder: Constants.EMOJI_PATH
-        });
-    }
     handlePermalink(e) {
         e.preventDefault();
         GlobalActions.showGetPostLinkModal(this.props.post);
     }
-    componentDidMount() {
-        this.parseEmojis();
-    }
     shouldComponentUpdate(nextProps) {
         if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
             return true;
@@ -48,9 +35,6 @@ export default class RhsRootPost extends React.Component {
 
         return false;
     }
-    componentDidUpdate() {
-        this.parseEmojis();
-    }
     render() {
         const post = this.props.post;
         const user = this.props.user;

webapp/utils/text_formatting.jsx

@@ -7,6 +7,7 @@ import Constants from './constants.jsx';
 import * as Emoticons from './emoticons.jsx';
 import * as Markdown from './markdown.jsx';
 import UserStore from 'stores/user_store.jsx';
+import twemoji from 'twemoji';
 import * as Utils from './utils.jsx';
 
 // Performs formatting of user posts including highlighting mentions and search terms and converting urls, hashtags, and
@@ -62,6 +63,14 @@ export function doFormatText(text, options) {
     // reinsert tokens with formatted versions of the important words and phrases
     output = replaceTokens(output, tokens);
 
+    if (!('emoticons' in options) || options.emoticon) {
+        output = twemoji.parse(output, {
+            className: 'emoticon',
+            base: '',
+            folder: Constants.EMOJI_PATH
+        });
+    }
+
     return output;
 }