[Glitch] Add emoji from Twemoji 15.0 to the emoji picker/completion

Port debe6c0545 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx

@@ -12,12 +12,15 @@ import Overlay from 'react-overlays/Overlay';
 
 import MoodIcon from '@/material-icons/400-20px/mood.svg?react';
 import { IconButton } from 'flavours/glitch/components/icon_button';
+import emojiCompressed from 'flavours/glitch/features/emoji/emoji_compressed';
 import { useSystemEmojiFont } from 'flavours/glitch/initial_state';
 import { assetHost } from 'flavours/glitch/utils/config';
 
 import { buildCustomEmojis, categoriesFromEmojis } from '../../emoji/emoji';
 import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
 
+const nimblePickerData = emojiCompressed[5];
+
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
   emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' },
@@ -38,15 +41,18 @@ let EmojiPicker, Emoji; // load asynchronously
 
 const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true;
 
-const backgroundImageFn = () => `${assetHost}/emoji/sheet_13.png`;
+const backgroundImageFn = () => `${assetHost}/emoji/sheet_15.png`;
 
 const notFoundFn = () => (
   <div className='emoji-mart-no-results'>
     <Emoji
+      data={nimblePickerData}
       emoji='sleuth_or_spy'
       set='twitter'
       size={32}
       sheetSize={32}
+      sheetColumns={62}
+      sheetRows={62}
       backgroundImageFn={backgroundImageFn}
     />
 
@@ -68,7 +74,7 @@ class ModifierPickerMenu extends PureComponent {
     this.props.onSelect(e.currentTarget.getAttribute('data-index') * 1);
   };
 
-  UNSAFE_componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.active) {
       this.attachListeners();
     } else {
@@ -76,7 +82,7 @@ class ModifierPickerMenu extends PureComponent {
     }
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     this.removeListeners();
   }
 
@@ -86,12 +92,12 @@ class ModifierPickerMenu extends PureComponent {
     }
   };
 
-  attachListeners () {
+  attachListeners() {
     document.addEventListener('click', this.handleDocumentClick, { capture: true });
     document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
   }
 
-  removeListeners () {
+  removeListeners() {
     document.removeEventListener('click', this.handleDocumentClick, { capture: true });
     document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
   }
@@ -100,17 +106,17 @@ class ModifierPickerMenu extends PureComponent {
     this.node = c;
   };
 
-  render () {
+  render() {
     const { active } = this.props;
 
     return (
       <div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={this.setRef}>
-        <button type='button' onClick={this.handleClick} data-index={1}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
-        <button type='button' onClick={this.handleClick} data-index={2}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
-        <button type='button' onClick={this.handleClick} data-index={3}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
-        <button type='button' onClick={this.handleClick} data-index={4}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
-        <button type='button' onClick={this.handleClick} data-index={5}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
-        <button type='button' onClick={this.handleClick} data-index={6}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
+        <button type='button' onClick={this.handleClick} data-index={1}><Emoji data={nimblePickerData} sheetColumns={62} sheetRows={62} emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
+        <button type='button' onClick={this.handleClick} data-index={2}><Emoji data={nimblePickerData} sheetColumns={62} sheetRows={62} emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
+        <button type='button' onClick={this.handleClick} data-index={3}><Emoji data={nimblePickerData} sheetColumns={62} sheetRows={62} emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
+        <button type='button' onClick={this.handleClick} data-index={4}><Emoji data={nimblePickerData} sheetColumns={62} sheetRows={62} emoji='fist' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
+        <button type='button' onClick={this.handleClick} data-index={5}><Emoji data={nimblePickerData} sheetColumns={62} sheetRows={62} emoji='fist' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
+        <button type='button' onClick={this.handleClick} data-index={6}><Emoji data={nimblePickerData} sheetColumns={62} sheetRows={62} emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
       </div>
     );
   }
@@ -145,7 +151,7 @@ class ModifierPicker extends PureComponent {
 
     return (
       <div className='emoji-picker-dropdown__modifiers'>
-        <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} />
+        <Emoji data={nimblePickerData} sheetColumns={62} sheetRows={62} emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} />
         <ModifierPickerMenu active={active} onSelect={this.handleSelect} onClose={this.props.onClose} />
       </div>
     );
@@ -185,7 +191,7 @@ class EmojiPickerMenuImpl extends PureComponent {
     }
   };
 
-  componentDidMount () {
+  componentDidMount() {
     document.addEventListener('click', this.handleDocumentClick, { capture: true });
     document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
 
@@ -200,7 +206,7 @@ class EmojiPickerMenuImpl extends PureComponent {
     });
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     document.removeEventListener('click', this.handleDocumentClick, { capture: true });
     document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
   }
@@ -253,7 +259,7 @@ class EmojiPickerMenuImpl extends PureComponent {
     this.props.onSkinTone(modifier);
   };
 
-  render () {
+  render() {
     const { loading, style, intl, custom_emojis, skinTone, frequentlyUsedEmojis } = this.props;
 
     if (loading) {
@@ -281,6 +287,9 @@ class EmojiPickerMenuImpl extends PureComponent {
     return (
       <div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}>
         <EmojiPicker
+          data={nimblePickerData}
+          sheetColumns={62}
+          sheetRows={62}
           perLine={8}
           emojiSize={22}
           sheetSize={32}
@@ -347,7 +356,7 @@ class EmojiPickerDropdown extends PureComponent {
 
       EmojiPickerAsync().then(EmojiMart => {
         EmojiPicker = EmojiMart.Picker;
-        Emoji       = EmojiMart.Emoji;
+        Emoji = EmojiMart.Emoji;
 
         this.setState({ loading: false });
       }).catch(() => {
@@ -388,7 +397,7 @@ class EmojiPickerDropdown extends PureComponent {
     this.setState({ placement: state.placement });
   };
 
-  render () {
+  render() {
     const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
     const title = intl.formatMessage(messages.emoji);
     const { active, loading, placement } = this.state;
@@ -405,7 +414,7 @@ class EmojiPickerDropdown extends PureComponent {
         />
 
         <Overlay show={active} placement={placement} flip target={this.findTarget} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
-          {({ props, placement })=> (
+          {({ props, placement }) => (
             <div {...props} style={{ ...props.style }}>
               <div className={`dropdown-animation ${placement}`}>
                 <EmojiPickerMenu

app/javascript/flavours/glitch/features/emoji/emoji_compressed.d.ts

@@ -45,6 +45,7 @@ type EmojiCompressed = [
   Category[],
   Data['aliases'],
   EmojisWithoutShortCodes,
+  Data,
 ];
 
 /*

app/javascript/flavours/glitch/features/emoji/emoji_compressed.js

@@ -9,18 +9,91 @@
 
 // This version comment should be bumped each time the emoji data is changed
 // to ensure that the prevaled file is regenerated by Babel
-// version: 2
+// version: 3
 
-const { emojiIndex } = require('emoji-mart');
-let data = require('emoji-mart/data/all.json');
+// This json file contains the names of the categories.
+const emojiMart5LocalesData = require('@emoji-mart/data/i18n/en.json');
+const emojiMart5Data = require('@emoji-mart/data/sets/15/all.json');
 const { uncompress: emojiMartUncompress } = require('emoji-mart/dist/utils/data');
+const _ = require('lodash');
+
 
 const emojiMap = require('./emoji_map.json');
+// This json file is downloaded from https://github.com/iamcal/emoji-data/
+// and is used to correct the sheet coordinates since we're using that repo's sheet
+const emojiSheetData = require('./emoji_sheet.json');
 const { unicodeToFilename } = require('./unicode_to_filename');
 const { unicodeToUnifiedName } = require('./unicode_to_unified_name');
 
-if(data.compressed) {
-  data = emojiMartUncompress(data);
+// Grabbed from `emoji_utils` to avoid circular dependency
+function unifiedToNative(unified) {
+  let unicodes = unified.split('-'),
+    codePoints = unicodes.map((u) => `0x${u}`);
+
+  return String.fromCodePoint(...codePoints);
+}
+
+let data = {
+  compressed: true,
+  categories: emojiMart5Data.categories.map(cat => {
+    return {
+      ...cat,
+      name: emojiMart5LocalesData.categories[cat.id]
+    };
+  }),
+  aliases: emojiMart5Data.aliases,
+  emojis: _(emojiMart5Data.emojis).values().map(emoji => {
+    let skin_variations = {};
+    const unified = emoji.skins[0].unified.toUpperCase();
+    const emojiFromRawData = emojiSheetData.find(e => e.unified === unified);
+
+    if (!emojiFromRawData) {
+      return undefined;
+    }
+
+    if (emoji.skins.length > 1) {
+      const [, ...nonDefaultSkins] = emoji.skins;
+      nonDefaultSkins.forEach(skin => {
+        const [matchingRawCodePoints,matchingRawEmoji] = Object.entries(emojiFromRawData.skin_variations).find((pair) => {
+          const [, value] = pair;
+          return value.unified.toLowerCase() === skin.unified;
+        });
+
+        if (matchingRawEmoji && matchingRawCodePoints) {
+          // At the time of writing, the json from `@emoji-mart/data` doesn't have data
+          // for emoji like `woman-heart-woman` with two different skin tones.
+          const skinToneCode = matchingRawCodePoints.split('-')[0];
+          skin_variations[skinToneCode] = {
+            unified: matchingRawEmoji.unified.toUpperCase(),
+            non_qualified: null,
+            sheet_x: matchingRawEmoji.sheet_x,
+            sheet_y: matchingRawEmoji.sheet_y,
+            has_img_twitter: true,
+            native: unifiedToNative(matchingRawEmoji.unified.toUpperCase())
+          };
+        }
+      });
+    }
+
+    return {
+      a: emoji.name,
+      b: unified,
+      c: undefined,
+      f: true,
+      j: [emoji.id, ...emoji.keywords],
+      k: [emojiFromRawData.sheet_x, emojiFromRawData.sheet_y],
+      m: emoji.emoticons?.[0],
+      l: emoji.emoticons,
+      o: emoji.version,
+      id: emoji.id,
+      skin_variations,
+      native: unifiedToNative(unified.toUpperCase())
+    };
+  }).compact().keyBy(e => e.id).mapValues(e => _.omit(e, 'id')).value()
+};
+
+if (data.compressed) {
+  emojiMartUncompress(data);
 }
 
 const emojiMartData = data;
@@ -32,15 +105,10 @@ const shortcodeMap   = {};
 const shortCodesToEmojiData = {};
 const emojisWithoutShortCodes = [];
 
-Object.keys(emojiIndex.emojis).forEach(key => {
-  let emoji = emojiIndex.emojis[key];
+Object.keys(emojiMart5Data.emojis).forEach(key => {
+  let emoji = emojiMart5Data.emojis[key];
 
-  // Emojis with skin tone modifiers are stored like this
-  if (Object.hasOwn(emoji, '1')) {
-    emoji = emoji['1'];
-  }
-
-  shortcodeMap[emoji.native] = emoji.id;
+  shortcodeMap[emoji.skins[0].native] = emoji.id;
 });
 
 const stripModifiers = unicode => {
@@ -84,13 +152,9 @@ Object.keys(emojiMap).forEach(key => {
   }
 });
 
-Object.keys(emojiIndex.emojis).forEach(key => {
-  let emoji = emojiIndex.emojis[key];
+Object.keys(emojiMartData.emojis).forEach(key => {
+  let emoji = emojiMartData.emojis[key];
 
-  // Emojis with skin tone modifiers are stored like this
-  if (Object.hasOwn(emoji, '1')) {
-    emoji = emoji['1'];
-  }
 
   const { native } = emoji;
   let { short_names, search, unified } = emojiMartData.emojis[key];
@@ -135,4 +199,5 @@ module.exports = JSON.parse(JSON.stringify([
   emojiMartData.categories,
   emojiMartData.aliases,
   emojisWithoutShortCodes,
+  emojiMartData
 ]));

app/javascript/flavours/glitch/features/emoji/emoji_picker.js

@@ -1,5 +1,5 @@
-import Emoji from 'emoji-mart/dist-es/components/emoji/emoji';
-import Picker from 'emoji-mart/dist-es/components/picker/picker';
+import Emoji from 'emoji-mart/dist-es/components/emoji/nimble-emoji';
+import Picker from 'emoji-mart/dist-es/components/picker/nimble-picker';
 
 export {
   Picker,

app/javascript/flavours/glitch/features/emoji/emoji_sheet.json

@@ -0,0 +1 @@
+[{"unified":"0023-FE0F-20E3","sheet_x":0,"sheet_y":0,"skin_variations":{}},{"unified":"002A-FE0F-20E3","sheet_x":0,"sheet_y":1,"skin_variations":{}},{"unified":"0030-FE0F-20E3","sheet_x":0,"sheet_y":2,"skin_variations":{}},{"unified":"0031-FE0F-20E3","sheet_x":0,"sheet_y":3,"skin_variations":{}},{"unified":"0032-FE0F-20E3","sheet_x":0,"sheet_y":4,"skin_variations":{}},{"unified":"0033-FE0F-20E3","sheet_x":0,"sheet_y":5,"skin_variations":{}},{"unified":"0034-FE0F-20E3","sheet_x":0,"sheet_y":6,"skin_variations":{}},{"unified":"0035-FE0F-20E3","sheet_x":0,"sheet_y":7,"skin_variations":{}},{"unified":"0036-FE0F-20E3","sheet_x":0,"sheet_y":8,"skin_variations":{}},{"unified":"0037-FE0F-20E3","sheet_x":0,"sheet_y":9,"skin_variations":{}},{"unified":"0038-FE0F-20E3","sheet_x":0,"sheet_y":10,"skin_variations":{}},{"unified":"0039-FE0F-20E3","sheet_x":0,"sheet_y":11,"skin_variations":{}},{"unified":"00A9-FE0F","sheet_x":0,"sheet_y":12,"skin_variations":{}},{"unified":"00AE-FE0F","sheet_x":0,"sheet_y":13,"skin_variations":{}},{"unified":"1F004","sheet_x":0,"sheet_y":14,"skin_variations":{}},{"unified":"1F0CF","sheet_x":0,"sheet_y":15,"skin_variations":{}},{"unified":"1F170-FE0F","sheet_x":0,"sheet_y":16,"skin_variations":{}},{"unified":"1F171-FE0F","sheet_x":0,"sheet_y":17,"skin_variations":{}},{"unified":"1F17E-FE0F","sheet_x":0,"sheet_y":18,"skin_variations":{}},{"unified":"1F17F-FE0F","sheet_x":0,"sheet_y":19,"skin_variations":{}},{"unified":"1F18E","sheet_x":0,"sheet_y":20,"skin_variations":{}},{"unified":"1F191","sheet_x":0,"sheet_y":21,"skin_variations":{}},{"unified":"1F192","sheet_x":0,"sheet_y":22,"skin_variations":{}},{"unified":"1F193","sheet_x":0,"sheet_y":23,"skin_variations":{}},{"unified":"1F194","sheet_x":0,"sheet_y":24,"skin_variations":{}},{"unified":"1F195","sheet_x":0,"sheet_y":25,"skin_variations":{}},{"unified":"1F196","sheet_x":0,"sheet_y":26,"skin_variations":{}},{"unified":"1F197","sheet_x":0,"sheet_y":27,"skin_variations":{}},{"unified":"1F198","sheet_x":0,"sheet_y":28,"skin_variations":{}},{"unified":"1F199","sheet_x":0,"sheet_y":29,"skin_variations":{}},{"unified":"1F19A","sheet_x":0,"sheet_y":30,"skin_variations":{}},{"unified":"1F1E6-1F1E8","sheet_x":0,"sheet_y":31,"skin_variations":{}},{"unified":"1F1E6-1F1E9","sheet_x":0,"sheet_y":32,"skin_variations":{}},{"unified":"1F1E6-1F1EA","sheet_x":0,"sheet_y":33,"skin_variations":{}},{"unified":"1F1E6-1F1EB","sheet_x":0,"sheet_y":34,"skin_variations":{}},{"unified":"1F1E6-1F1EC","sheet_x":0,"sheet_y":35,"skin_variations":{}},{"unified":"1F1E6-1F1EE","sheet_x":0,"sheet_y":36,"skin_variations":{}},{"unified":"1F1E6-1F1F1","sheet_x":0,"sheet_y":37,"skin_variations":{}},{"unified":"1F1E6-1F1F2","sheet_x":0,"sheet_y":38,"skin_variations":{}},{"unified":"1F1E6-1F1F4","sheet_x":0,"sheet_y":39,"skin_variations":{}},{"unified":"1F1E6-1F1F6","sheet_x":0,"sheet_y":40,"skin_variations":{}},{"unified":"1F1E6-1F1F7","sheet_x":0,"sheet_y":41,"skin_variations":{}},{"unified":"1F1E6-1F1F8","sheet_x":0,"sheet_y":42,"skin_variations":{}},{"unified":"1F1E6-1F1F9","sheet_x":0,"sheet_y":43,"skin_variations":{}},{"unified":"1F1E6-1F1FA","sheet_x":0,"sheet_y":44,"skin_variations":{}},{"unified":"1F1E6-1F1FC","sheet_x":0,"sheet_y":45,"skin_variations":{}},{"unified":"1F1E6-1F1FD","sheet_x":0,"sheet_y":46,"skin_variations":{}},{"unified":"1F1E6-1F1FF","sheet_x":0,"sheet_y":47,"skin_variations":{}},{"unified":"1F1E7-1F1E6","sheet_x":0,"sheet_y":48,"skin_variations":{}},{"unified":"1F1E7-1F1E7","sheet_x":0,"sheet_y":49,"skin_variations":{}},{"unified":"1F1E7-1F1E9","sheet_x":0,"sheet_y":50,"skin_variations":{}},{"unified":"1F1E7-1F1EA","sheet_x":0,"sheet_y":51,"skin_variations":{}},{"unified":"1F1E7-1F1EB","sheet_x":0,"sheet_y":52,"skin_variations":{}},{"unified":"1F1E7-1F1EC","sheet_x":0,"sheet_y":53,"skin_variations":{}},{"unified":"1F1E7-1F1ED","sheet_x":0,"sheet_y":54,"skin_variations":{}},{"unified":"1F1E7-1F1EE","sheet_x":0,"sheet_y":55,"skin_variations":{}},{"unified":"1F1E7-1F1EF","sheet_x":0,"sheet_y":56,"skin_variations":{}},{"unified":"1F1E7-1F1F1","sheet_x":0,"sheet_y":57,"skin_variations":{}},{"unified":"1F1E7-1F1F2","sheet_x":0,"sheet_y":58,"skin_variations":{}},{"unified":"1F1E7-1F1F3","sheet_x":0,"sheet_y":59,"skin_variations":{}},{"unified":"1F1E7-1F1F4","sheet_x":0,"sheet_y":60,"skin_variations":{}},{"unified":"1F1E7-1F1F6","sheet_x":0,"sheet_y":61,"skin_variations":{}},{"unified":"1F1E7-1F1F7","sheet_x":1,"sheet_y":0,"skin_variations":{}},{"unified":"1F1E7-1F1F8","sheet_x":1,"sheet_y":1,"skin_variations":{}},{"unified":"1F1E7-1F1F9","sheet_x":1,"sheet_y":2,"skin_variations":{}},{"unified":"1F1E7-1F1FB","sheet_x":1,"sheet_y":3,"skin_variations":{}},{"unified":"1F1E7-1F1FC","sheet_x":1,"sheet_y":4,"skin_variations":{}},{"unified":"1F1E7-1F1FE","sheet_x":1,"sheet_y":5,"skin_variations":{}},{"unified":"1F1E7-1F1FF","sheet_x":1,"sheet_y":6,"skin_variations":{}},{"unified":"1F1E8-1F1E6","sheet_x":1,"sheet_y":7,"skin_variations":{}},{"unified":"1F1E8-1F1E8","Line truncated