From bb17cdd123153f1425c8a23582b179420566b2e0 Mon Sep 17 00:00:00 2001
From: Rafi <rafiwx@gmail.com>
Date: Thu, 9 Mar 2023 23:35:56 +0800
Subject: [PATCH] Using markdown-it instead of marked as the markdown parser
 significantly improves the flickering issue during message rendering.

---
 components/MsgContent.vue | 21 ++++++++++-----------
 package.json              |  2 +-
 yarn.lock                 | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/components/MsgContent.vue b/components/MsgContent.vue
index 29ddd3d..6d25412 100644
--- a/components/MsgContent.vue
+++ b/components/MsgContent.vue
@@ -1,14 +1,15 @@
 <script setup>
-import { marked } from "marked"
 import hljs from "highlight.js"
+import MarkdownIt from 'markdown-it'
 import copy from 'copy-to-clipboard'
 
-marked.setOptions({
-  highlight: function (code, lang) {
+
+const md = new MarkdownIt({
+  linkify: true,
+  highlight(code, lang) {
     const language = hljs.getLanguage(lang) ? lang : 'plaintext'
-    return `<div class="hljs-code-header d-flex align-center justify-space-between bg-grey-darken-3 pa-1"><span class="pl-2 text-caption">${language}</span><button class="hljs-copy-button" data-copied="false">Copy</button></div><div class="hljs-code-body">${hljs.highlight(code, { language }).value}</div>`
+    return `<pre class="hljs-code-container my-3"><div class="hljs-code-header d-flex align-center justify-space-between bg-grey-darken-3 pa-1"><span class="pl-2 text-caption">${language}</span><button class="hljs-copy-button" data-copied="false">Copy</button></div><code class="hljs language-${language}">${hljs.highlight(code, { language: language, ignoreIllegals: true }).value}</code></pre>`
   },
-  langPrefix: 'hljs-code-container my-3 hljs language-', // highlight.js css class prefix
 })
 
 const props = defineProps(['content'])
@@ -18,7 +19,7 @@ const contentHtml = ref('')
 const contentElm = ref(null)
 
 watchEffect(() => {
-  contentHtml.value = props.content ? marked(props.content) : ''
+  contentHtml.value = props.content ? md.render(props.content) : ''
 })
 
 const bindCopyCodeToButtons = () => {
@@ -27,7 +28,7 @@ const bindCopyCodeToButtons = () => {
   }
   contentElm.value.querySelectorAll('.hljs-code-container').forEach((codeContainer) => {
     const copyButton = codeContainer.querySelector('.hljs-copy-button');
-    const codeBody = codeContainer.querySelector('.hljs-code-body');
+    const codeBody = codeContainer.querySelector('code');
     copyButton.onclick = function () {
       copy(codeBody.textContent ?? '');
 
@@ -56,7 +57,7 @@ onUpdated(() => {
   <div
       ref="contentElm"
       v-html="contentHtml"
-      class="chat-msg-content text-justify"
+      class="chat-msg-content"
   ></div>
 </template>
 
@@ -66,9 +67,7 @@ onUpdated(() => {
 }
 .hljs-code-container {
   border-radius: 3px;
-}
-.hljs-code-header {
-  margin: -1em -1em 10px -1em;
+  overflow: hidden;
 }
 .hljs-copy-button{
   width:2rem;height:2rem;text-indent:-9999px;color:#fff;
diff --git a/package.json b/package.json
index 72bbad0..b9e3fe3 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "copy-to-clipboard": "^3.3.3",
     "highlight.js": "^11.7.0",
     "is-mobile": "^3.1.1",
-    "marked": "^4.2.12",
+    "markdown-it": "^13.0.1",
     "nanoid": "^4.0.1",
     "vuetify": "^3.0.6"
   },
diff --git a/yarn.lock b/yarn.lock
index e8839e4..844bebf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2005,6 +2005,11 @@ entities@^2.0.0:
   resolved "https://registry.npmmirror.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 errno@^0.1.3:
   version "0.1.8"
   resolved "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -2801,6 +2806,13 @@ lilconfig@^2.0.3:
   resolved "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
   integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
 
+linkify-it@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmmirror.com/linkify-it/-/linkify-it-4.0.1.tgz#01f1d5e508190d06669982ba31a7d9f56a5751ec"
+  integrity sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==
+  dependencies:
+    uc.micro "^1.0.1"
+
 listhen@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/listhen/-/listhen-1.0.2.tgz#3332af0cf77dd914e12d125c70a9c6aed9537033"
@@ -2950,6 +2962,17 @@ make-dir@^3.1.0, make-dir@~3.1.0:
   dependencies:
     semver "^6.0.0"
 
+markdown-it@^13.0.1:
+  version "13.0.1"
+  resolved "https://registry.npmmirror.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"
+
 marked@^4.2.12:
   version "4.2.12"
   resolved "https://registry.npmmirror.com/marked/-/marked-4.2.12.tgz#d69a64e21d71b06250da995dcd065c11083bebb5"
@@ -2965,6 +2988,11 @@ mdn-data@2.0.14:
   resolved "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
+
 memory-fs@^0.5.0:
   version "0.5.0"
   resolved "https://registry.npmmirror.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
@@ -4266,6 +4294,11 @@ type-fest@^3.0.0:
   resolved "https://registry.npmmirror.com/type-fest/-/type-fest-3.5.7.tgz#1ee9efc9a172f4002c40b896689928a7bba537f2"
   integrity sha512-6J4bYzb4sdkcLBty4XW7F18VPI66M4boXNE+CY40532oq2OJe6AVMB5NmjOp6skt/jw5mRjz/hLRpuglz0U+FA==
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.npmmirror.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 ufo@^1.0.0, ufo@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/ufo/-/ufo-1.0.1.tgz#64ed43b530706bda2e4892f911f568cf4cf67d29"