feat: Add markdown support for temporary comment system (#368)

Author: yammesicka

devops/lms.yml

@@ -21,7 +21,7 @@ services:
       - lms
 
   rabbitmq:
-    image: rabbitmq:3.12-management-alpine
+    image: rabbitmq:3.8-management-alpine
     hostname: celery-mq
     volumes:
       - rabbit-data-volume:/var/lib/rabbitmq

lms/static/comments.js

@@ -30,7 +30,8 @@ function isSolverComment(commentData) {
 }
 
 function formatCommentData(commentData) {
-  let changedCommentText = `<span class="comment-author">${commentData.author_name}:</span> ${commentData.text}`;
+  const commentText = DOMPurify.sanitize(marked.parse(commentData.text));
+  let changedCommentText = `<span class="comment-author">${commentData.author_name}:</span> ${commentText}`;
   if (window.isUserGrader() || isSolverComment(commentData)) {
     const deleteButton = `<i class="fa fa-trash grader-delete" aria-hidden="true" data-commentid="${commentData.id}" onclick="deleteComment(${window.fileId}, ${commentData.id});"></i>`;
     changedCommentText = `${deleteButton} ${changedCommentText}`;
@@ -55,10 +56,14 @@ function addCommentToLine(line, commentData) {
       boundary: 'viewport',
       placement: 'auto',
     });
+
+    commentElement.addEventListener('shown.bs.popover', function () {
+      Prism.highlightAllUnder(existingPopover.tip);
+    })
   }
 
   commentElement.dataset.comment = 'true';
-  if (commentData.is_auto) {
+  if ((commentData.is_auto) && (commentElement.dataset.marked !== 'true')) {
     markLine(commentElement, FLAKE_COMMENTED_LINE_COLOR);
   } else {
     const lineColor = window.getLineColorByRole(commentData.author_role);
@@ -140,6 +145,17 @@ function addLineSpansToPre(items) {
   window.dispatchEvent(new Event('lines-numbered'));
 }
 
+function configureMarkdownParser() {
+  marked.use({
+    renderer: {
+      code: (code, infoString, _) => {
+        const language = infoString || 'plaintext';
+        return `<pre><code class="language-${language}">${code}</code></pre>`;
+      }
+    },
+  });
+}
+
 window.markLink = markLine;
 window.hoverLine = hoverLine;
 window.addCommentToLine = addCommentToLine;
@@ -152,6 +168,7 @@ window.addEventListener('load', () => {
   sessionStorage.setItem('role', codeElementData.role);
   sessionStorage.setItem('solver', codeElementData.solver);
   sessionStorage.setItem('allowedComment', codeElementData.allowedComment);
+  configureMarkdownParser();
   addLineSpansToPre(document.getElementsByTagName('code'));
   pullComments(window.fileId, treatComments);
 });