FIX: Emoji search/autocomplete should respect selected skin tone (#11917)

This commit makes our emoji autocomplete in the composer respect the skin tone you select in the emoji picker.

app/assets/javascripts/discourse/app/components/d-editor.js

@@ -542,7 +542,10 @@ export default Component.extend({
             }
           }
 
-          const options = emojiSearch(term, { maxResults: 5 });
+          const options = emojiSearch(term, {
+            maxResults: 5,
+            diversity: this.emojiStore.diversity,
+          });
 
           return resolve(options);
         })

app/assets/javascripts/discourse/app/components/emoji-picker.js

@@ -224,6 +224,7 @@ export default Component.extend({
     if (event.target.value) {
       results.innerHTML = emojiSearch(event.target.value.toLowerCase(), {
         maxResults: 10,
+        diversity: this.emojiStore.diversity,
       })
         .map(this._replaceEmoji)
         .join("");

app/assets/javascripts/discourse/tests/unit/lib/emoji-test.js

@@ -136,5 +136,18 @@ discourseModule("Unit | Utility | emoji", function () {
 
     // able to find middle of line search
     assert.equal(emojiSearch("check", { maxResults: 3 }).length, 3);
+
+    // appends diversity
+    assert.deepEqual(emojiSearch("woman_artist", { diversity: 5 }), [
+      "woman_artist:t5",
+    ]);
+    assert.deepEqual(emojiSearch("woman_artist", { diversity: 2 }), [
+      "woman_artist:t2",
+    ]);
+
+    // no diversity appended for emojis that can't be diversified
+    assert.deepEqual(emojiSearch("green_apple", { diversity: 3 }), [
+      "green_apple",
+    ]);
   });
 });

app/assets/javascripts/pretty-text/addon/emoji.js

@@ -210,6 +210,7 @@ export function emojiExists(code) {
 let toSearch;
 export function emojiSearch(term, options) {
   const maxResults = (options && options["maxResults"]) || -1;
+  const diversity = options && options.diversity;
   if (maxResults === 0) {
     return [];
   }
@@ -227,7 +228,11 @@ export function emojiSearch(term, options) {
   function addResult(t) {
     const val = aliasHash[t] || t;
     if (results.indexOf(val) === -1) {
-      results.push(val);
+      if (diversity && diversity > 1 && isSkinTonableEmoji(val)) {
+        results.push(`${val}:t${diversity}`);
+      } else {
+        results.push(val);
+      }
     }
   }