fix: Render messages with escaped HTML in {@html} tags

Doing this so that I don't have to worry about it when I implement
markdown later, as the escaped string will be passed to the markdown
renderer, so that arbitrary HTML written in the message box will not be
rendered, but HTML from the markdown parser will.

src/lib/components/message.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { type TypeMessage } from '$lib/types';
+  import escapeHTML from '$lib/functions/escapeHTML';
   const { message, imageSrc, user }: TypeMessage = $props();
 </script>
 
@@ -11,7 +12,7 @@
   </div>
   <div class="w-full">
     <p class="inline-size-full break-words font-bold">{user}</p>
-    <pre class="inline-size-full text-wrap break-words font-sans">{message}</pre>
+    <pre class="inline-size-full text-wrap break-words font-sans">{@html escapeHTML(message)}</pre>
   </div>
 </div>
 

src/lib/functions/escapeHTML.ts

@@ -0,0 +1,3 @@
+export default function escapeHTML(text: string) {
+  return text.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#39;');
+}