diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js index 67123fe3dd..bfc7c5bfb8 100644 --- a/src/HtmlUtils.js +++ b/src/HtmlUtils.js @@ -233,5 +233,11 @@ module.exports = { } }, -} + emojifyText: function(text) { + emojione.imageType = 'svg'; + return { + __html: emojione.unicodeToImage(escape(text)), + }; + }, +}; diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js index 121540a8c0..66f8e27b88 100644 --- a/src/components/views/avatars/BaseAvatar.js +++ b/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} diff --git a/src/components/views/messages/TextualEvent.js b/src/components/views/messages/TextualEvent.js index f82fafa242..251a44a30a 100644 --- a/src/components/views/messages/TextualEvent.js +++ b/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> ); }, diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js index acc424b098..91874ed45a 100644 --- a/src/components/views/rooms/EntityTile.js +++ b/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> ); } diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 448a46b84f..0bafc90fe5 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/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"/> diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 55971cdd60..da9f97ab65 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/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");