Regression: Handle missing emojis (#14641)

app/emoji/client/emojiPicker.js

@@ -9,7 +9,7 @@ import { emoji } from '../lib/rocketchat';
 
 const emojiListByCategory = new ReactiveDict('emojiList');
 
-const getEmojiElement = (emoji, image) => `<li class="emoji-${ emoji } emoji-picker-item" data-emoji="${ emoji }" title="${ emoji }">${ image }</li>`;
+const getEmojiElement = (emoji, image) => image && `<li class="emoji-${ emoji } emoji-picker-item" data-emoji="${ emoji }" title="${ emoji }">${ image }</li>`;
 
 const createEmojiList = (category, actualTone) => {
 	const html = Object.values(emoji.packages).map((emojiPackage) => {

app/emoji/client/lib/EmojiPicker.js

@@ -134,6 +134,14 @@ export const EmojiPicker = {
 		emoji.packages.base.emojisByCategory.recent = this.recent;
 		this.updateRecent('recent');
 	},
+	removeFromRecent(_emoji) {
+		const pos = this.recent.indexOf(_emoji);
+		if (pos === -1) {
+			return;
+		}
+		this.recent.splice(pos, 1);
+		window.localStorage.setItem('emoji.recent', this.recent);
+	},
 	updateRecent(category) {
 		updateRecentEmoji(category);
 	},

app/emoji/lib/rocketchat.js

@@ -1,5 +1,14 @@
 import { emojioneRender } from '../../emoji-emojione/lib/emojioneRender';
 
+let EmojiPicker;
+const removeFromRecent = (emoji) => {
+	if (!EmojiPicker) {
+		// since this function will be only called client side, the import needs to happen here
+		({ EmojiPicker } = require('../client/lib/EmojiPicker'));
+	}
+	EmojiPicker.removeFromRecent(emoji.replace(/(^:|:$)/g, ''));
+};
+
 export const emoji = {
 	packages: {
 		base: {
@@ -11,6 +20,10 @@ export const emoji = {
 			toneList: {},
 			render: emojioneRender,
 			renderPicker(emojiToRender) {
+				if (!emoji.list[emojiToRender]) {
+					removeFromRecent(emojiToRender);
+					return;
+				}
 				const correctPackage = emoji.list[emojiToRender].emojiPackage;
 				return emoji.packages[correctPackage].renderPicker(emojiToRender);
 			},