fix emojis (i broke them)

frontend/lib/chat.mjs

@@ -6,18 +6,16 @@ import {
 import { emojify, emojis } from "./emojis.mjs?v=1e57e6";
 
 function setCaretPosition(elem, caretPos) {
-        if(elem.createTextRange) {
-            var range = elem.createTextRange();
-            range.move('character', caretPos);
-            range.select();
-        } else {
-            if(elem.selectionStart) {
-                elem.focus();
-                elem.setSelectionRange(caretPos, caretPos);
-            }
-            else
-                elem.focus();
-        }
+  if (elem.createTextRange) {
+    var range = elem.createTextRange();
+    range.move("character", caretPos);
+    range.select();
+  } else {
+    if (elem.selectionStart) {
+      elem.focus();
+      elem.setSelectionRange(caretPos, caretPos);
+    } else elem.focus();
+  }
 }
 
 const setupChatboxEvents = (socket) => {
@@ -57,21 +55,27 @@ const setupChatboxEvents = (socket) => {
             className: "emoji-option" + (i === 0 ? " selected" : ""),
             onmousedown: (e) => e.preventDefault(),
             onclick: () => {
-			  messageInput.value=prefix+replaceWith+" "+suffix;
-			  setCaretPosition(messageInput, (prefix+" "+replaceWith).length)
-			  },
+              messageInput.value = prefix + replaceWith + " " + suffix;
+              setCaretPosition(
+                messageInput,
+                (prefix + " " + replaceWith).length
+              );
+            },
             onmouseover: () => select(button),
             onfocus: () => select(button),
+            type: "button",
           });
           button.append(
-            (replaceWith[0]!==":"?Object.assign(document.createElement("span"), {
-              textContent: replaceWith,
-              className: "emoji",
-            }):Object.assign(new Image(), {
-              loading: "lazy",
-              src: `/emojis/${name}.png`,
-              className: "emoji",
-            })),
+            replaceWith[0] !== ":"
+              ? Object.assign(document.createElement("span"), {
+                  textContent: replaceWith,
+                  className: "emoji",
+                })
+              : Object.assign(new Image(), {
+                  loading: "lazy",
+                  src: `/emojis/${name}.png`,
+                  className: "emoji",
+                }),
             Object.assign(document.createElement("span"), { textContent: name })
           );
           return button;

frontend/lib/emojis.mjs

@@ -5,16 +5,21 @@ export async function emojify(text) {
   text.replace(/:([^\s:]+):/g, (match, name, index) => {
     if (last <= index)
       nodes.push(document.createTextNode(text.slice(last, index)));
-    if (!emojiList.includes(name)) {
+    let emoji = emojiList.find((e) => e[0] == name);
+    if (!emoji) {
       nodes.push(document.createTextNode(match));
     } else {
-      nodes.push(
-        Object.assign(new Image(), {
-          src: `/emojis/${name}.png`,
-          className: "emoji",
-          alt: name,
-        })
-      );
+      if (emoji[1][0] !== ":") {
+        nodes.push(document.createTextNode(emoji[1]));
+      } else {
+        nodes.push(
+          Object.assign(new Image(), {
+            src: `/emojis/${name}.png`,
+            className: "emoji",
+            alt: name,
+          })
+        );
+      }
     }
     last = index + match.length;
   });
@@ -24,7 +29,6 @@ export async function emojify(text) {
 export const emojis = Promise.all([
   fetch("/emojis")
     .then((e) => e.json())
-    .then((e) => e.map((e) => [e.slice(0, -4), ":"+e.slice(0, -4)+":"])),
-  fetch('/emojis/unicode.json')
-    .then((e) => e.json())
-]).then(e=>e.flat(1));
+    .then((e) => e.map((e) => [e.slice(0, -4), ":" + e.slice(0, -4) + ":"])),
+  fetch("/emojis/unicode.json").then((e) => e.json()),
+]).then((e) => e.flat(1));

frontend/styles.css

@@ -13,7 +13,8 @@
   --fg-transparent: rgba(var(--fg-rgb), 0.25);
   --bg-transparent: rgba(var(--bg-rgb), 0.25);
   --autocomplete-bg: linear-gradient(
-      var(--fg-transparent), var(--fg-transparent)
+      var(--fg-transparent),
+      var(--fg-transparent)
     ),
     linear-gradient(var(--bg), var(--bg));
 }