add: Markdown rendering

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svin-chat",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Coolest chat in the world 😎",
   "main": "src/index.js",
   "scripts": {

public/css/main.css

@@ -268,6 +268,7 @@ body {
     color: #eee;
     max-width: 66%;
     border-radius: 8px;
+    list-style-position: inside;
 }
 
 .user-message {
@@ -405,7 +406,7 @@ body {
 }
 
 #attachment-preview {
-    display: flex;
+    display: none;
     align-items: center;
     padding-left: 16px;
     border-color: #555;
@@ -417,9 +418,9 @@ body {
     width: 100%;
 }
 
-#attachment-preview:has(#attachment-filename:empty) {
+/* #attachment-preview:has(#attachment-filename:empty) {
     display: none;
-}
+} */
 
 .preview {
     width: 100dvw;

src/routes/chat.js

@@ -7,6 +7,9 @@ const ejs = require("ejs");
 const db = require("../db");
 const multer = require("multer");
 const sharp = require("sharp");
+const createDOMPurify = require("dompurify");
+const { JSDOM } = require("jsdom");
+const { marked } = require("marked");
 const package = require("../../package.json");
 const { encrypt, decrypt } = require("../util/crypto");
 
@@ -74,11 +77,13 @@ router.post("/chat/:chat_id", upload.single("attachment"), async (req, res) => {
                 const thumbnailBuffer = await sharp(req.file.buffer).autoOrient().resize(256, 256, { fit: "inside" }).jpeg().toBuffer();
                 await db.none("INSERT INTO thumbnails (attachment_id, type, data) VALUES ($1, $2, $3)", [ attachment?.id, "image/jpeg", thumbnailBuffer ]);
             }
+            const window = new JSDOM("").window;
+            const DOMPurify = createDOMPurify(window);
             await db.none("INSERT INTO messages (chat_id, user_id, attachment_id, text, timestamp) VALUES ($1, $2, $3, $4, $5)", [
                 chat?.id,
                 req.user.id,
                 attachment?.id ?? null,
-                encrypt(req.body.text),
+                encrypt(DOMPurify.sanitize(marked.parse(req.body.text))),
                 datetime
             ]);
             res.json({ success: true });

src/views/chat.ejs

@@ -17,7 +17,7 @@
                     <img src="/thumbnail/<%- message.attachment %>" />
                 </a>
                 <% } %>
-                <span class="message-text user-message">
+                <div class="message-text user-message">
             <% } else { %>
             <div class="message align-start">
                 <% if (message.attachment !== null) { %>
@@ -25,10 +25,10 @@
                     <img src="/thumbnail/<%- message.attachment %>" />
                 </a>
                 <% } %>
-                <span class="message-text friend-message">
+                <div class="message-text friend-message">
             <% } %>
                     <%- message.text %>
-                </span>
+                </div>
                 <span class="message-datetime"><%- message.datetime %></span>
             </div>
         <% }); %>
@@ -81,7 +81,7 @@
             textSpan.className = "message-text friend-message"
         }
         datetimeSpan.className = "message-datetime"
-        textSpan.innerText = message.text
+        textSpan.innerHTML = message.text
         datetimeSpan.innerText = new Date(message.datetime).toLocaleString()
         if (message.attachment) {
             var attachmentLink = document.createElement("a")