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 (