nova/Chatto
1
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity

Added markdown rendering to chat area

Browse Source
This commit is contained in:
Rohan Sircar 2019-11-07 09:29:53 +05:30
parent 08c2ec786c
commit d577e38692
3 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
chatto/src/main/resources/static/css/chat.css
View File

@ -7,6 +7,14 @@ html {
background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); 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 { .user-box:hover {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }

13
chatto/src/main/resources/static/js/chat.js
View File

@ -37,6 +37,8 @@ var chatAreaNew = document.getElementById('chat_area_new');
var userBoxes = document.getElementsByName('user-box'); var userBoxes = document.getElementsByName('user-box');
var md = window.markdownit();
// Loop through the buttons and add the active class to the current/clicked button // Loop through the buttons and add the active class to the current/clicked button
// for (var i = 0; i < btns.length; i++) { // for (var i = 0; i < btns.length; i++) {
// btns[i].addEventListener("click", function() { // btns[i].addEventListener("click", function() {
@ -100,7 +102,7 @@ function populateMessages(userName, passphrase) {
messageCipher = JSON.stringify(obj.messageCipher); messageCipher = JSON.stringify(obj.messageCipher);
console.log(messageCipher); console.log(messageCipher);
// let message = sjcl.decrypt("password", 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; let utcDate = obj.messageTime;
lastMessageTimeStamp = utcDate; lastMessageTimeStamp = utcDate;
let localDate = new Date(utcDate); let localDate = new Date(utcDate);
@ -154,7 +156,7 @@ function populateMessages(userName, passphrase) {
if (json.length > 0) { if (json.length > 0) {
json.forEach(function(obj) { json.forEach(function(obj) {
let messageCipher = JSON.stringify(obj.messageCipher); let messageCipher = JSON.stringify(obj.messageCipher);
let message = sjcl.decrypt(passphrase, messageCipher); let message = md.render(sjcl.decrypt(passphrase, messageCipher));
// console.log(message); // console.log(message);
// chatTextArea.append(message + "\n"); // chatTextArea.append(message + "\n");
let utcDate = obj.messageTime; let utcDate = obj.messageTime;
@ -285,10 +287,9 @@ document.getElementById('chatMessageForm').addEventListener('submit', function(e
return; return;
} }
let messageContent = chatInput.value; let messageContent = chatInput.value;
let localDate = new Date(); let context = { fromUser: username, message: md.render(messageContent), time: new Date().toLocaleString() };
let messageLine = sprintf('%s %s %s: %s', localDate.toLocaleDateString(), localDate.toLocaleTimeString(), username, messageContent); let msgContainer = msgContainerSendTemplate(context);
chatTextArea.append(messageLine + "\n"); $(chatAreaNew).append(DOMPurify.sanitize(msgContainer));
chatTextArea.scrollTop = chatTextArea.scrollHeight;
let messageCipher = sjcl.encrypt(passphraseInput.value, messageContent, { mode: "gcm", ts: 128, adata: "", iter: iterations }); let messageCipher = sjcl.encrypt(passphraseInput.value, messageContent, { mode: "gcm", ts: 128, adata: "", iter: iterations });
let messageCipherJson = JSON.parse(messageCipher); let messageCipherJson = JSON.parse(messageCipher);
let chatMessageDTO = { let chatMessageDTO = {

1
chatto/src/main/resources/templates/chat.html
View File

@ -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/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/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> --> <!-- <script th:src="@{js/my_Crypto.js}" type="text/javascript"></script> -->