Added markdown rendering to chat area

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);
 }

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 = {

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> -->