FIX: Unescape :emoji: in hashtag search results (#19147)

This commit unescapes the :emoji: and expands into
an image within hashtag autocomplete results, and
also makes some style tweaks to make sure the emoji
is not too big.

app/assets/javascripts/discourse/app/lib/hashtag-autocomplete.js

@@ -8,9 +8,12 @@ import discourseDebounce from "discourse-common/lib/debounce";
 import {
   caretPosition,
   caretRowCol,
+  escapeExpression,
   inCodeBlock,
 } from "discourse/lib/utilities";
 import { search as searchCategoryTag } from "discourse/lib/category-tag-search";
+import { emojiUnescape } from "discourse/lib/text";
+import { htmlSafe } from "@ember/template";
 
 /**
  * Sets up a textarea using the jQuery autocomplete plugin, specifically
@@ -212,6 +215,10 @@ function _searchRequest(term, contextualHashtagConfiguration, resultFunc) {
   });
   currentSearch
     .then((r) => {
+      r.results?.forEach((result) => {
+        // Convert :emoji: in the result text to HTML safely.
+        result.text = htmlSafe(emojiUnescape(escapeExpression(result.text)));
+      });
       resultFunc(r.results || CANCELLED_STATUS);
     })
     .finally(() => {

app/assets/javascripts/discourse/tests/acceptance/hashtag-autocomplete-test.js

@@ -0,0 +1,82 @@
+import { setCaretPosition } from "discourse/lib/utilities";
+import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
+import {
+  click,
+  fillIn,
+  settled,
+  triggerKeyEvent,
+  visit,
+} from "@ember/test-helpers";
+import { test } from "qunit";
+
+async function typeHashtagAutocomplete() {
+  const composerInput = query(".d-editor-input");
+  await fillIn(".d-editor-input", "abc #");
+  await triggerKeyEvent(".d-editor-input", "keydown", "#");
+  await fillIn(".d-editor-input", "abc #");
+  await setCaretPosition(composerInput, 5);
+  await triggerKeyEvent(".d-editor-input", "keyup", "#");
+  await triggerKeyEvent(".d-editor-input", "keydown", "O");
+  await fillIn(".d-editor-input", "abc #o");
+  await setCaretPosition(composerInput, 6);
+  await triggerKeyEvent(".d-editor-input", "keyup", "O");
+  await settled();
+}
+
+acceptance("#hashtag autocompletion in composer", function (needs) {
+  needs.user();
+  needs.settings({
+    tagging_enabled: true,
+    enable_experimental_hashtag_autocomplete: true,
+  });
+  needs.pretender((server, helper) => {
+    server.get("/hashtags", () => {
+      return helper.response({
+        category: [],
+        tag: [],
+      });
+    });
+    server.get("/hashtags/search.json", () => {
+      return helper.response({
+        results: [
+          {
+            text: ":bug: Other Languages",
+            slug: "other-languages",
+            icon: "folder",
+            relative_url: "/c/other-languages/28",
+            ref: "other-languages",
+            type: "category",
+          },
+          {
+            text: "notes x 300",
+            slug: "notes",
+            icon: "tag",
+            relative_url: "/tag/notes",
+            ref: "notes",
+            type: "tag",
+          },
+          {
+            text: "photos x 281",
+            slug: "photos",
+            icon: "tag",
+            relative_url: "/tag/photos",
+            ref: "photos",
+            type: "tag",
+          },
+        ],
+      });
+    });
+  });
+
+  test(":emoji: unescape in autocomplete search results", async function (assert) {
+    await visit("/t/internationalization-localization/280");
+    await click("#topic-footer-buttons .btn.create");
+    await typeHashtagAutocomplete();
+    assert.dom(".hashtag-autocomplete__option").exists({ count: 3 });
+    assert
+      .dom(
+        '.hashtag-autocomplete__option .hashtag-autocomplete__text img.emoji[title="bug"]'
+      )
+      .exists();
+  });
+});

app/assets/stylesheets/common/components/hashtag.scss

@@ -42,6 +42,12 @@ a.hashtag-cooked {
 
       .hashtag-autocomplete__text {
         flex: 1;
+        margin-left: 0;
+
+        .emoji {
+          width: 15px;
+          height: 15px;
+        }
       }
     }
   }