Merge pull request #3600 from matrix-org/jryans/thumb-variation-again

Restore thumbs after variation selector removal

src/HtmlUtils.js

@@ -53,7 +53,6 @@ const ZWJ_REGEX = new RegExp("\u200D|\u2003", "g");
 const WHITESPACE_REGEX = new RegExp("\\s", "g");
 
 const BIGEMOJI_REGEX = new RegExp(`^(${EMOJIBASE_REGEX.source})+$`, 'i');
-const SINGLE_EMOJI_REGEX = new RegExp(`^(${EMOJIBASE_REGEX.source})$`, 'i');
 
 const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
 
@@ -72,6 +71,21 @@ function mightContainEmoji(str) {
     return SURROGATE_PAIR_PATTERN.test(str) || SYMBOL_PATTERN.test(str);
 }
 
+/**
+ * Find emoji data in emojibase by character.
+ *
+ * @param {String} char The emoji character
+ * @return {Object} The emoji data
+ */
+export function findEmojiData(char) {
+    // Check against both the char and the char with an empty variation selector
+    // appended because that's how emojibase stores its base emojis which have
+    // variations.
+    // See also https://github.com/vector-im/riot-web/issues/9785.
+    const emptyVariation = char + VARIATION_SELECTOR;
+    return EMOJIBASE.find(e => e.unicode === char || e.unicode === emptyVariation);
+}
+
 /**
  * Returns the shortcode for an emoji character.
  *
@@ -79,10 +93,7 @@ function mightContainEmoji(str) {
  * @return {String} The shortcode (such as :thumbup:)
  */
 export function unicodeToShortcode(char) {
-    // Check against both the char and the char with an empty variation selector appended because that's how
+    const data = findEmojiData(char);
-    // emoji-base stores its base emojis which have variations. https://github.com/vector-im/riot-web/issues/9785
-    const emptyVariation = char + VARIATION_SELECTOR;
-    const data = EMOJIBASE.find(e => e.unicode === char || e.unicode === emptyVariation);
     return (data && data.shortcodes ? `:${data.shortcodes[0]}:` : '');
 }
 

src/components/views/emojipicker/EmojiPicker.js

@@ -48,7 +48,14 @@ const DATA_BY_CATEGORY = {
 };
 const DATA_BY_EMOJI = {};
 
+const VARIATION_SELECTOR = String.fromCharCode(0xFE0F);
 EMOJIBASE.forEach(emoji => {
+    if (emoji.unicode.includes(VARIATION_SELECTOR)) {
+        // Clone data into variation-less version
+        emoji = Object.assign({}, emoji, {
+            unicode: emoji.unicode.replace(VARIATION_SELECTOR, ""),
+        });
+    }
     DATA_BY_EMOJI[emoji.unicode] = emoji;
     const categoryId = EMOJIBASE_CATEGORY_IDS[emoji.group];
     if (DATA_BY_CATEGORY.hasOwnProperty(categoryId)) {
@@ -82,7 +89,10 @@ class EmojiPicker extends React.Component {
             viewportHeight: 280,
         };
 
-        this.recentlyUsed = recent.get().map(unicode => DATA_BY_EMOJI[unicode]);
+        // Convert recent emoji characters to emoji data, removing unknowns.
+        this.recentlyUsed = recent.get()
+            .map(unicode => DATA_BY_EMOJI[unicode])
+            .filter(data => !!data);
         this.memoizedDataByCategory = {
             recent: this.recentlyUsed,
             ...DATA_BY_CATEGORY,

src/components/views/emojipicker/QuickReactions.js

@@ -16,17 +16,19 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import EMOJIBASE from 'emojibase-data/en/compact.json';
 
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import { findEmojiData } from '../../../HtmlUtils';
 
-const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀", "👀"];
+const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀", "👀"].map(emoji => {
-EMOJIBASE.forEach(emoji => {
+    const data = findEmojiData(emoji);
-    const index = QUICK_REACTIONS.indexOf(emoji.unicode);
+    if (!data) {
-    if (index !== -1) {
+        throw new Error(`Emoji ${emoji} doesn't exist in emojibase`);
-        QUICK_REACTIONS[index] = emoji;
     }
+    // Prefer our unicode value for quick reactions (which does not have
+    // variation selectors).
+    return Object.assign({}, data, { unicode: emoji });
 });
 
 class QuickReactions extends React.Component {