Merge branch 'custom-emoji-categories' into 'develop'

Support custom emoji categories

Closes #1197

See merge request soapbox-pub/soapbox!1927

app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx

@@ -4,7 +4,7 @@ import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { buildCustomEmojis } from '../../../emoji/emoji';
+import { buildCustomEmojis, categoriesFromEmojis } from '../../../emoji/emoji';
 
 import { EmojiPicker } from './emoji-picker-dropdown';
 import ModifierPicker from './modifier-picker';
@@ -14,19 +14,6 @@ import type { Emoji } from 'soapbox/components/autosuggest-emoji';
 const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
-const categoriesSort = [
-  'recent',
-  'custom',
-  'people',
-  'nature',
-  'foods',
-  'activity',
-  'places',
-  'objects',
-  'symbols',
-  'flags',
-];
-
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
   emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
@@ -71,6 +58,20 @@ const EmojiPickerMenu: React.FC<IEmojiPickerMenu> = ({
 
   const [modifierOpen, setModifierOpen] = useState(false);
 
+  const categoriesSort = [
+    'recent',
+    'people',
+    'nature',
+    'foods',
+    'activity',
+    'places',
+    'objects',
+    'symbols',
+    'flags',
+  ];
+
+  categoriesSort.splice(1, 0, ...Array.from(categoriesFromEmojis(customEmojis) as Set<string>).sort());
+
   const handleDocumentClick = useCallback(e => {
     if (node.current && !node.current.contains(e.target)) {
       onClose();

app/soapbox/features/emoji/__tests__/emoji.test.ts

@@ -88,5 +88,10 @@ describe('emoji', () => {
       expect(emojify('💂‍♀️💂‍♂️'))
         .toEqual('<img draggable="false" class="emojione" alt="💂\u200D♀️" title=":female-guard:" src="/packs/emoji/1f482-200d-2640-fe0f.svg"><img draggable="false" class="emojione" alt="💂\u200D♂️" title=":male-guard:" src="/packs/emoji/1f482-200d-2642-fe0f.svg">');
     });
+
+    it('keeps ordering as expected (issue fixed by PR 20677)', () => {
+      expect(emojify('<p>💕 <a class="hashtag" href="https://example.com/tags/foo" rel="nofollow noopener noreferrer" target="_blank">#<span>foo</span></a> test: foo.</p>'))
+        .toEqual('<p><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/packs/emoji/1f495.svg"> <a class="hashtag" href="https://example.com/tags/foo" rel="nofollow noopener noreferrer" target="_blank">#<span>foo</span></a> test: foo.</p>');
+    });
   });
 });

app/soapbox/features/emoji/emoji.js

@@ -6,8 +6,6 @@ import unicodeMapping from './emoji-unicode-mapping-light';
 
 const trie = new Trie(Object.keys(unicodeMapping));
 
-const domParser = new DOMParser();
-
 const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
   let str = node.textContent;
 
@@ -26,7 +24,7 @@ const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
       }
     }
 
-    let rend, replacement = '';
+    let rend, replacement = null;
     if (i === str.length) {
       break;
     } else if (str[i] === ':') {
@@ -39,7 +37,14 @@ const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
         // if you want additional emoji handler, add statements below which set replacement and return true.
         if (shortname in customEmojis) {
           const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url;
-          replacement = `<img draggable="false" class="emojione custom-emoji" alt="${shortname}" title="${shortname}" src="${filename}" data-original="${customEmojis[shortname].url}" data-static="${customEmojis[shortname].static_url}" />`;
+          replacement = document.createElement('img');
+          replacement.setAttribute('draggable', false);
+          replacement.setAttribute('class', 'emojione custom-emoji');
+          replacement.setAttribute('alt', shortname);
+          replacement.setAttribute('title', shortname);
+          replacement.setAttribute('src', filename);
+          replacement.setAttribute('data-original', customEmojis[shortname].url);
+          replacement.setAttribute('data-static', customEmojis[shortname].static_url);
           return true;
         }
         return false;
@@ -47,8 +52,12 @@ const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
     } else { // matched to unicode emoji
       const { filename, shortCode } = unicodeMapping[match];
       const title = shortCode ? `:${shortCode}:` : '';
-      const src = joinPublicPath(`packs/emoji/${filename}.svg`);
-      replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${src}" />`;
+      replacement = document.createElement('img');
+      replacement.setAttribute('draggable', false);
+      replacement.setAttribute('class', 'emojione');
+      replacement.setAttribute('alt', match);
+      replacement.setAttribute('title', title);
+      replacement.setAttribute('src', joinPublicPath(`packs/emoji/${filename}.svg`));
       rend = i + match.length;
       // If the matched character was followed by VS15 (for selecting text presentation), skip it.
       if (str.codePointAt(rend) === 65038) {
@@ -58,7 +67,7 @@ const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
 
     fragment.append(document.createTextNode(str.slice(0, i)));
     if (replacement) {
-      fragment.append(domParser.parseFromString(replacement, 'text/html').documentElement.getElementsByTagName('img')[0]);
+      fragment.append(replacement);
     }
     node.textContent = str.slice(0, i);
     str = str.slice(rend);

app/styles/emoji-picker.scss

@@ -9,7 +9,7 @@
 }
 
 .emoji-mart .emoji-mart-emoji {
-  @apply p-1.5;
+  @apply p-1.5 align-middle;
 }
 
 .emoji-mart-bar {