From eb8e9b08399c6d64e95112ea72cf4a525ca12d99 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Wed, 22 May 2019 11:13:20 -0300 Subject: [PATCH 1/4] fix emoji big --- app/emoji/client/emojiParser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/emoji/client/emojiParser.js b/app/emoji/client/emojiParser.js index 5a29931a5bd8..f4124dff23f4 100644 --- a/app/emoji/client/emojiParser.js +++ b/app/emoji/client/emojiParser.js @@ -18,7 +18,7 @@ Tracker.autorun(() => { callbacks.add('renderMessage', (message) => { if (s.trim(message.html)) { // ' to apostrophe (') for emojis such as :') - message.html = message.html.replace(/'/g, '\''); + message.html = s.trim(message.html.replace(/'/g, '\'')); // '
' to '
' for emojis such at line breaks message.html = message.html.replace(/
/g, '
'); From 34fd01a665fecff8c5ecfd2fd74602c77c4637bb Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Wed, 22 May 2019 11:14:27 -0300 Subject: [PATCH 2/4] improve render performance --- app/emoji-emojione/lib/emojioneRender.js | 6 +- app/emoji-emojione/lib/rocketchat.js | 124 +++++++++++------------ 2 files changed, 64 insertions(+), 66 deletions(-) diff --git a/app/emoji-emojione/lib/emojioneRender.js b/app/emoji-emojione/lib/emojioneRender.js index 45a9bb1a2a9e..b5ada6236414 100644 --- a/app/emoji-emojione/lib/emojioneRender.js +++ b/app/emoji-emojione/lib/emojioneRender.js @@ -1,11 +1,9 @@ import emojione from 'emojione'; -const fixClass = (html) => html.replace(/class="emojione emojione-32-/g, 'class="emojione emojione-'); - export function emojioneRender(message) { - return fixClass(emojione.toImage(message)); + return emojione.toImage(message); } export function emojioneRenderFromShort(message) { - return fixClass(emojione.shortnameToImage(message)); + return emojione.shortnameToImage(message); } diff --git a/app/emoji-emojione/lib/rocketchat.js b/app/emoji-emojione/lib/rocketchat.js index b46afd0e0617..7d7d400b6f94 100644 --- a/app/emoji-emojione/lib/rocketchat.js +++ b/app/emoji-emojione/lib/rocketchat.js @@ -1,6 +1,7 @@ import emojione from 'emojione'; import { Meteor } from 'meteor/meteor'; import { Tracker } from 'meteor/tracker'; +import mem from 'mem'; import { emojioneRender, emojioneRenderFromShort } from './emojioneRender'; import { emojisByCategory, emojiCategories, toneList } from './emojiPicker'; @@ -166,76 +167,75 @@ emojione.emojioneList[':asterisk_symbol:'] = { // fix for :+1: - had to replace all function that does its conversion: https://github.com/joypixels/emojione/blob/4.5.0/lib/js/emojione.js#L249 (function(ns) { - ns.shortnameToImage = function(str) { - // replace regular shortnames first - let replaceWith; let shortname; let unicode; let fname; let alt; let category; let title; let size; let ePath; - const mappedUnicode = ns.mapUnicodeToShort(); - str = str.replace(ns.regShortNames, function(shortname) { - // the fix is basically adding this .replace(/[+]/g, '\\$&') - if ((typeof shortname === 'undefined') || (shortname === '') || (ns.shortnames.indexOf(shortname.replace(/[+]/g, '\\$&')) === -1)) { - // if the shortname doesnt exist just return the entire match - return shortname; - } + const convertShortName = mem(function(shortname) { + // the fix is basically adding this .replace(/[+]/g, '\\$&') + if ((typeof shortname === 'undefined') || (shortname === '') || (ns.shortnames.indexOf(shortname.replace(/[+]/g, '\\$&')) === -1)) { + // if the shortname doesnt exist just return the entire match + return shortname; + } - // map shortname to parent - if (!ns.emojioneList[shortname]) { - for (const emoji in ns.emojioneList) { - if (!ns.emojioneList.hasOwnProperty(emoji) || (emoji === '')) { continue; } - if (ns.emojioneList[emoji].shortnames.indexOf(shortname) === -1) { continue; } - shortname = emoji; - break; - } - } - unicode = ns.emojioneList[shortname].uc_output; - fname = ns.emojioneList[shortname].uc_base; - category = fname.indexOf('-1f3f') >= 0 ? 'diversity' : ns.emojioneList[shortname].category; - title = ns.imageTitleTag ? `title="${ shortname }"` : ''; - size = ns.spriteSize === '32' || ns.spriteSize === '64' ? ns.spriteSize : '32'; - // if the emoji path has been set, we'll use the provided path, otherwise we'll use the default path - ePath = ns.defaultPathPNG !== ns.imagePathPNG ? ns.imagePathPNG : `${ ns.defaultPathPNG + ns.emojiSize }/`; - - // depending on the settings, we'll either add the native unicode as the alt tag, otherwise the shortname - alt = ns.unicodeAlt ? ns.convert(unicode.toUpperCase()) : shortname; - - if (ns.sprites) { - replaceWith = `${ alt }`; - } else { - replaceWith = `${ alt }`; + // map shortname to parent + if (!ns.emojioneList[shortname]) { + for (const emoji in ns.emojioneList) { + if (!ns.emojioneList.hasOwnProperty(emoji) || (emoji === '')) { continue; } + if (ns.emojioneList[emoji].shortnames.indexOf(shortname) === -1) { continue; } + shortname = emoji; + break; } + } + + const unicode = ns.emojioneList[shortname].uc_output; + const fname = ns.emojioneList[shortname].uc_base; + const category = fname.indexOf('-1f3f') >= 0 ? 'diversity' : ns.emojioneList[shortname].category; + const title = ns.imageTitleTag ? `title="${ shortname }"` : ''; + // const size = ns.spriteSize === '32' || ns.spriteSize === '64' ? ns.spriteSize : '32'; + // if the emoji path has been set, we'll use the provided path, otherwise we'll use the default path + const ePath = ns.defaultPathPNG !== ns.imagePathPNG ? ns.imagePathPNG : `${ ns.defaultPathPNG + ns.emojiSize }/`; + + // depending on the settings, we'll either add the native unicode as the alt tag, otherwise the shortname + const alt = ns.unicodeAlt ? ns.convert(unicode.toUpperCase()) : shortname; - return replaceWith; - }); + if (ns.sprites) { + return `${ alt }`; + } + return `${ alt }`; + }); + + const convertUnicode = mem(function(entire, m1, m2, m3) { + const mappedUnicode = ns.mapUnicodeToShort(); + + if ((typeof m3 === 'undefined') || (m3 === '') || !(ns.unescapeHTML(m3) in ns.asciiList)) { + // if the ascii doesnt exist just return the entire match + return entire; + } + + m3 = ns.unescapeHTML(m3); + const unicode = ns.asciiList[m3]; + const shortname = mappedUnicode[unicode]; + const category = unicode.indexOf('-1f3f') >= 0 ? 'diversity' : ns.emojioneList[shortname].category; + const title = ns.imageTitleTag ? `title="${ ns.escapeHTML(m3) }"` : ''; + // const size = ns.spriteSize === '32' || ns.spriteSize === '64' ? ns.spriteSize : '32'; + // if the emoji path has been set, we'll use the provided path, otherwise we'll use the default path + const ePath = ns.defaultPathPNG !== ns.imagePathPNG ? ns.imagePathPNG : `${ ns.defaultPathPNG + ns.emojiSize }/`; + + // depending on the settings, we'll either add the native unicode as the alt tag, otherwise the shortname + const alt = ns.unicodeAlt ? ns.convert(unicode.toUpperCase()) : ns.escapeHTML(m3); + + if (ns.sprites) { + return `${ m2 }${ alt }`; + } + return `${ m2 }${ alt }`; + }); + + ns.shortnameToImage = function(str) { + // replace regular shortnames first + str = str.replace(ns.regShortNames, convertShortName); // if ascii smileys are turned on, then we'll replace them! if (ns.ascii) { const asciiRX = ns.riskyMatchAscii ? ns.regAsciiRisky : ns.regAscii; - str = str.replace(asciiRX, function(entire, m1, m2, m3) { - if ((typeof m3 === 'undefined') || (m3 === '') || !(ns.unescapeHTML(m3) in ns.asciiList)) { - // if the ascii doesnt exist just return the entire match - return entire; - } - - m3 = ns.unescapeHTML(m3); - unicode = ns.asciiList[m3]; - shortname = mappedUnicode[unicode]; - category = unicode.indexOf('-1f3f') >= 0 ? 'diversity' : ns.emojioneList[shortname].category; - title = ns.imageTitleTag ? `title="${ ns.escapeHTML(m3) }"` : ''; - size = ns.spriteSize === '32' || ns.spriteSize === '64' ? ns.spriteSize : '32'; - // if the emoji path has been set, we'll use the provided path, otherwise we'll use the default path - ePath = ns.defaultPathPNG !== ns.imagePathPNG ? ns.imagePathPNG : `${ ns.defaultPathPNG + ns.emojiSize }/`; - - // depending on the settings, we'll either add the native unicode as the alt tag, otherwise the shortname - alt = ns.unicodeAlt ? ns.convert(unicode.toUpperCase()) : ns.escapeHTML(m3); - - if (ns.sprites) { - replaceWith = `${ m2 }${ alt }`; - } else { - replaceWith = `${ m2 }${ alt }`; - } - - return replaceWith; - }); + return str.replace(asciiRX, convertUnicode); } return str; From 1424f2e265a76c3468ae79a59aa4038f65f22e0c Mon Sep 17 00:00:00 2001 From: Diego Sampaio Date: Wed, 22 May 2019 12:27:27 -0300 Subject: [PATCH 3/4] Memoize two more functions --- app/emoji-emojione/lib/rocketchat.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/emoji-emojione/lib/rocketchat.js b/app/emoji-emojione/lib/rocketchat.js index 7d7d400b6f94..b9e9aafb33b3 100644 --- a/app/emoji-emojione/lib/rocketchat.js +++ b/app/emoji-emojione/lib/rocketchat.js @@ -167,6 +167,9 @@ emojione.emojioneList[':asterisk_symbol:'] = { // fix for :+1: - had to replace all function that does its conversion: https://github.com/joypixels/emojione/blob/4.5.0/lib/js/emojione.js#L249 (function(ns) { + ns.shortnameConversionMap = mem(ns.shortnameConversionMap); + ns.unicodeCharRegex = mem(ns.unicodeCharRegex); + const convertShortName = mem(function(shortname) { // the fix is basically adding this .replace(/[+]/g, '\\$&') if ((typeof shortname === 'undefined') || (shortname === '') || (ns.shortnames.indexOf(shortname.replace(/[+]/g, '\\$&')) === -1)) { From 89587f53dc673956caf2b2112a10e08e14e31d7e Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Wed, 22 May 2019 16:12:36 -0300 Subject: [PATCH 4/4] fix multiple big emojis --- app/emoji/client/emojiParser.js | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/app/emoji/client/emojiParser.js b/app/emoji/client/emojiParser.js index f4124dff23f4..1d7ad1f05c99 100644 --- a/app/emoji/client/emojiParser.js +++ b/app/emoji/client/emojiParser.js @@ -16,38 +16,39 @@ Tracker.autorun(() => { return callbacks.remove('renderMessage', 'emoji'); } callbacks.add('renderMessage', (message) => { - if (s.trim(message.html)) { + let html = s.trim(message.html); + if (html) { // ' to apostrophe (') for emojis such as :') - message.html = s.trim(message.html.replace(/'/g, '\'')); + html = html.replace(/'/g, '\''); // '
' to '
' for emojis such at line breaks - message.html = message.html.replace(/
/g, '
'); + html = html.replace(/
/g, '
'); - message.html = Object.entries(emoji.packages).reduce((value, [, emojiPackage]) => emojiPackage.render(value), message.html); + html = Object.entries(emoji.packages).reduce((value, [, emojiPackage]) => emojiPackage.render(value), html); const checkEmojiOnly = document.createElement('div'); - checkEmojiOnly.innerHTML = message.html; + checkEmojiOnly.innerHTML = html; const emojis = Array.from(checkEmojiOnly.querySelectorAll('.emoji:not(:empty), .emojione:not(:empty)')); - for (let i = 0, len = emojis.length; i < len; i++) { - const { classList } = emojis[i]; - classList.add('big'); - } - const emojiOnly = checkEmojiOnly.childNodes.length === emojis.length; + const emojiOnly = emojis.length && !Array.from(checkEmojiOnly.childNodes).filter((node) => node.nodeType === Node.TEXT_NODE).map((el) => el.nodeValue).join('').trim(); if (emojiOnly) { - message.html = checkEmojiOnly.innerHTML; + for (let i = 0, len = emojis.length; i < len; i++) { + const { classList } = emojis[i]; + classList.add('big'); + } + html = checkEmojiOnly.innerHTML; } // apostrophe (') back to ' - message.html = message.html.replace(/\'/g, '''); + html = html.replace(/\'/g, '''); // apostrophe '
' back to '
' - message.html = message.html.replace(/
/g, '
'); + html = html.replace(/
/g, '
'); } - return message; + return { ...message, html }; }, callbacks.priority.LOW, 'emoji'); });