feat: emojify ALL THE THINGS!

Author: aviraldg

src/HtmlUtils.js

@@ -233,5 +233,11 @@ module.exports = {
         }
     },
 
-}
+    emojifyText: function(text) {
+        emojione.imageType = 'svg';
+        return {
+            __html: emojione.unicodeToImage(escape(text)),
+        };
+    },
+};
 

src/components/views/avatars/BaseAvatar.js

@@ -18,6 +18,7 @@ limitations under the License.
 
 var React = require('react');
 var AvatarLogic = require("../../../Avatar");
+import {emojifyText} from '../../../HtmlUtils';
 
 module.exports = React.createClass({
     displayName: 'BaseAvatar',
@@ -137,14 +138,14 @@ module.exports = React.createClass({
         var imageUrl = this.state.imageUrls[this.state.urlsIndex];
 
         if (imageUrl === this.state.defaultImageUrl) {
-            var initialLetter = this._getInitialLetter(this.props.name);
+            var initialLetter = emojifyText(this._getInitialLetter(this.props.name));
             return (
                 <span className="mx_BaseAvatar" {...this.props}>
                     <span className="mx_BaseAvatar_initial" aria-hidden="true"
                             style={{ fontSize: (this.props.width * 0.65) + "px",
                                     width: this.props.width + "px",
-                                    lineHeight: this.props.height + "px" }}>
-                        { initialLetter }
+                                    lineHeight: this.props.height + "px" }}
+                            dangerouslySetInnerHTML={initialLetter}>
                     </span>
                     <img className="mx_BaseAvatar_image" src={imageUrl}
                         alt="" title={this.props.title} onError={this.onError}

src/components/views/messages/TextualEvent.js

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

src/components/views/rooms/EntityTile.js

@@ -20,6 +20,7 @@ var React = require('react');
 
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var sdk = require('../../../index');
+import {emojifyText} from '../../../HtmlUtils';
 
 
 var PRESENCE_CLASS = {
@@ -82,6 +83,7 @@ module.exports = React.createClass({
         var mainClassName = "mx_EntityTile ";
         mainClassName += presenceClass + (this.props.className ? (" " + this.props.className) : "");
         var nameEl;
+        let nameHTML = emojifyText(this.props.name);
 
         if (this.state.hover && !this.props.suppressOnHover) {
             var activeAgo = this.props.presenceLastActiveAgo ?
@@ -92,7 +94,7 @@ module.exports = React.createClass({
             nameEl = (
                 <div className="mx_EntityTile_details">
                     <img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12"/>
-                    <div className="mx_EntityTile_name_hover">{ this.props.name }</div>
+                    <div className="mx_EntityTile_name_hover" dangerouslySetInnerHTML={nameHTML}></div>
                     <PresenceLabel activeAgo={ activeAgo }
                         currentlyActive={this.props.presenceCurrentlyActive}
                         presenceState={this.props.presenceState} />
@@ -101,8 +103,7 @@ module.exports = React.createClass({
         }
         else {
             nameEl = (
-                <div className="mx_EntityTile_name">
-                    { this.props.name }
+                <div className="mx_EntityTile_name" dangerouslySetInnerHTML={nameHTML}>
                 </div>
             );
         }

src/components/views/rooms/RoomHeader.js

@@ -24,6 +24,7 @@ var Modal = require("../../../Modal");
 var linkify = require('linkifyjs');
 var linkifyElement = require('linkifyjs/element');
 var linkifyMatrix = require('../../../linkify-matrix');
+import {emojifyText} from '../../../HtmlUtils';
 
 linkifyMatrix(linkify);
 
@@ -211,9 +212,11 @@ module.exports = React.createClass({
                 roomName = this.props.room.name;
             }
 
+            let roomNameHTML = emojifyText(roomName);
+
             name =
                 <div className="mx_RoomHeader_name" onClick={this.props.onSettingsClick}>
-                    <div className={ "mx_RoomHeader_nametext " + (settingsHint ? "mx_RoomHeader_settingsHint" : "") } title={ roomName }>{ roomName }</div>
+                    <div className={ "mx_RoomHeader_nametext " + (settingsHint ? "mx_RoomHeader_settingsHint" : "") } title={ roomName } dangerouslySetInnerHTML={roomNameHTML}></div>
                     { searchStatus }
                     <div className="mx_RoomHeader_settingsButton" title="Settings">
                         <TintableSvg src="img/settings.svg" width="12" height="12"/>

src/components/views/rooms/RoomTile.js

@@ -21,6 +21,7 @@ var classNames = require('classnames');
 var dis = require("../../../dispatcher");
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var sdk = require('../../../index');
+import {emojifyText} from '../../../HtmlUtils';
 
 module.exports = React.createClass({
     displayName: 'RoomTile',
@@ -104,10 +105,13 @@ module.exports = React.createClass({
         var label;
         if (!this.props.collapsed) {
             var className = 'mx_RoomTile_name' + (this.props.isInvite ? ' mx_RoomTile_invite' : '');
+            let nameHTML = emojifyText(name);
             if (this.props.selected) {
-                name = <span>{ name }</span>;
+                name = <span dangerouslySetInnerHTML={nameHTML}></span>;
+                label = <div className={ className }>{ name }</div>;
+            } else {
+                label = <div className={ className } dangerouslySetInnerHTML={nameHTML}></div>;
             }
-            label = <div className={ className }>{ name }</div>;
         }
         else if (this.state.hover) {
             var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");