3 files changed, 100 insertions, 2 deletions
diff --git a/web_src/js/features/contextpopup.js b/web_src/js/features/contextpopup.js
index 6feaa768c0..377a6a8f5a 100644
--- a/web_src/js/features/contextpopup.js
+++ b/web_src/js/features/contextpopup.js
@@ -24,7 +24,6 @@ function issuePopup(owner, repo, index, $element) {
     let labels = '';
     for (let i = 0; i < issue.labels.length; i++) {
       const label = issue.labels[i];
-      const labelName = emojify.replace(label.name);
       const red = parseInt(label.color.substring(0, 2), 16);
       const green = parseInt(label.color.substring(2, 4), 16);
       const blue = parseInt(label.color.substring(4, 6), 16);
@@ -32,7 +31,7 @@ function issuePopup(owner, repo, index, $element) {
       if ((red * 0.299 + green * 0.587 + blue * 0.114) > 125) {
         color = '#000000';
       }
-      labels += `<div class="ui label" style="color: ${color}; background-color:#${label.color};">${labelName}</div>`;
+      labels += `<div class="ui label" style="color: ${color}; background-color:#${label.color};">${label.name}</div>`;
     }
     if (labels.length > 0) {
       labels = `<p>${labels}</p>`;
diff --git a/web_src/js/features/emoji.js b/web_src/js/features/emoji.js
new file mode 100644
index 0000000000..3c24a165b9
--- /dev/null
+++ b/web_src/js/features/emoji.js
@@ -0,0 +1,38 @@
+import emojis from '../../../assets/emoji.json';
+
+const {StaticUrlPrefix} = window.config;
+
+const tempMap = {gitea: ':gitea:'};
+for (const {emoji, aliases} of emojis) {
+  for (const alias of aliases || []) {
+    tempMap[alias] = emoji;
+  }
+}
+
+export const emojiKeys = Object.keys(tempMap).sort((a, b) => {
+  if (a === '+1' || a === '-1') return -1;
+  if (b === '+1' || b === '-1') return 1;
+  return a.localeCompare(b);
+});
+
+export const emojiMap = {};
+for (const key of emojiKeys) {
+  emojiMap[key] = tempMap[key];
+}
+
+// retrieve HTML for given emoji name
+export function emojiHTML(name) {
+  let inner;
+  if (name === 'gitea') {
+    inner = `<img class="emoji" alt=":${name}:" src="${StaticUrlPrefix}/img/emoji/gitea.png" align="absmiddle">`;
+  } else {
+    inner = emojiString(name);
+  }
+
+  return `<span class="emoji" title=":${name}:">${inner}</span>`;
+}
+
+// retrieve string for given emoji name
+export function emojiString(name) {
+  return emojiMap[name] || `:${name}:`;
+}
diff --git a/web_src/js/features/tribute.js b/web_src/js/features/tribute.js
new file mode 100644
index 0000000000..30afb2b184
--- /dev/null
+++ b/web_src/js/features/tribute.js
@@ -0,0 +1,61 @@
+import {emojiKeys, emojiHTML, emojiString} from './emoji.js';
+
+export const issuesTribute = window.config.Tribute ? new Tribute({
+  values: window.config.tributeValues,
+  noMatchTemplate() { return null },
+  menuItemTemplate(item) {
+    const div = $('<div/>');
+    div.append($('<img/>', {src: item.original.avatar}));
+    div.append($('<span/>', {class: 'name'}).text(item.original.name));
+    if (item.original.fullname && item.original.fullname !== '') {
+      div.append($('<span/>', {class: 'fullname'}).text(item.original.fullname));
+    }
+    return div.html();
+  }
+}) : null;
+
+export const emojiTribute = window.config.Tribute ? new Tribute({
+  collection: [{
+    trigger: ':',
+    requireLeadingSpace: true,
+    values(query, cb) {
+      const matches = [];
+      for (const name of emojiKeys) {
+        if (name.includes(query)) {
+          matches.push(name);
+          if (matches.length > 5) break;
+        }
+      }
+      cb(matches);
+    },
+    lookup(item) {
+      return item;
+    },
+    selectTemplate(item) {
+      if (typeof item === 'undefined') return null;
+      return emojiString(item.original);
+    },
+    menuItemTemplate(item) {
+      return `<div class="tribute-item">${emojiHTML(item.original)}<span>${item.original}</span></div>`;
+    }
+  }]
+}) : null;
+
+export function initTribute() {
+  if (!window.config.Tribute) return;
+
+  let content = document.getElementById('content');
+  if (content !== null) {
+    issuesTribute.attach(content);
+  }
+
+  const emojiInputs = document.querySelectorAll('.emoji-input');
+  if (emojiInputs.length > 0) {
+    emojiTribute.attach(emojiInputs);
+  }
+
+  content = document.getElementById('content');
+  if (content !== null) {
+    emojiTribute.attach(document.getElementById('content'));
+  }
+}