From 2a385f377c8ffc1e75463a85f80ac678557f4fb2 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Thu, 2 Mar 2023 23:56:54 -0800
Subject: [PATCH] chore: Use markdown-it instead of marked (#6123)

* chore: Use markdown-it instead of marked

* Adds styling for markdown rendered content

* fixes codeclimate issue

* Fixes blockquote styles for widget in darkmode

* fix: issue block quote color issue in light mode

* fix: issue block quote color issue in light mode

* Fixes blockquote color in dark mode

* Remove usage of dark mode mixin in user bubble

* chore: code clean up

---------

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
---
 .../scss/widgets/_conversation-view.scss      | 21 +-----
 .../widgets/conversation/Message.vue          | 75 ++++++++++++++++++-
 .../widgets/conversation/bubble/Text.vue      | 20 ++++-
 .../shared/helpers/MessageFormatter.js        | 62 +++++++--------
 .../shared/helpers/markdownIt/link.js         | 69 +++++++++++++++++
 .../helpers/specs/MessageFormatter.spec.js    | 14 ++--
 .../widget/assets/scss/_variables.scss        | 15 +++-
 .../assets/scss/views/_conversation.scss      | 26 +++----
 .../widget/components/AgentMessageBubble.vue  | 13 +---
 .../widget/components/ChatMessage.vue         | 53 +++++++++++++
 .../widget/components/UserMessageBubble.vue   | 31 ++++++--
 package.json                                  |  3 +-
 yarn.lock                                     | 36 ++++++++-
 13 files changed, 332 insertions(+), 106 deletions(-)
 create mode 100644 app/javascript/shared/helpers/markdownIt/link.js

diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index dc75ee29d..97adeed4c 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -380,14 +380,6 @@
     text-decoration: underline;
   }
 
-  blockquote {
-    border-left-color: var(--s-300);
-
-    p {
-      color: var(--s-300);
-    }
-  }
-
   p:last-child {
     margin-bottom: 0;
   }
@@ -408,19 +400,8 @@
     text-decoration: underline;
   }
 
-  blockquote {
-    border-left-color: var(--w-100);
-
-    p {
-      color: var(--w-100);
-    }
-  }
-
-  pre code {
-    background: var(--color-background);
-  }
-
   p:last-child {
     margin-bottom: 0;
   }
 }
+
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index b4179b696..f8d50bfca 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -243,14 +243,14 @@ export default {
       return this.contentAttributes.translations || {};
     },
     displayQuotedButton() {
-      if (!this.isIncoming) {
-        return false;
-      }
-
       if (this.emailMessageContent.includes('<blockquote')) {
         return true;
       }
 
+      if (!this.isIncoming) {
+        return false;
+      }
+
       return false;
     },
     translationsAvailable() {
@@ -660,4 +660,71 @@ li.right {
 .context-menu {
   position: relative;
 }
+
+/* Markdown styling */
+
+.bubble .text-content {
+  p code {
+    background-color: var(--s-75);
+    display: inline-block;
+    line-height: 1;
+
+    border-radius: var(--border-radius-small);
+    padding: var(--space-smaller);
+  }
+
+  pre {
+    background-color: var(--s-75);
+    border-color: var(--s-75);
+    color: var(--s-800);
+    border-radius: var(--border-radius-normal);
+    padding: var(--space-small);
+    margin-top: var(--space-smaller);
+    margin-bottom: var(--space-small);
+    display: block;
+    line-height: 1.7;
+    white-space: pre-wrap;
+
+    code {
+      background-color: transparent;
+      color: var(--s-800);
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: var(--space-micro) solid var(--s-75);
+    color: var(--s-800);
+    padding: var(--space-smaller) var(--space-small);
+    margin: var(--space-smaller) 0;
+    padding: var(--space-small) var(--space-small) 0 var(--space-normal);
+  }
+}
+
+.right .bubble .text-content {
+  p code {
+    background-color: var(--w-600);
+    color: var(--white);
+  }
+
+  pre {
+    background-color: var(--w-800);
+    border-color: var(--w-700);
+    color: var(--white);
+
+    code {
+      background-color: transparent;
+      color: var(--white);
+    }
+  }
+
+  blockquote {
+    border-left: var(--space-micro) solid var(--w-400);
+    color: var(--white);
+
+    p {
+      color: var(--w-75);
+    }
+  }
+}
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
index e5294db99..d69abf626 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@@ -2,14 +2,14 @@
   <div
     class="message-text__wrap"
     :class="{
-      'show--quoted': showQuotedContent,
-      'hide--quoted': !showQuotedContent,
+      'show--quoted': isQuotedContentPresent,
+      'hide--quoted': !isQuotedContentPresent,
     }"
   >
     <div v-if="!isEmail" v-dompurify-html="message" class="text-content" />
     <letter v-else class="text-content" :html="message" />
     <button
-      v-if="displayQuotedButton"
+      v-if="showQuoteToggle"
       class="quoted-text--button"
       @click="toggleQuotedContent"
     >
@@ -49,6 +49,20 @@ export default {
       showQuotedContent: false,
     };
   },
+  computed: {
+    isQuotedContentPresent() {
+      if (!this.isEmail) {
+        return this.message.includes('<blockquote');
+      }
+      return this.showQuotedContent;
+    },
+    showQuoteToggle() {
+      if (!this.isEmail) {
+        return false;
+      }
+      return this.displayQuotedButton;
+    },
+  },
   methods: {
     toggleQuotedContent() {
       this.showQuotedContent = !this.showQuotedContent;
diff --git a/app/javascript/shared/helpers/MessageFormatter.js b/app/javascript/shared/helpers/MessageFormatter.js
index c4d0bb62e..59e1173ac 100644
--- a/app/javascript/shared/helpers/MessageFormatter.js
+++ b/app/javascript/shared/helpers/MessageFormatter.js
@@ -1,57 +1,49 @@
-import { marked } from 'marked';
-import DOMPurify from 'dompurify';
-import { escapeHtml, afterSanitizeAttributes } from './HTMLSanitizer';
+import mila from 'markdown-it-link-attributes';
+import mentionPlugin from './markdownIt/link';
+const md = require('markdown-it')({
+  html: false,
+  xhtmlOut: true,
+  breaks: true,
+  langPrefix: 'language-',
+  linkify: true,
+  typographer: true,
+  quotes: '\u201c\u201d\u2018\u2019',
+  maxNesting: 20,
+})
+  .use(mentionPlugin)
+  .use(mila, {
+    attrs: {
+      class: 'link',
+      rel: 'noreferrer noopener nofollow',
+      target: '_blank',
+    },
+  });
 
 const TWITTER_USERNAME_REGEX = /(^|[^@\w])@(\w{1,15})\b/g;
-const TWITTER_USERNAME_REPLACEMENT =
-  '$1<a href="http://twitter.com/$2" target="_blank" rel="noreferrer nofollow noopener">@$2</a>';
-
+const TWITTER_USERNAME_REPLACEMENT = '$1[@$2](http://twitter.com/$2)';
 const TWITTER_HASH_REGEX = /(^|\s)#(\w+)/g;
-const TWITTER_HASH_REPLACEMENT =
-  '$1<a href="https://twitter.com/hashtag/$2" target="_blank" rel="noreferrer nofollow noopener">#$2</a>';
-
-const USER_MENTIONS_REGEX = /mention:\/\/(user|team)\/(\d+)\/(.+)/gm;
+const TWITTER_HASH_REPLACEMENT = '$1[#$2](https://twitter.com/hashtag/$2)';
 
 class MessageFormatter {
   constructor(message, isATweet = false, isAPrivateNote = false) {
-    this.message = DOMPurify.sanitize(escapeHtml(message || ''));
+    this.message = message || '';
     this.isAPrivateNote = isAPrivateNote;
     this.isATweet = isATweet;
-    this.marked = marked;
-
-    const renderer = {
-      heading(text) {
-        return `<strong>${text}</strong>`;
-      },
-      link(url, title, text) {
-        const mentionRegex = new RegExp(USER_MENTIONS_REGEX);
-        if (url.match(mentionRegex)) {
-          return `<span class="prosemirror-mention-node">${text}</span>`;
-        }
-        return `<a rel="noreferrer noopener nofollow" href="${url}" class="link" title="${title ||
-          ''}" target="_blank">${text}</a>`;
-      },
-    };
-    this.marked.use({ renderer });
   }
 
   formatMessage() {
+    let updatedMessage = this.message;
     if (this.isATweet && !this.isAPrivateNote) {
-      const withUserName = this.message.replace(
+      updatedMessage = updatedMessage.replace(
         TWITTER_USERNAME_REGEX,
         TWITTER_USERNAME_REPLACEMENT
       );
-      const withHash = withUserName.replace(
+      updatedMessage = updatedMessage.replace(
         TWITTER_HASH_REGEX,
         TWITTER_HASH_REPLACEMENT
       );
-      const markedDownOutput = marked(withHash);
-      return markedDownOutput;
     }
-    DOMPurify.addHook('afterSanitizeAttributes', afterSanitizeAttributes);
-    return DOMPurify.sanitize(
-      marked(this.message, { breaks: true, gfm: true })
-    );
+    return md.render(updatedMessage);
   }
 
   get formattedMessage() {
diff --git a/app/javascript/shared/helpers/markdownIt/link.js b/app/javascript/shared/helpers/markdownIt/link.js
new file mode 100644
index 000000000..c5300391b
--- /dev/null
+++ b/app/javascript/shared/helpers/markdownIt/link.js
@@ -0,0 +1,69 @@
+// Process [@mention](mention://user/1/Pranav)
+const USER_MENTIONS_REGEX = /mention:\/\/(user|team)\/(\d+)\/(.+)/gm;
+
+const buildMentionTokens = () => (state, silent) => {
+  var label;
+  var labelEnd;
+  var labelStart;
+  var pos;
+  var res;
+  var token;
+  var href = '';
+  var max = state.posMax;
+
+  if (state.src.charCodeAt(state.pos) !== 0x5b /* [ */) {
+    return false;
+  }
+
+  labelStart = state.pos + 1;
+  labelEnd = state.md.helpers.parseLinkLabel(state, state.pos, true);
+
+  // parser failed to find ']', so it's not a valid link
+  if (labelEnd < 0) {
+    return false;
+  }
+
+  label = state.src.slice(labelStart, labelEnd);
+  pos = labelEnd + 1;
+
+  if (pos < max && state.src.charCodeAt(pos) === 0x28 /* ( */) {
+    pos += 1;
+    res = state.md.helpers.parseLinkDestination(state.src, pos, state.posMax);
+    if (res.ok) {
+      href = state.md.normalizeLink(res.str);
+      if (state.md.validateLink(href)) {
+        pos = res.pos;
+      } else {
+        href = '';
+      }
+    }
+    pos += 1;
+  }
+
+  if (!href.match(new RegExp(USER_MENTIONS_REGEX))) {
+    return false;
+  }
+
+  if (!silent) {
+    state.pos = labelStart;
+    state.posMax = labelEnd;
+
+    token = state.push('mention', '');
+    token.href = href;
+    token.content = label;
+  }
+
+  state.pos = pos;
+  state.posMax = max;
+
+  return true;
+};
+
+const renderMentions = () => (tokens, idx) => {
+  return `<span class="prosemirror-mention-node">${tokens[idx].content}</span>`;
+};
+
+export default function mentionPlugin(md) {
+  md.renderer.rules.mention = renderMentions(md);
+  md.inline.ruler.before('link', 'mention', buildMentionTokens(md));
+}
diff --git a/app/javascript/shared/helpers/specs/MessageFormatter.spec.js b/app/javascript/shared/helpers/specs/MessageFormatter.spec.js
index 1f2209b71..60c875c8a 100644
--- a/app/javascript/shared/helpers/specs/MessageFormatter.spec.js
+++ b/app/javascript/shared/helpers/specs/MessageFormatter.spec.js
@@ -6,14 +6,14 @@ describe('#MessageFormatter', () => {
       const message =
         'Chatwoot is an opensource tool. [Chatwoot](https://www.chatwoot.com)';
       expect(new MessageFormatter(message).formattedMessage).toMatch(
-        '<p>Chatwoot is an opensource tool. <a title="" class="link" href="https://www.chatwoot.com" rel="noreferrer noopener nofollow" target="_blank">Chatwoot</a></p>'
+        '<p>Chatwoot is an opensource tool. <a href="https://www.chatwoot.com" class="link" rel="noreferrer noopener nofollow" target="_blank">Chatwoot</a></p>'
       );
     });
     it('should format correctly', () => {
       const message =
         'Chatwoot is an opensource tool. https://www.chatwoot.com';
       expect(new MessageFormatter(message).formattedMessage).toMatch(
-        '<p>Chatwoot is an opensource tool. <a title="" class="link" href="https://www.chatwoot.com" rel="noreferrer noopener nofollow" target="_blank">https://www.chatwoot.com</a></p>'
+        '<p>Chatwoot is an opensource tool. <a href="https://www.chatwoot.com" class="link" rel="noreferrer noopener nofollow" target="_blank">https://www.chatwoot.com</a></p>'
       );
     });
   });
@@ -22,7 +22,8 @@ describe('#MessageFormatter', () => {
     it('should format correctly', () => {
       const message = '### opensource \n ## tool';
       expect(new MessageFormatter(message).formattedMessage).toMatch(
-        '<strong>opensource</strong><strong>tool</strong>'
+        `<h3>opensource</h3>
+<h2>tool</h2>`
       );
     });
   });
@@ -39,7 +40,7 @@ describe('#MessageFormatter', () => {
       expect(
         new MessageFormatter(message, true, false).formattedMessage
       ).toMatch(
-        '<p><a href="http://twitter.com/chatwootapp" target="_blank" rel="noreferrer nofollow noopener">@chatwootapp</a> is an opensource tool thanks @longnonexistenttwitterusername</p>'
+        '<p><a href="http://twitter.com/chatwootapp" class="link" rel="noreferrer noopener nofollow" target="_blank">@chatwootapp</a> is an opensource tool thanks @longnonexistenttwitterusername</p>'
       );
     });
 
@@ -48,7 +49,7 @@ describe('#MessageFormatter', () => {
       expect(
         new MessageFormatter(message, true, false).formattedMessage
       ).toMatch(
-        '<p><a href="https://twitter.com/hashtag/chatwootapp" target="_blank" rel="noreferrer nofollow noopener">#chatwootapp</a> is an opensource tool</p>'
+        '<p><a href="https://twitter.com/hashtag/chatwootapp" class="link" rel="noreferrer noopener nofollow" target="_blank">#chatwootapp</a> is an opensource tool</p>'
       );
     });
   });
@@ -90,7 +91,8 @@ describe('#MessageFormatter', () => {
       const message =
         '[xssLink](javascript:alert(document.cookie))\n[normalLink](https://google.com)**I am a bold text paragraph**';
       expect(new MessageFormatter(message).formattedMessage).toMatch(
-        '<p><a title="" class="link" rel="noreferrer noopener nofollow" target="_blank">xssLink</a><br><a title="" class="link" href="https://google.com" rel="noreferrer noopener nofollow" target="_blank">normalLink</a><strong>I am a bold text paragraph</strong></p>'
+        `<p>[xssLink](javascript:alert(document.cookie))<br />
+<a href="https://google.com" class="link" rel="noreferrer noopener nofollow" target="_blank">normalLink</a><strong>I am a bold text paragraph</strong></p>`
       );
     });
   });
diff --git a/app/javascript/widget/assets/scss/_variables.scss b/app/javascript/widget/assets/scss/_variables.scss
index d3cf6cc1c..73c4fce1b 100755
--- a/app/javascript/widget/assets/scss/_variables.scss
+++ b/app/javascript/widget/assets/scss/_variables.scss
@@ -26,6 +26,9 @@ $space-big: 4rem;
 $space-jumbo: 5rem;
 $space-mega: 6.25rem;
 
+$border-radius-small: 0.1875rem;
+$border-radius-normal: 0.3125rem;
+
 // font-weight
 $font-weight-feather: 100;
 $font-weight-light: 300;
@@ -74,8 +77,16 @@ $line-height: 1;
 $footer-height: 11.2rem;
 $header-expanded-height: $space-medium * 10;
 
-$font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
-  Roboto, 'Helvetica Neue', Tahoma, Arial, sans-serif;
+$font-family: 'Inter',
+-apple-system,
+system-ui,
+BlinkMacSystemFont,
+'Segoe UI',
+Roboto,
+'Helvetica Neue',
+Tahoma,
+Arial,
+sans-serif;
 
 // Break points
 $break-point-medium: 667px;
diff --git a/app/javascript/widget/assets/scss/views/_conversation.scss b/app/javascript/widget/assets/scss/views/_conversation.scss
index 7124c52fb..24f4701fc 100644
--- a/app/javascript/widget/assets/scss/views/_conversation.scss
+++ b/app/javascript/widget/assets/scss/views/_conversation.scss
@@ -1,4 +1,4 @@
-.file-uploads .attachment-button+label {
+.file-uploads .attachment-button + label {
   cursor: pointer;
 }
 
@@ -61,7 +61,7 @@
   }
 
   .agent-message-wrap {
-    +.agent-message-wrap {
+    + .agent-message-wrap {
       margin-top: $space-micro;
 
       .agent-message .chat-bubble {
@@ -69,11 +69,11 @@
       }
     }
 
-    +.user-message-wrap {
+    + .user-message-wrap {
       margin-top: $space-normal;
     }
 
-    &.has-response+.user-message-wrap {
+    &.has-response + .user-message-wrap {
       margin-top: $space-micro;
 
       .chat-bubble {
@@ -81,7 +81,7 @@
       }
     }
 
-    &.has-response+.agent-message-wrap {
+    &.has-response + .agent-message-wrap {
       margin-top: $space-normal;
     }
   }
@@ -117,7 +117,6 @@
     }
   }
 
-
   .user.has-attachment {
     .icon-wrap {
       color: $color-white;
@@ -129,7 +128,7 @@
   }
 
   .user-message-wrap {
-    +.user-message-wrap {
+    + .user-message-wrap {
       margin-top: $space-micro;
 
       .user-message .chat-bubble {
@@ -137,7 +136,7 @@
       }
     }
 
-    +.agent-message-wrap {
+    + .agent-message-wrap {
       margin-top: $space-normal;
     }
   }
@@ -147,7 +146,6 @@
   }
 }
 
-
 .unread-messages {
   display: flex;
   flex-direction: column;
@@ -168,7 +166,7 @@
       border: 1px solid $color-border-dark;
     }
 
-    +.chat-bubble-wrap {
+    + .chat-bubble-wrap {
       .chat-bubble {
         border-top-left-radius: $space-smaller;
       }
@@ -190,7 +188,7 @@
       border-radius: $space-two;
     }
 
-    +.chat-bubble-wrap {
+    + .chat-bubble-wrap {
       .chat-bubble {
         border-top-right-radius: $space-smaller;
       }
@@ -206,7 +204,6 @@
   }
 }
 
-
 .chat-bubble {
   @include light-shadow;
   border-radius: $space-two;
@@ -214,6 +211,7 @@
   display: inline-block;
   font-size: $font-size-default;
   line-height: 1.5;
+  max-width: 100%;
   padding: $space-slab $space-normal;
   text-align: left;
   word-break: break-word;
@@ -222,7 +220,7 @@
     max-width: 100%;
   }
 
-  >a {
+  > a {
     color: $color-primary;
     word-break: break-all;
   }
@@ -234,7 +232,7 @@
   &.user {
     border-bottom-right-radius: $space-smaller;
 
-    >a {
+    > a {
       color: $color-white;
     }
   }
diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
index 01fbe6faa..04b0808e5 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -5,7 +5,7 @@
         !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
       "
       class="chat-bubble agent"
-      :class="$dm('bg-white', 'dark:bg-slate-700')"
+      :class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')"
     >
       <div
         v-dompurify-html="formatMessage(message, false)"
@@ -142,14 +142,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
-
-.chat-bubble .message-content::v-deep pre {
-  background: $color-primary-light;
-  color: $color-body;
-  overflow-y: auto;
-  padding: $space-smaller;
-}
-</style>
diff --git a/app/javascript/widget/components/ChatMessage.vue b/app/javascript/widget/components/ChatMessage.vue
index b63525242..b70c3b2c2 100755
--- a/app/javascript/widget/components/ChatMessage.vue
+++ b/app/javascript/widget/components/ChatMessage.vue
@@ -35,3 +35,56 @@ export default {
   max-width: 90%;
 }
 </style>
+
+<style lang="scss">
+@import '~widget/assets/scss/variables.scss';
+
+.chat-bubble .message-content,
+.chat-bubble.user {
+  p code {
+    background-color: var(--s-75);
+    display: inline-block;
+    line-height: 1;
+
+    border-radius: $border-radius-small;
+    padding: $space-smaller;
+  }
+
+  pre {
+    overflow-y: auto;
+    background-color: var(--s-75);
+    border-color: var(--s-75);
+    color: var(--s-800);
+    border-radius: $border-radius-normal;
+    padding: $space-small;
+    margin-top: $space-smaller;
+    margin-bottom: $space-small;
+    display: block;
+    line-height: 1.7;
+    white-space: pre-wrap;
+
+    code {
+      background-color: transparent;
+      color: var(--s-800);
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: $space-micro solid var(--s-75);
+    color: var(--s-800);
+    padding: $space-smaller $space-small;
+    margin: $space-smaller 0;
+    padding: $space-small $space-small 0 $space-normal;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .chat-bubble.agent.has-dark-mode {
+    blockquote {
+      border-color: var(--s-200);
+      color: var(--s-50);
+    }
+  }
+}
+</style>
diff --git a/app/javascript/widget/components/UserMessageBubble.vue b/app/javascript/widget/components/UserMessageBubble.vue
index 50bc99a3b..eed90865f 100755
--- a/app/javascript/widget/components/UserMessageBubble.vue
+++ b/app/javascript/widget/components/UserMessageBubble.vue
@@ -38,10 +38,31 @@ export default {
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
-.chat-bubble.user::v-deep pre {
-  background: $color-primary-light;
-  color: $color-body;
-  overflow: auto;
-  padding: $space-smaller;
+.chat-bubble.user::v-deep {
+  p code {
+    background-color: var(--w-600);
+    color: var(--white);
+  }
+
+  pre {
+    background-color: var(--w-800);
+    border-color: var(--w-700);
+    color: var(--white);
+
+    code {
+      background-color: transparent;
+      color: var(--white);
+    }
+  }
+
+  blockquote {
+    border-left: $space-micro solid var(--w-400);
+    background: var(--s-25);
+    border-color: var(--s-200);
+
+    p {
+      color: var(--s-800);
+    }
+  }
 }
 </style>
diff --git a/package.json b/package.json
index 62d2c63da..8b1ce3b45 100644
--- a/package.json
+++ b/package.json
@@ -43,9 +43,10 @@
     "highlight.js": "~10.4.1",
     "ionicons": "~2.0.1",
     "js-cookie": "^2.2.1",
+    "markdown-it": "^13.0.1",
+    "markdown-it-link-attributes": "^4.0.1",
     "logrocket": "^3.0.1",
     "logrocket-vuex": "^0.0.3",
-    "marked": "4.0.10",
     "md5": "^2.3.0",
     "ninja-keys": "^1.1.9",
     "opus-recorder": "^8.0.5",
diff --git a/yarn.lock b/yarn.lock
index 2f78d9446..d31a238c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4823,6 +4823,11 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 aria-query@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@@ -7491,6 +7496,11 @@ entities@~2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.3.tgz#5c487e5742ab93c15abb5da22759b8590ec03b7f"
   integrity sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==
 
+entities@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -10927,6 +10937,13 @@ linkify-it@^2.0.0:
   dependencies:
     uc.micro "^1.0.1"
 
+linkify-it@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-4.0.1.tgz#01f1d5e508190d06669982ba31a7d9f56a5751ec"
+  integrity sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==
+  dependencies:
+    uc.micro "^1.0.1"
+
 lint-staged@10.5.4:
   version "10.5.4"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.5.4.tgz#cd153b5f0987d2371fc1d2847a409a2fe705b665"
@@ -11337,6 +11354,11 @@ markdown-escapes@^1.0.0:
   resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
   integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
 
+markdown-it-link-attributes@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/markdown-it-link-attributes/-/markdown-it-link-attributes-4.0.1.tgz#25751f2cf74fd91f0a35ba7b3247fa45f2056d88"
+  integrity sha512-pg5OK0jPLg62H4k7M9mRJLT61gUp9nvG0XveKYHMOOluASo9OEF13WlXrpAp2aj35LbedAy3QOCgQCw0tkLKAQ==
+
 markdown-it@^10.0.0:
   version "10.0.0"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-10.0.0.tgz#abfc64f141b1722d663402044e43927f1f50a8dc"
@@ -11348,10 +11370,16 @@ markdown-it@^10.0.0:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
-marked@4.0.10:
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.10.tgz#423e295385cc0c3a70fa495e0df68b007b879423"
-  integrity sha512-+QvuFj0nGgO970fySghXGmuw+Fd0gD2x3+MqCWLIPf5oxdv1Ka6b2q+z9RP01P/IaKPMEramy+7cNy/Lw8c3hw==
+markdown-it@^13.0.1:
+  version "13.0.1"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"
+  integrity sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==
+  dependencies:
+    argparse "^2.0.1"
+    entities "~3.0.1"
+    linkify-it "^4.0.1"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
 
 material-colors@^1.0.0:
   version "1.2.6"