[IMPROVEMENT] patch to improve emoji render (RocketChat#14722)

* path to improve emoji render * Apply suggestions from code review Co-Authored-By: Tasso Evangelista <tasso.evangelista@rocket.chat>
WideChat · Jul 12, 2019 · b395b50 · b395b50
1 parent 7adfeca
commit b395b50
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 13 deletions.
diff --git a/app/emoji-emojione/lib/rocketchat.js b/app/emoji-emojione/lib/rocketchat.js
@@ -230,6 +230,23 @@ emojione.emojioneList[':asterisk_symbol:'] = {
 		return `${ m2 }<img class="emojione" alt="${ alt }" ${ title } src="${ ePath }${ unicode }${ ns.fileExtension }"/>`;
 	});
 
+	ns.convert = mem(ns.convert);
+
+	const reg = (escapedFind) =>
+		new RegExp(
+			`<object[^>]*>.*?</object>|<span[^>]*>.*?</span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|(${ escapedFind })`,
+			'gi'
+		);
+	// callback prevents replacing anything inside of these common html tags as well as between an <object></object> tag
+	const replace = function(entire, m1) {
+		return typeof m1 === 'undefined' || m1 === '' ? entire : '';
+	};
+	ns.escapeRegExp = mem(ns.escapeRegExp);
+	ns.replaceAllVS16 = function(string, find) {
+		const escapedFind = ns.escapeRegExp(find); // sorted largest output to smallest output
+		const search = reg(escapedFind);
+		return string.replace(search, replace);
+	};
 	ns.shortnameToImage = function(str) {
 		// replace regular shortnames first
 		str = str.replace(ns.regShortNames, convertShortName);

diff --git a/app/emoji/client/emojiParser.js b/app/emoji/client/emojiParser.js
@@ -11,6 +11,9 @@ import { emoji } from '../lib/rocketchat';
  * @param {Object} message - The message object
  */
 
+const pipe = (f, x) => (e) => x(f(e));
+const parser = Object.entries(emoji.packages).map(([, emojiPackage]) => emojiPackage.render.bind(emojiPackage)).reduce(pipe);
+
 Tracker.autorun(() => {
 	if (!getUserPreference(Meteor.userId(), 'useEmojis')) {
 		return callbacks.remove('renderMessage', 'emoji');
@@ -24,7 +27,7 @@ Tracker.autorun(() => {
 			// '<br>' to ' <br> ' for emojis such at line breaks
 			html = html.replace(/<br>/g, ' <br> ');
 
-			html = Object.entries(emoji.packages).reduce((value, [, emojiPackage]) => emojiPackage.render(value), html);
+			html = parser(html);
 
 			const checkEmojiOnly = document.createElement('div');
 

diff --git a/app/utils/lib/getUserAvatarURL.js b/app/utils/lib/getUserAvatarURL.js
@@ -1,19 +1,40 @@
 import { Session } from 'meteor/session';
+import { Meteor } from 'meteor/meteor';
 import { Tracker } from 'meteor/tracker';
 
 import { getAvatarURL } from './getAvatarURL';
 import { settings } from '../../settings';
 
-export const getUserAvatarURL = function(username) {
-	const externalSource = (settings.get('Accounts_AvatarExternalProviderUrl') || '').trim().replace(/\/$/, '');
-	if (externalSource !== '') {
-		return externalSource.replace('{username}', username);
-	}
-	if (username == null) {
-		return;
-	}
-	const key = `avatar_random_${ username }`;
-	const cache = Tracker.nonreactive(() => Session && Session.get(key)); // there is no Session on server
+let externalSource = '';
 
-	return getAvatarURL({ username, cache });
-};
+if (Meteor.isServer) {
+	settings.get('Accounts_AvatarExternalProviderUrl', (key, value = '') => {
+		externalSource = value.trim().replace(/\/$/, '');
+	});
+} else {
+	Tracker.autorun(function() {
+		externalSource = (settings.get('Accounts_AvatarExternalProviderUrl') || '').trim().replace(/\/$/, '');
+	});
+}
+
+export const getUserAvatarURL = Meteor.isServer
+	? function(username) {
+		if (username == null) {
+			return;
+		}
+		if (externalSource !== '') {
+			return externalSource.replace('{username}', username);
+		}
+		return getAvatarURL({ username });
+	}
+	: function(username) {
+		if (username == null) {
+			return;
+		}
+		if (externalSource !== '') {
+			return externalSource.replace('{username}', username);
+		}
+		const key = `avatar_random_${ username }`;
+		const cache = Tracker.nonreactive(() => Session.get(key));
+		return getAvatarURL({ username, cache });
+	};