fix: update emoji-mart, add dark mode and custom categories (#1686)

package.json

@@ -61,7 +61,7 @@
     "cross-env": "^6.0.3",
     "css-dedoupe": "^0.1.1",
     "css-loader": "^3.3.2",
-    "emoji-mart": "^2.11.1",
+    "emoji-mart": "^2.11.2",
     "emoji-regex": "^8.0.0",
     "encoding": "^0.1.12",
     "escape-html": "^1.0.3",

src/routes/_components/dialog/components/EmojiDialog.html

@@ -99,21 +99,6 @@
   import { on } from '../../../_utils/eventBus'
   import { createEmojiMartPicker } from '../../../_react/createEmojiMartPicker'
 
-  // Consistency with Mastodon FE, taken from
-  // app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
-  const categoriesSort = [
-    'recent',
-    'custom',
-    'people',
-    'nature',
-    'foods',
-    'activity',
-    'places',
-    'objects',
-    'symbols',
-    'flags'
-  ]
-
   export default {
     async oncreate () {
       onCreateDialog.call(this)
@@ -146,13 +131,13 @@
         ${$isVeryTinyMobileSize ? 'overflow-y: auto; overflow-x: hidden;' : ''}
       `),
       emojiMartPropsJson: ({ emojiMartProps }) => JSON.stringify(emojiMartProps),
-      emojiMartProps: ({ perLine, custom }) => ({
+      emojiMartProps: ({ perLine, customEmoji, categoriesSorted }) => ({
         perLine,
-        custom,
+        custom: customEmoji,
         color: 'var(--nav-bg)',
         emoji: 'sailboat',
         title: 'Emoji',
-        include: categoriesSort,
+        include: categoriesSorted,
         showPreview: true
       }),
       perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize, $isVeryTinyMobileSize }) => (
@@ -166,7 +151,31 @@
                 ? 9
                 : 10
       ),
-      custom: ({ $currentCustomEmoji, $autoplayGifs }) => {
+      categoriesSorted: ({ $currentCustomEmoji }) => {
+        // Consistency with Mastodon FE, taken from
+        // - app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
+        // - app/javascript/mastodon/features/emoji/emoji.js
+        const customCategories = new Set(['custom'])
+        for (const emoji of $currentCustomEmoji) {
+          if (emoji.category) {
+            customCategories.add(`custom-${emoji.category}`)
+          }
+        }
+
+        return [
+          'recent',
+          ...Array.from(customCategories).sort(),
+          'people',
+          'nature',
+          'foods',
+          'activity',
+          'places',
+          'objects',
+          'symbols',
+          'flags'
+        ]
+      },
+      customEmoji: ({ $currentCustomEmoji, $autoplayGifs }) => {
         if (!$currentCustomEmoji) {
           return []
         }
@@ -176,7 +185,8 @@
           text: `:${emoji.shortcode}:`,
           emoticons: [],
           keywords: [emoji.shortcode],
-          imageUrl: $autoplayGifs ? emoji.url : emoji.static_url
+          imageUrl: $autoplayGifs ? emoji.url : emoji.static_url,
+          customCategory: emoji.category
         }))
       },
       // it's jarring on mobile if the emoji picker automatically pops open the keyboard

src/routes/_react/createEmojiMartPickerFromData.js

@@ -6,16 +6,21 @@
 import NimblePicker from 'emoji-mart/dist-modern/components/picker/nimble-picker'
 import React from 'react'
 import { emit } from '../_utils/eventBus'
+import { store } from '../_store/store'
+import { isDarkTheme } from '../_utils/isDarkTheme'
 
 function onEmojiSelected (emoji) {
   emit('emoji-selected', emoji)
 }
 
 export default function createEmojiMartPickerFromData (data) {
-  return props => React.createElement(NimblePicker, Object.assign({
-    set: 'twitter', // same as Mastodon frontend
-    data, // same as Mastodon frontend
-    native: true,
-    onSelect: onEmojiSelected
-  }, props))
+  return props => (
+    React.createElement(NimblePicker, Object.assign({
+      set: 'twitter', // same as Mastodon frontend
+      data, // same as Mastodon frontend
+      native: true,
+      onSelect: onEmojiSelected,
+      darkMode: isDarkTheme(store.get().currentTheme)
+    }, props))
+  )
 }

src/routes/_utils/isDarkTheme.js

@@ -0,0 +1,7 @@
+import { themes } from '../_static/themes'
+import { DEFAULT_THEME } from './themeEngine'
+
+export function isDarkTheme (themeName) {
+  const theme = themes.find(_ => _.name === themeName) || themes.find(_ => _.name === DEFAULT_THEME)
+  return theme.dark
+}

yarn.lock

@@ -3552,10 +3552,10 @@ emittery@^0.4.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.4.1.tgz#abe9d3297389ba424ac87e53d1c701962ce7433d"
   integrity sha512-r4eRSeStEGf6M5SKdrQhhLK5bOwOBxQhIE3YSTnZE3GpKiLfnnhE+tPtrJE79+eDJgm39BM6LSoI8SCx4HbwlQ==
 
-emoji-mart@^2.11.1:
-  version "2.11.1"
-  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-2.11.1.tgz#fc9330b513803c17b98c9ad289c12ab61ff05f8f"
-  integrity sha512-Hr4N56YEkaPtmojO2dfgnMLLE/d5HpnhH0+M8cw9LRHpG2EgQQaCelRad3d5qQAPHI5+K0wMc/rwM0eRo0FnUA==
+emoji-mart@^2.11.2:
+  version "2.11.2"
+  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-2.11.2.tgz#ed331867f7f55bb33c8421c9a493090fa4a378c7"
+  integrity sha512-IdHZR5hc3mipTY/r0ergtqBgQ96XxmRdQDSg7fsL+GiJQQ4akMws6+cjLSyIhGQxtvNuPVNaEQiAlU00NsyZUg==
   dependencies:
     prop-types "^15.6.0"