Add EmojiText component for emoji replacement.

src/components/views/messages/SenderProfile.js

@@ -17,7 +17,7 @@
 'use strict';
 
 import React from 'react';
-import {emojifyText} from '../../../HtmlUtils';
+import EmojiText from '../elements/EmojiText';
 
 export default function SenderProfile(props) {
     const {mxEvent} = props;
@@ -29,10 +29,8 @@ export default function SenderProfile(props) {
     }
 
     return (
-        <span className="mx_SenderProfile"
-              dangerouslySetInnerHTML={emojifyText(`${name || ''} ${props.aux || ''}`)}
-              onClick={props.onClick}>
-        </span>
+        <EmojiText className="mx_SenderProfile"
+              onClick={props.onClick}>{`${name || ''} ${props.aux || ''}`}</EmojiText>
     );
 }
 

src/components/views/messages/TextualBody.js

@@ -23,7 +23,7 @@ var linkify = require('linkifyjs');
 var linkifyElement = require('linkifyjs/element');
 var linkifyMatrix = require('../../../linkify-matrix');
 var sdk = require('../../../index');
-import {emojifyText} from '../../../HtmlUtils';
+import EmojiText from '../../views/elements/EmojiText';
 
 linkifyMatrix(linkify);
 
@@ -202,10 +202,9 @@ module.exports = React.createClass({
         switch (content.msgtype) {
             case "m.emote":
                 const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
-                const nameHtml = emojifyText(name);
                 return (
                     <span ref="content" className="mx_MEmoteBody mx_EventTile_content">
-                        * <span dangerouslySetInnerHTML={nameHtml} /> { body }
+                        * <EmojiText>{name}</EmojiText> { body }
                         { widgets }
                     </span>
                 );

src/components/views/messages/TextualEvent.js

@@ -19,7 +19,7 @@ limitations under the License.
 var React = require('react');
 
 var TextForEvent = require('../../../TextForEvent');
-import {emojifyText} from '../../../HtmlUtils';
+import EmojiText from '../elements/EmojiText';
 
 module.exports = React.createClass({
     displayName: 'TextualEvent',
@@ -33,11 +33,8 @@ module.exports = React.createClass({
     render: function() {
         var text = TextForEvent.textForEvent(this.props.mxEvent);
         if (text == null || text.length === 0) return null;
-        let textHTML = emojifyText(TextForEvent.textForEvent(this.props.mxEvent));
-
         return (
-            <div className="mx_TextualEvent" dangerouslySetInnerHTML={textHTML}>
-            </div>
+            <EmojiText element="div" className="mx_TextualEvent">{text}</EmojiText>
         );
     },
 });