From d577e386920b246f323e7e16a74d016652d05c09 Mon Sep 17 00:00:00 2001
From: Rohan Sircar <rohansircar@tuta.io>
Date: Thu, 7 Nov 2019 09:29:53 +0530
Subject: [PATCH] Added markdown rendering to chat area

---
 chatto/src/main/resources/static/css/chat.css |  8 ++++++++
 chatto/src/main/resources/static/js/chat.js   | 13 +++++++------
 chatto/src/main/resources/templates/chat.html |  1 +
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/chatto/src/main/resources/static/css/chat.css b/chatto/src/main/resources/static/css/chat.css
index 50c704b..f238c29 100644
--- a/chatto/src/main/resources/static/css/chat.css
+++ b/chatto/src/main/resources/static/css/chat.css
@@ -7,6 +7,14 @@ html {
     background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
 }
 
+.msg_container_send p,
+.msg_container_send ol,
+.msg_container_send ul,
+ .msg_container p,
+ .msg_container ol,
+ .msg_container ul {
+    margin-bottom: 0;
+}
 .user-box:hover {
     background-color: rgba(0, 0, 0, 0.1);
 }
diff --git a/chatto/src/main/resources/static/js/chat.js b/chatto/src/main/resources/static/js/chat.js
index 0c0aded..a621e42 100644
--- a/chatto/src/main/resources/static/js/chat.js
+++ b/chatto/src/main/resources/static/js/chat.js
@@ -37,6 +37,8 @@ var chatAreaNew = document.getElementById('chat_area_new');
 
 var userBoxes = document.getElementsByName('user-box');
 
+var md = window.markdownit();
+
 // Loop through the buttons and add the active class to the current/clicked button
 // for (var i = 0; i < btns.length; i++) {
 //     btns[i].addEventListener("click", function() {
@@ -100,7 +102,7 @@ function populateMessages(userName, passphrase) {
                         messageCipher = JSON.stringify(obj.messageCipher);
                         console.log(messageCipher);
                         // let message = sjcl.decrypt("password", messageCipher);
-                        let message = sjcl.decrypt(passphrase, messageCipher);
+                        let message = md.render(sjcl.decrypt(passphrase, messageCipher));
                         let utcDate = obj.messageTime;
                         lastMessageTimeStamp = utcDate;
                         let localDate = new Date(utcDate);
@@ -154,7 +156,7 @@ function populateMessages(userName, passphrase) {
                     if (json.length > 0) {
                         json.forEach(function(obj) {
                             let messageCipher = JSON.stringify(obj.messageCipher);
-                            let message = sjcl.decrypt(passphrase, messageCipher);
+                            let message = md.render(sjcl.decrypt(passphrase, messageCipher));
                             // console.log(message);
                             // chatTextArea.append(message + "\n");	
                             let utcDate = obj.messageTime;
@@ -285,10 +287,9 @@ document.getElementById('chatMessageForm').addEventListener('submit', function(e
         return;
     }
     let messageContent = chatInput.value;
-    let localDate = new Date();
-    let messageLine = sprintf('%s %s %s: %s', localDate.toLocaleDateString(), localDate.toLocaleTimeString(), username, messageContent);
-    chatTextArea.append(messageLine + "\n");
-    chatTextArea.scrollTop = chatTextArea.scrollHeight;
+    let context = { fromUser: username, message: md.render(messageContent), time: new Date().toLocaleString() };
+    let msgContainer = msgContainerSendTemplate(context);
+    $(chatAreaNew).append(DOMPurify.sanitize(msgContainer));
     let messageCipher = sjcl.encrypt(passphraseInput.value, messageContent, { mode: "gcm", ts: 128, adata: "", iter: iterations });
     let messageCipherJson = JSON.parse(messageCipher);
     let chatMessageDTO = {
diff --git a/chatto/src/main/resources/templates/chat.html b/chatto/src/main/resources/templates/chat.html
index 799a8da..c141e0a 100644
--- a/chatto/src/main/resources/templates/chat.html
+++ b/chatto/src/main/resources/templates/chat.html
@@ -15,6 +15,7 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.0.3/purify.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/10.0.0/markdown-it.min.js"></script>
     <!-- <script th:src="@{js/my_Crypto.js}" type="text/javascript"></script> -->