Several improvements to chat pre/post processing

www/js/channel/chatPostprocessor.js

@@ -29,8 +29,8 @@ class chatPostprocessor{
     splitBody(){
         //Create an empty array to hold the body
         this.bodyArray = [];
-        //Split string by word-boundries, with negative/forward lookaheads to exclude file seperators so we don't split link placeholders
-        const splitString = this.chatBody.innerHTML.split(/(?<!␜)\b/g);
+        //Split string by word-boundries, with negative lookaheads to exclude file seperators so we don't split link placeholders
+        const splitString = this.rawData.msg.split(/(?<!␜)\b/g);
 
         //for each word in the splitstring
         splitString.forEach((string) => {
@@ -46,23 +46,39 @@ class chatPostprocessor{
     }
 
     injectBody(){
-        //Clear our chat body
-        this.chatBody.innerHTML = "";
-        
-        //Extract strings into the empty array
+        //Create an empty array to hold the objects to inject
+        const injectionArray = [""];
+
+        const _this = this;
+        //For each word object
         this.bodyArray.forEach((wordObj) => {
             if(wordObj.type == 'word'){
                 //Inject current wordObj string into the chat body
-                this.chatBody.innerHTML += wordObj.string
+                //this doesnt work right with escaped strings atm
+                //we should make an array that contains all the strings split by nodes
+                //so text can be added in word chunks, allowing escaped strings and
+                //node injections w/o adding them as html instead of an appended node
+                injectString(wordObj.string);
             }else if(wordObj.type == 'link'){
                 //Create a link node from our link
                 const link = document.createElement('a');
                 link.classList.add('chat-link');
                 link.href = wordObj.link;
-                link.innerHTML = wordObj.link;
+                //Use textContent to be safe since links can't be escaped
+                link.textContent = wordObj.link;
 
                 //Append node to chatBody
-                this.injectNode(wordObj, link);
+                injectNode(wordObj, link);
+            }else if(wordObj.type == 'deadLink'){
+                //Create a text span node from our link
+                const badLink = document.createElement('a');
+                badLink.classList.add('chat-dead-link', 'danger-link');
+                badLink.href = wordObj.link;
+                //Use textContent to be safe since links can't be escaped
+                badLink.textContent = wordObj.link;
+
+                //Append node to chatBody
+                injectNode(wordObj, badLink);
             }else if(wordObj.type == 'image'){
                 //Create an img node from our link
                 const img = document.createElement('img');
@@ -71,7 +87,7 @@ class chatPostprocessor{
 
                 //stringArray.push(wordObj.string.replace('␜',img.outerHTML));
                 //Append node to chatBody
-                this.injectNode(wordObj, img);
+                injectNode(wordObj, img);
             }else if(wordObj.type == 'video'){
                 //Create a video node from our link
                 const vid = document.createElement('video');
@@ -83,24 +99,48 @@ class chatPostprocessor{
                 vid.muted = true;
 
                 //stringArray.push(wordObj.string.replace('␜',vid.outerHTML));
-                this.injectNode(wordObj, vid);
+                injectNode(wordObj, vid);
             }
         });
-    }
 
-    //Like string.replace except it actually injects the node so we can keep things like event handlers
-    injectNode(wordObj, node, placeholder = '␜'){
-        //Split string by the placeholder so we can keep surrounding whitespace
-        const splitWord = wordObj.string.split(placeholder, 2);
+        //For each item found in the injection array
+        injectionArray.forEach((item) => {
+            //if it's a string
+            if(typeof item == "string"){
+                //Add it to the chat's innerHTML (it should already be escaped by the server)
+                this.chatBody.innerHTML += item;
+            }else{
+                //Otherwise it should be a DOM node, therefore we should append it
+                this.chatBody.appendChild(item);
+            }
+        })
 
-        //Append the first half of the string
-        this.chatBody.innerHTML += splitWord[0];
 
-        //Append the node
-        this.chatBody.appendChild(node);
+        //Like string.replace except it actually injects the node so we can keep things like event handlers
+        function injectNode(wordObj, node, placeholder = '␜'){
+            //Split string by the placeholder so we can keep surrounding whitespace
+            const splitWord = wordObj.string.split(placeholder, 2);
 
-        //Append the second half of the string
-        this.chatBody.innerHTML += splitWord[1];
+            //Append the first half of the string
+            injectString(splitWord[0]);
+
+            //Append the node
+            injectionArray.push(node);
+
+            //Append the second half of the string
+            injectString(splitWord[1]);
+        }
+
+        function injectString(string){
+            //If the last item was a string
+            if(typeof injectionArray[injectionArray.length - 1] == "string"){
+                //add the word string on to the end of the string
+                injectionArray[injectionArray.length - 1] += string;
+            }else{
+                //Pop the string at the end of the array
+                injectionArray.push(string);
+            }
+        }
     }
 
     addWhitespace(){