From bd8b53cd6046cef9802d593d8257392d81afb5ce Mon Sep 17 00:00:00 2001
From: Osmium Sorcerer <os@sof.beauty>
Date: Wed, 3 Jun 2026 11:08:07 +0000
Subject: Eliminate innerHTML manipulation

Construct DOM nodes directly instead of trying to sanitize every input
string and dynamically updating HTML.

Replace all uses of innerHTML with textContent, replaceChildren, and
appendChild.

This removes the need to use safeTags and replace newlines, but now
requires preserving whitespace via CSS pre-wrap.

Every OOC chat line is now placed into its own element instead of simply
being appended to the log. This might be worse, and createTextNode
is another alternative.
---
 webAO/viewport/viewport.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'webAO/viewport/viewport.ts')

diff --git a/webAO/viewport/viewport.ts b/webAO/viewport/viewport.ts
index 1421c67..f13c311 100644
--- a/webAO/viewport/viewport.ts
+++ b/webAO/viewport/viewport.ts
@@ -197,11 +197,11 @@ const viewport = (): Viewport => {
       const textSpeeds = new Set(["{", "}"]);
 
       // Changing Text Speed
-      if (textSpeeds.has(characterElement.innerHTML)) {
+      if (textSpeeds.has(characterElement.textContent)) {
         // Grab them all in a row
         const MAX_SLOW_CHATSPEED = 120;
         for (let i = textnow.length; i < chatmsg.content.length; i++) {
-          const currentCharacter = chatmsg.parsed[i - 1].innerHTML;
+          const currentCharacter = chatmsg.parsed[i - 1].textContent;
           if (currentCharacter === "}") {
             if (chatmsg.speed > 0) {
               chatmsg.speed -= 20;
@@ -219,12 +219,12 @@ const viewport = (): Viewport => {
       }
 
       if (
-        characterElement.innerHTML === COMMAND_IDENTIFIER &&
-        (commands.has(nextCharacterElement?.innerHTML) ||
-          nextCharacterElement?.innerHTML === "p")
+        characterElement.textContent === COMMAND_IDENTIFIER &&
+        (commands.has(nextCharacterElement?.textContent) ||
+          nextCharacterElement?.textContent === "p")
       ) {
         textnow = chatmsg.content.substring(0, textnow.length + 1);
-        const commandChar = nextCharacterElement.innerHTML;
+        const commandChar = nextCharacterElement.textContent;
 
         if (commandChar === "p") {
           // Collect digits after \p for pause duration
@@ -233,9 +233,9 @@ const viewport = (): Viewport => {
           let offset = 1;
           while (
             startPos + offset <= chatmsg.content.length &&
-            /\d/.test(chatmsg.parsed[startPos + offset - 1]?.innerHTML || "")
+            /\d/.test(chatmsg.parsed[startPos + offset - 1]?.textContent || "")
           ) {
-            digits += chatmsg.parsed[startPos + offset - 1].innerHTML;
+            digits += chatmsg.parsed[startPos + offset - 1].textContent;
             textnow = chatmsg.content.substring(0, startPos + offset);
             offset++;
           }
-- 
cgit