1 files changed, 21 insertions, 28 deletions
diff --git a/web_src/js/features/tribute.ts b/web_src/js/features/tribute.ts
index fa65bcbb28..43c21ebe6d 100644
--- a/web_src/js/features/tribute.ts
+++ b/web_src/js/features/tribute.ts
@@ -1,14 +1,16 @@
 import {emojiKeys, emojiHTML, emojiString} from './emoji.ts';
-import {htmlEscape} from 'escape-goat';
+import {html, htmlRaw} from '../utils/html.ts';
 
-function makeCollections({mentions, emoji}) {
-  const collections = [];
+type TributeItem = Record<string, any>;
 
-  if (emoji) {
-    collections.push({
+export async function attachTribute(element: HTMLElement) {
+  const {default: Tribute} = await import(/* webpackChunkName: "tribute" */'tributejs');
+
+  const collections = [
+    { // emojis
       trigger: ':',
       requireLeadingSpace: true,
-      values: (query, cb) => {
+      values: (query: string, cb: (matches: Array<string>) => void) => {
         const matches = [];
         for (const name of emojiKeys) {
           if (name.includes(query)) {
@@ -18,39 +20,30 @@ function makeCollections({mentions, emoji}) {
         }
         cb(matches);
       },
-      lookup: (item) => item,
-      selectTemplate: (item) => {
+      lookup: (item: TributeItem) => item,
+      selectTemplate: (item: TributeItem) => {
         if (item === undefined) return null;
         return emojiString(item.original);
       },
-      menuItemTemplate: (item) => {
-        return `<div class="tribute-item">${emojiHTML(item.original)}<span>${htmlEscape(item.original)}</span></div>`;
+      menuItemTemplate: (item: TributeItem) => {
+        return html`<div class="tribute-item">${htmlRaw(emojiHTML(item.original))}<span>${item.original}</span></div>`;
       },
-    });
-  }
-
-  if (mentions) {
-    collections.push({
+    }, { // mentions
       values: window.config.mentionValues ?? [],
       requireLeadingSpace: true,
-      menuItemTemplate: (item) => {
-        return `
+      menuItemTemplate: (item: TributeItem) => {
+        const fullNameHtml = item.original.fullname && item.original.fullname !== '' ? html`<span class="fullname">${item.original.fullname}</span>` : '';
+        return html`
           <div class="tribute-item">
-            <img src="${htmlEscape(item.original.avatar)}" width="21" height="21"/>
-            <span class="name">${htmlEscape(item.original.name)}</span>
-            ${item.original.fullname && item.original.fullname !== '' ? `<span class="fullname">${htmlEscape(item.original.fullname)}</span>` : ''}
+            <img alt src="${item.original.avatar}" width="21" height="21"/>
+            <span class="name">${item.original.name}</span>
+            ${htmlRaw(fullNameHtml)}
           </div>
         `;
       },
-    });
-  }
+    },
+  ];
 
-  return collections;
-}
-
-export async function attachTribute(element, {mentions, emoji}) {
-  const {default: Tribute} = await import(/* webpackChunkName: "tribute" */'tributejs');
-  const collections = makeCollections({mentions, emoji});
   // @ts-expect-error TS2351: This expression is not constructable (strange, why)
   const tribute = new Tribute({collection: collections, noMatchTemplate: ''});
   tribute.attach(element);