FEATURE: Improve emoji diversity rendering (#32909)

pento · web-flow · commit 8efd99da9ece · 2025-05-27T11:34:24.000+10:00
This change polishes the emoji diversity rendering behaviour in the emoji pickers. When a user changes their diversity setting, that setting will now be applied to favourites, chat default reactions, and in the  emoji picker section selectors.

If an emoji was previously stored with a skin tone in favourites or default reactions, the stored skin tone won't be overridden.
diff --git a/app/assets/javascripts/discourse/app/components/emoji-picker/content.gjs b/app/assets/javascripts/discourse/app/components/emoji-picker/content.gjs
@@ -503,7 +503,10 @@ export default class EmojiPicker extends Component {
                     width="18"
                     height="18"
                     class="emoji"
-                    src={{get emojis "0.url"}}
+                    src={{tonableEmojiUrl
+                      (get emojis "0")
+                      this.emojiStore.diversity
+                    }}
                   />
                 {{/if}}
               </DButton>
diff --git a/app/assets/javascripts/discourse/app/services/emoji-store.js b/app/assets/javascripts/discourse/app/services/emoji-store.js
@@ -1,6 +1,7 @@
 import { tracked } from "@glimmer/tracking";
 import Service, { service } from "@ember/service";
 import { TrackedArray, TrackedObject } from "@ember-compat/tracked-built-ins";
+import { isSkinTonableEmoji } from "pretty-text/emoji";
 import KeyValueStore from "discourse/lib/key-value-store";
 
 export const SKIN_TONE_STORE_KEY = "emojiSelectedDiversity";
@@ -38,9 +39,22 @@ export default class EmojiStore extends Service {
   }
 
   favoritesForContext(context) {
-    return this.#sortEmojisByFrequency(
+    const data = this.#sortEmojisByFrequency(
       this.#recentEmojisForContext(context)
-    ).slice(0, MAX_DISPLAYED_EMOJIS);
+    )
+      .slice(0, MAX_DISPLAYED_EMOJIS)
+      .map((emoji) => {
+        if (
+          this.diversity === DEFAULT_DIVERSITY ||
+          !isSkinTonableEmoji(emoji)
+        ) {
+          return emoji;
+        }
+
+        return `${emoji}:t${this.diversity}`;
+      });
+
+    return data;
   }
 
   reset() {
diff --git a/app/assets/javascripts/discourse/tests/integration/components/emoji-picker-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/emoji-picker-test.gjs
@@ -51,6 +51,11 @@ module("Integration | Component | emoji-picker-content", function (hooks) {
     assert
       .dom(".emoji-picker__diversity-trigger img[title='clap:t6']")
       .exists("it changes the current scale to t6");
+    assert
+      .dom(
+        `.emoji-picker__section-btn img[src="/images/emoji/twitter/raised_hands/6.png?v=${v}"]`
+      )
+      .exists("it applies the tone to the section selector");
   });
 
   test("When requesting section", async function (assert) {
diff --git a/app/assets/javascripts/discourse/tests/unit/lib/pretty-text/emoji-test.js b/app/assets/javascripts/discourse/tests/unit/lib/pretty-text/emoji-test.js
@@ -0,0 +1,15 @@
+import { setupTest } from "ember-qunit";
+import { isSkinTonableEmoji } from "pretty-text/emoji";
+import { module, test } from "qunit";
+
+module("Unit | Pretty Text | Emoji", function (hooks) {
+  setupTest(hooks);
+
+  test("isSkinTonableEmoji", async function (assert) {
+    assert.false(isSkinTonableEmoji(":smile:"));
+    assert.false(isSkinTonableEmoji("smile"));
+    assert.false(isSkinTonableEmoji("smile:t1"));
+    assert.true(isSkinTonableEmoji(":woman_artist:"));
+    assert.false(isSkinTonableEmoji(":woman_artist:t1:"));
+  });
+});
diff --git a/app/assets/javascripts/discourse/tests/unit/services/emoji-store-test.js b/app/assets/javascripts/discourse/tests/unit/services/emoji-store-test.js
@@ -91,6 +91,17 @@ module("Unit | Service | emoji-store", function (hooks) {
     assert.deepEqual(storedDiversity, 2, "it persists the diversity value");
   });
 
+  test("skin tones are added to favourites after diversity is set", function (assert) {
+    this.emojiStore.trackEmojiForContext("-1:t3", "topic");
+    this.emojiStore.trackEmojiForContext("+1", "topic");
+    this.emojiStore.diversity = 2;
+
+    assert.deepEqual(this.emojiStore.favoritesForContext("topic"), [
+      "+1:t2",
+      "-1:t3",
+    ]);
+  });
+
   test("sort emojis by frequency", function (assert) {
     this.emojiStore.trackEmojiForContext("grinning", "topic");
     this.emojiStore.trackEmojiForContext("cat", "topic");
diff --git a/app/assets/javascripts/pretty-text/addon/emoji.js b/app/assets/javascripts/pretty-text/addon/emoji.js
@@ -242,7 +242,24 @@ export function emojiSearch(term, options) {
   }
 }
 
+/**
+ * Returns true if the given emoji term is skin tonable.
+ *
+ * A skin tonable emoji is one that can be suffixed with a tone modifier (e.g. :t1:, :t2:, etc.)
+ * to change the skin tone of the emoji.
+ *
+ * If the emoji already has a tone modifier, it is not considered skin tonable.
+ *
+ * @param {string} term The emoji term to check, with or without colons or tone modifiers.
+ * @returns {boolean} True if the emoji is skin tonable, false otherwise.
+ */
 export function isSkinTonableEmoji(term) {
+  // Check if the emoji term already has a tone modifier
+  if (/:t[1-6]:?$/.test(term)) {
+    return false;
+  }
+
+  // Extract the base emoji from any wrapping colons or whitespace
   const match = term.split(":").filter(Boolean)[0];
   if (match) {
     return tonableEmojis.includes(match);
diff --git a/plugins/chat/assets/javascripts/discourse/lib/chat-message-interactor.js b/plugins/chat/assets/javascripts/discourse/lib/chat-message-interactor.js
@@ -2,6 +2,7 @@ import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { getOwner, setOwner } from "@ember/owner";
 import { service } from "@ember/service";
+import { isSkinTonableEmoji } from "pretty-text/emoji";
 import EmojiPickerDetached from "discourse/components/emoji-picker/detached";
 import BookmarkModal from "discourse/components/modal/bookmark";
 import FlagModal from "discourse/components/modal/flag";
@@ -11,6 +12,7 @@ import { bind } from "discourse/lib/decorators";
 import getURL from "discourse/lib/get-url";
 import { clipboardCopy } from "discourse/lib/utilities";
 import Bookmark from "discourse/models/bookmark";
+import { DEFAULT_DIVERSITY } from "discourse/services/emoji-store";
 import { i18n } from "discourse-i18n";
 import { MESSAGE_CONTEXT_THREAD } from "discourse/plugins/chat/discourse/components/chat-message";
 import ChatMessageFlag from "discourse/plugins/chat/discourse/lib/chat-message-flag";
@@ -70,8 +72,18 @@ export default class ChatemojiReactions {
 
     const frequentReactions = this.emojiStore.favoritesForContext("chat");
 
-    const defaultReactions =
-      this.siteSettings.default_emoji_reactions.split("|");
+    const defaultReactions = this.siteSettings.default_emoji_reactions
+      .split("|")
+      .map((emoji) => {
+        if (
+          this.emojiStore.diversity !== DEFAULT_DIVERSITY &&
+          isSkinTonableEmoji(emoji)
+        ) {
+          return `${emoji}:t${this.emojiStore.diversity}`;
+        }
+
+        return emoji;
+      });
 
     const allReactionsInOrder = userQuickReactionsCustom
       .concat(frequentReactions)
diff --git a/plugins/chat/test/javascripts/unit/lib/chat-message-interactor-test.js b/plugins/chat/test/javascripts/unit/lib/chat-message-interactor-test.js
@@ -45,6 +45,21 @@ module("Discourse Chat | Unit | chat-message-interactor", function (hooks) {
     );
   });
 
+  test("emojiReactions with diversity set applies to site defaults", function (assert) {
+    updateCurrentUser({
+      user_option: {
+        chat_quick_reaction_type: "frequent",
+      },
+    });
+
+    this.emojiStore.diversity = 2;
+
+    assert.deepEqual(
+      this.messageInteractor.emojiReactions.map((r) => r.emoji),
+      ["+1:t2", "heart", "tada"]
+    );
+  });
+
   test("emojiReactions with top 3 frequent", function (assert) {
     this.emojiStore.trackEmojiForContext("eyes", "chat");
     this.emojiStore.trackEmojiForContext("camera", "chat");
