From 2223594d1a9f75dc01abc6c0a4bad5472a9716c1 Mon Sep 17 00:00:00 2001
From: Sebin Song <songxevin@gmail.com>
Date: Tue, 17 Dec 2024 04:41:16 +0900
Subject: [PATCH] #2457 - Fix the broken blockquotes in the chat markdown
 (#2458)

* markdown bugfix for the broken blockquotes

* add edge-case handling logic

* remove console.log

* fix the linter err

* comment update

* comment update for flaky test

* handle blank-line within the blockquotes
---
 .../assets/style/components/_custom-markdowns.scss    |  6 ++++++
 frontend/views/utils/markdown-utils.js                | 11 +++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/assets/style/components/_custom-markdowns.scss b/frontend/assets/style/components/_custom-markdowns.scss
index cd0f84f089..5620aea0e7 100644
--- a/frontend/assets/style/components/_custom-markdowns.scss
+++ b/frontend/assets/style/components/_custom-markdowns.scss
@@ -115,6 +115,7 @@
     position: relative;
     padding-left: 1rem;
     white-space: pre-line;
+    margin: 0.25rem 0;
 
     &::before {
       content: "";
@@ -127,6 +128,11 @@
       border-radius: 8px;
       background-color: $general_0;
     }
+
+    p:has(+ p, + pre),
+    pre:has(+ p, + pre) {
+      margin-bottom: 1rem;
+    }
   }
 
   .link {
diff --git a/frontend/views/utils/markdown-utils.js b/frontend/views/utils/markdown-utils.js
index 41092a3ac1..02f34a23f3 100644
--- a/frontend/views/utils/markdown-utils.js
+++ b/frontend/views/utils/markdown-utils.js
@@ -37,18 +37,21 @@ export function renderMarkdown (str: string): any {
   strSplitByCodeMarkdown.forEach((entry, index) => {
     if (entry.type === 'plain' && strSplitByCodeMarkdown[index - 1]?.text !== '```') {
       let entryText = entry.text
-      entryText = entryText.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+      entryText = entryText.replace(/</g, '&lt;')
+        .replace(/(?<!(^|\n))>/g, '&gt;') // Replace all '>' with '&gt;' except for the ones that are not preceded by a line-break or start of the string (e.g. '> asdf' is a blockquote).
 
       entryText = entryText.replace(/\n(?=\n)/g, '\n<br>')
-        .replace(/<br>\n(\s*)(\d+\.|-)/g, '\n\n$1$2') // [1] custom-handling the case where <br> is directly followed by the start of ordered/unordered lists
-        .replace(/(\d+\.|-)(\s.+)\n<br>/g, '$1$2\n\n') // [2] this is a custom-logic added so that the end of ordered/un-ordered lists are correctly detected by markedjs.
+        .replace(/<br>\n(\s*)(>|\d+\.|-)/g, '\n\n$1$2') // [1] custom-handling the case where <br> is directly followed by the start of ordered/unordered lists
+        .replace(/(>|\d+\.|-)(\s.+)\n<br>/g, '$1$2\n\n') // [2] this is a custom-logic added so that the end of ordered/un-ordered lists are correctly detected by markedjs.
+        .replace(/(>)(\s.+)\n<br>/gs, '$1$2\n\n') // [3] this is a custom-logic added so that the end of blockquotes are correctly detected by markedjs. ('s' flag is needed to account for multi-line strings)
 
       entry.text = entryText
     }
   })
 
   str = combineMarkdownSegmentListIntoString(strSplitByCodeMarkdown)
-  str = str.replace(/(\d+\.|-)(\s.+)\n<br>/g, '$1$2\n\n') // Check for [2] above once more to resolve edge-cases (reference: https://github.com/okTurtles/group-income/issues/2356)
+  str = str.replace(/(\d+\.|-)(\s.+)\n<br>/g, '$1$2\n\n')
+    .replace(/(>)(\s.+)\n<br>/gs, '$1$2\n\n') // Check for [2], [3] above once more to resolve edge-cases (reference: https://github.com/okTurtles/group-income/issues/2356)
 
   // STEP 2. convert the markdown into html DOM string.
   let converted = marked.parse(str, { gfm: true })