diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index 2ab635081f..c0792e6d14 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -24,8 +24,39 @@ import escape from 'lodash/escape';
import emojione from 'emojione';
import classNames from 'classnames';
+emojione.imagePathSVG = 'emojione/svg/';
+emojione.imageType = 'svg';
+
const EMOJI_REGEX = new RegExp(emojione.unicodeRegexp+"+", "gi");
+/* modified from https://github.com/Ranks/emojione/blob/master/lib/js/emojione.js
+ * because we want to include emoji shortnames in title text
+ */
+export function unicodeToImage(str) {
+ let replaceWith, unicode, alt;
+ const mappedUnicode = emojione.mapUnicodeToShort();
+
+ str = str.replace(emojione.regUnicode, function(unicodeChar) {
+ if ( (typeof unicodeChar === 'undefined') || (unicodeChar === '') || (!(unicodeChar in emojione.jsEscapeMap)) ) {
+ // if the unicodeChar doesnt exist just return the entire match
+ return unicodeChar;
+ }
+ else {
+ // get the unicode codepoint from the actual char
+ unicode = emojione.jsEscapeMap[unicodeChar];
+
+ // depending on the settings, we'll either add the native unicode as the alt tag, otherwise the shortname
+ alt = (emojione.unicodeAlt) ? emojione.convert(unicode.toUpperCase()) : mappedUnicode[unicode];
+ const title = mappedUnicode[unicode];
+
+ replaceWith = ``;
+ return replaceWith;
+ }
+ });
+
+ return str;
+};
+
var sanitizeHtmlParams = {
allowedTags: [
'font', // custom to matrix for IRC-style font coloring
@@ -211,8 +242,7 @@ module.exports = {
};
}
safeBody = sanitizeHtml(body, sanitizeHtmlParams);
- emojione.imageType = 'svg';
- safeBody = emojione.unicodeToImage(safeBody);
+ safeBody = unicodeToImage(safeBody);
}
finally {
delete sanitizeHtmlParams.textFilter;
@@ -239,7 +269,6 @@ module.exports = {
},
emojifyText: function(text) {
- emojione.imageType = 'svg';
return {
__html: emojione.unicodeToImage(escape(text)),
};
diff --git a/src/component-index.js b/src/component-index.js
index 97f8882b82..d4bf2a7aab 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -72,6 +72,7 @@ module.exports.components['views.messages.MFileBody'] = require('./components/vi
module.exports.components['views.messages.MImageBody'] = require('./components/views/messages/MImageBody');
module.exports.components['views.messages.MVideoBody'] = require('./components/views/messages/MVideoBody');
module.exports.components['views.messages.MessageEvent'] = require('./components/views/messages/MessageEvent');
+module.exports.components['views.messages.SenderProfile'] = require('./components/views/messages/SenderProfile');
module.exports.components['views.messages.TextualBody'] = require('./components/views/messages/TextualBody');
module.exports.components['views.messages.TextualEvent'] = require('./components/views/messages/TextualEvent');
module.exports.components['views.messages.UnknownBody'] = require('./components/views/messages/UnknownBody');
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 9a0d3dbbdd..245117387e 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -19,6 +19,7 @@ var sdk = require('../../index');
var dis = require("../../dispatcher");
var WhoIsTyping = require("../../WhoIsTyping");
var MatrixClientPeg = require("../../MatrixClientPeg");
+import {emojifyText} from '../../HtmlUtils';
module.exports = React.createClass({
displayName: 'RoomStatusBar',
@@ -259,10 +260,11 @@ module.exports = React.createClass({
}
var typingString = this.state.whoisTypingString;
+ const typingHtml = emojifyText(typingString);
if (typingString) {
return (