Add emoji support & render markdown in embeds

webpage/embed.ts

@@ -1,5 +1,7 @@
 import {Fullscreen} from "./fullscreen.js";
 import {Message} from "./message.js";
+import {markdown} from "./markdown.js";
+
 class Embed{
     type:string;
     owner:Message;
@@ -48,7 +50,7 @@ class Embed{
                 authorline.append(img);
             }
             const a=document.createElement("a");
-            a.innerText=this.json.author.name
+            a.textContent=this.json.author.name
             if(this.json.author.url){
                 a.href=this.json.author.url
             }
@@ -57,7 +59,7 @@ class Embed{
             embed.append(authorline);
         }
         const title=document.createElement("a");
-        title.textContent=this.json.title;
+        title.innerHTML=markdown(this.json.title).innerHTML;
         if(this.json.url){
             title.href=this.json.url;
         }
@@ -66,7 +68,7 @@ class Embed{
 
         if(this.json.description){
             const p=document.createElement("p");
-            p.textContent=this.json.description;
+            p.innerHTML=markdown(this.json.description).innerHTML;
             embed.append(p);
         }
 
@@ -77,9 +79,8 @@ class Embed{
                 const b=document.createElement("b");
                 b.textContent=thing.name;
                 div.append(b);
-                let p;
-                p=document.createElement("p")
-                p.textContent=thing.value;
+                const p=document.createElement("p")
+                p.innerHTML=markdown(thing.value).innerHTML;
                 p.classList.add("embedp");
                 div.append(p);
 

webpage/markdown.ts

@@ -360,6 +360,42 @@ function markdown(text : string|string[],{keep=false,stdsize=false} = {}){
             }
         }
 
+        if (txt[i] == "<" && txt[i + 1] == ":") {
+            let found=false;
+            const build=["<", ":"];
+            let j=i + 2;
+            for (; txt[j] !== void 0; j++) {
+                build.push(txt[j]);
+
+                if (txt[j] == ">") {
+                    found=true;
+                    break;
+                }
+            }
+
+            if (found) {
+                const parts=build.join("").match(/^<:\w+:(\d{10,30})>$/);
+                if (parts && parts[1]) {
+                    appendcurrent();
+                    i=j;
+
+                    const isEmojiOnly = txt.join("").trim()===build.join("").trim();
+
+                    const emojiElem=document.createElement("img");
+                    emojiElem.classList.add("md-emoji");
+                    emojiElem.width=isEmojiOnly ? 48 : 22;
+                    emojiElem.height=isEmojiOnly ? 48 : 22;
+                    emojiElem.crossOrigin="anonymous";
+                    emojiElem.src=this.info.cdn.toString() + "/emojis/" + parts[1] + ".png?size=32";
+                    emojiElem.alt="";
+                    emojiElem.loading="lazy";
+                    span.appendChild(emojiElem);
+
+                    continue;
+                }
+            }
+        }
+
         current.textContent+=txt[i];
     }
     appendcurrent();

webpage/settings.ts

@@ -83,7 +83,7 @@ class PermissionToggle{
 
         div.append(this.generateCheckbox());
         const p=document.createElement("p");
-        p.innerText=this.rolejson.description;
+        p.textContent=this.rolejson.description;
         div.appendChild(p);
         return div;
     }

webpage/style.css

@@ -215,8 +215,6 @@ img {
 	vertical-align: middle;
 	max-width: 3in;
 	max-height: 3in;
-	width: auto;
-	height: auto;
 }
 
 #page {
@@ -1352,4 +1350,4 @@ span {
 	width: 100%;
 	flex-direction: row;
 	max-height:100in;
-}
+}