Upgrade emoji support to Unicode v12

package.json

@@ -78,8 +78,8 @@
     "electron-editor-context-menu": "1.1.1",
     "electron-mocha": "8.1.1",
     "electron-notarize": "0.1.1",
-    "emoji-datasource": "4.1.0",
+    "emoji-datasource": "5.0.1",
-    "emoji-datasource-apple": "4.1.0",
+    "emoji-datasource-apple": "5.0.1",
     "emoji-regex": "8.0.0",
     "filesize": "3.6.1",
     "firstline": "1.2.1",
@@ -365,7 +365,7 @@
       "sticker-creator/preload.js",
       "sticker-creator/dist/**",
       "!node_modules/emoji-datasource/emoji_pretty.json",
-      "!node_modules/emoji-datasource/*.png",
+      "!node_modules/emoji-datasource/**/*.png",
       "!node_modules/emoji-datasource-apple/emoji_pretty.json",
       "!node_modules/emoji-datasource-apple/img/apple/sheets*",
       "!node_modules/spellchecker/vendor/hunspell/**/*",

ts/components/emoji/EmojiPicker.tsx

@@ -177,6 +177,8 @@ export const EmojiPicker = React.memo(
       // Focus after initial render, restore focus on teardown
       useRestoreFocus(focusRef);
 
+      const [, ...renderableCategories] = categories;
+
       const emojiGrid = React.useMemo(() => {
         if (searchText) {
           return chunk(
@@ -185,9 +187,7 @@ export const EmojiPicker = React.memo(
           );
         }
 
-        const [, ...cats] = categories;
+        const chunks = flatMap(renderableCategories, cat =>
-
-        const chunks = flatMap(cats, cat =>
           chunk(
             dataByCategory[cat].map(e => e.short_name),
             COL_COUNT
@@ -201,9 +201,8 @@ export const EmojiPicker = React.memo(
         const rowEnds: Array<number> = [
           Math.ceil(firstRecent.length / COL_COUNT) - 1,
         ];
-        const [, ...cats] = categories;
 
-        cats.forEach(cat => {
+        renderableCategories.forEach(cat => {
           rowEnds.push(
             Math.ceil(dataByCategory[cat].length / COL_COUNT) +
               (last(rowEnds) as number)

ts/components/emoji/lib.ts

@@ -68,9 +68,19 @@ export type EmojiData = {
   };
 };
 
-const data = (untypedData as Array<EmojiData>).filter(
+const data = (untypedData as Array<EmojiData>)
-  emoji => emoji.has_img_apple
+  .filter(emoji => emoji.has_img_apple)
-);
+  .map(emoji =>
+    // Why this weird map?
+    // the emoji dataset has two separate categories for Emotions and People
+    // yet in our UI we display these as a single merged category. In order
+    // for the emojis to be sorted properly we're manually incrementing the
+    // sort_order for the People & Body emojis so that they fall below the
+    // Smiley & Emotions category.
+    emoji.category === 'People & Body'
+      ? { ...emoji, sort_order: emoji.sort_order + 1000 }
+      : emoji
+  );
 
 // @ts-ignore
 const ROOT_PATH = get(
@@ -153,7 +163,11 @@ export const dataByCategory = mapValues(
       return 'travel';
     }
 
-    if (category === 'Smileys & People') {
+    if (category === 'Smileys & Emotion') {
+      return 'emoji';
+    }
+
+    if (category === 'People & Body') {
       return 'emoji';
     }
 
@@ -175,7 +189,15 @@ export function getEmojiData(
   if (skinTone && base.skin_variations) {
     const variation = isNumber(skinTone) ? skinTones[skinTone - 1] : skinTone;
 
-    return base.skin_variations[variation];
+    if (base.skin_variations[variation]) {
+      return base.skin_variations[variation];
+    }
+
+    // For emojis that have two people in them which can have diff skin tones
+    // the Map is of SkinTone-SkinTone. If we don't find the correct skin tone
+    // in the list of variations then we assume it is one of those double skin
+    // emojis and we default to both people having same skin.
+    return base.skin_variations[`${variation}-${variation}`];
   }
 
   return base;
@@ -185,9 +207,9 @@ export function getImagePath(
   shortName: keyof typeof dataByShortName,
   skinTone?: SkinToneKey | number
 ): string {
-  const { image } = getEmojiData(shortName, skinTone);
+  const emojiData = getEmojiData(shortName, skinTone);
 
-  return makeImagePath(image);
+  return makeImagePath(emojiData.image);
 }
 
 const fuse = new Fuse(data, {

yarn.lock

@@ -6107,15 +6107,15 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
-emoji-datasource-apple@4.1.0:
+emoji-datasource-apple@5.0.1:
-  version "4.1.0"
+  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/emoji-datasource-apple/-/emoji-datasource-apple-4.1.0.tgz#e6725311b115144a32fb60043416a755fea30bf5"
+  resolved "https://registry.yarnpkg.com/emoji-datasource-apple/-/emoji-datasource-apple-5.0.1.tgz#fd3a3fb9993f1c58a53b015e3a30fe640641044f"
-  integrity sha1-5nJTEbEVFEoy+2AENBanVf6jC/U=
+  integrity sha512-VmbD3iwv5FS2XUuxzmRpkicGNwXWrMe45f5ZL6YkcMznp0YtCsKO2bCxsSZ41XU1aWtwH5IZDqF12038TC01kw==
 
-emoji-datasource@4.1.0:
+emoji-datasource@5.0.1:
-  version "4.1.0"
+  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/emoji-datasource/-/emoji-datasource-4.1.0.tgz#b44557f78a2dfac2f350393391b170a567ec28ad"
+  resolved "https://registry.yarnpkg.com/emoji-datasource/-/emoji-datasource-5.0.1.tgz#31eaaff7caa6640929327b4f4ff66f2bf313df0a"
-  integrity sha1-tEVX94ot+sLzUDkzkbFwpWfsKK0=
+  integrity sha512-RXokuCv4o8RFLiigN1skAdZwJuJWqtBvcK3GVKpvAL/7BeH95enmKsli7cG8YZ85RTjyEe3+GAdpJJOV43KLKQ==
 
 emoji-regex@8.0.0, emoji-regex@^8.0.0:
   version "8.0.0"