From 9db4641d6c27494b8f15c58814e7747bcf1ab647 Mon Sep 17 00:00:00 2001 From: SebinSong Date: Sat, 14 Dec 2024 10:04:39 +0900 Subject: [PATCH 1/7] markdown bugfix for the broken blockquotes --- frontend/views/utils/markdown-utils.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/views/utils/markdown-utils.js b/frontend/views/utils/markdown-utils.js index 41092a3ac1..2de8035968 100644 --- a/frontend/views/utils/markdown-utils.js +++ b/frontend/views/utils/markdown-utils.js @@ -37,12 +37,13 @@ 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, '>') + entryText = entryText.replace(//g, '>') // Replace all '>' with '>' 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
') - .replace(/
\n(\s*)(\d+\.|-)/g, '\n\n$1$2') // [1] custom-handling the case where
is directly followed by the start of ordered/unordered lists - .replace(/(\d+\.|-)(\s.+)\n
/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(/
\n(\s*)(>|\d+\.|-)/g, '\n\n$1$2') // [1] custom-handling the case where
is directly followed by the start of ordered/unordered lists + .replace(/(>|\d+\.|-)(\s.+)\n
/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
/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 } }) From 92e9798222d159613b8a32221c2b34adc210b6be Mon Sep 17 00:00:00 2001 From: SebinSong Date: Sat, 14 Dec 2024 10:15:14 +0900 Subject: [PATCH 2/7] add edge-case handling logic --- frontend/views/utils/markdown-utils.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/views/utils/markdown-utils.js b/frontend/views/utils/markdown-utils.js index 2de8035968..11fefca411 100644 --- a/frontend/views/utils/markdown-utils.js +++ b/frontend/views/utils/markdown-utils.js @@ -44,12 +44,15 @@ export function renderMarkdown (str: string): any { .replace(/
\n(\s*)(>|\d+\.|-)/g, '\n\n$1$2') // [1] custom-handling the case where
is directly followed by the start of ordered/unordered lists .replace(/(>|\d+\.|-)(\s.+)\n
/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
/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) + + console.log('!@# entryText after all transformations: ', entryText) entry.text = entryText } }) str = combineMarkdownSegmentListIntoString(strSplitByCodeMarkdown) - str = str.replace(/(\d+\.|-)(\s.+)\n
/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
/g, '$1$2\n\n') + .replace(/(>)(\s.+)\n
/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 }) From ae2ee0a9408a9d21ba5bcb176db1d84413784905 Mon Sep 17 00:00:00 2001 From: SebinSong Date: Sat, 14 Dec 2024 10:15:41 +0900 Subject: [PATCH 3/7] remove console.log --- frontend/views/utils/markdown-utils.js | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/views/utils/markdown-utils.js b/frontend/views/utils/markdown-utils.js index 11fefca411..159ce0880b 100644 --- a/frontend/views/utils/markdown-utils.js +++ b/frontend/views/utils/markdown-utils.js @@ -45,7 +45,6 @@ export function renderMarkdown (str: string): any { .replace(/(>|\d+\.|-)(\s.+)\n
/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
/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) - console.log('!@# entryText after all transformations: ', entryText) entry.text = entryText } }) From dd17dc5e059474be886dec3b74b96c0c4d8d548d Mon Sep 17 00:00:00 2001 From: SebinSong Date: Sat, 14 Dec 2024 10:21:10 +0900 Subject: [PATCH 4/7] fix the linter err --- frontend/views/utils/markdown-utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/views/utils/markdown-utils.js b/frontend/views/utils/markdown-utils.js index 159ce0880b..02f34a23f3 100644 --- a/frontend/views/utils/markdown-utils.js +++ b/frontend/views/utils/markdown-utils.js @@ -51,7 +51,7 @@ export function renderMarkdown (str: string): any { str = combineMarkdownSegmentListIntoString(strSplitByCodeMarkdown) str = str.replace(/(\d+\.|-)(\s.+)\n
/g, '$1$2\n\n') - .replace(/(>)(\s.+)\n
/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) + .replace(/(>)(\s.+)\n
/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 }) From c2a7d7f5f63bc991401f84a94627a338c168b447 Mon Sep 17 00:00:00 2001 From: SebinSong Date: Sat, 14 Dec 2024 10:28:17 +0900 Subject: [PATCH 5/7] comment update --- frontend/views/utils/markdown-utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/views/utils/markdown-utils.js b/frontend/views/utils/markdown-utils.js index 02f34a23f3..803adbb2e2 100644 --- a/frontend/views/utils/markdown-utils.js +++ b/frontend/views/utils/markdown-utils.js @@ -51,7 +51,7 @@ export function renderMarkdown (str: string): any { str = combineMarkdownSegmentListIntoString(strSplitByCodeMarkdown) str = str.replace(/(\d+\.|-)(\s.+)\n
/g, '$1$2\n\n') - .replace(/(>)(\s.+)\n
/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) + .replace(/(>)(\s.+)\n
/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 }) From 6bb3e8dffe91d0c814a7c88ea782ae8c828d98ad Mon Sep 17 00:00:00 2001 From: SebinSong Date: Sat, 14 Dec 2024 10:41:07 +0900 Subject: [PATCH 6/7] comment update for flaky test --- frontend/views/utils/markdown-utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/views/utils/markdown-utils.js b/frontend/views/utils/markdown-utils.js index 803adbb2e2..02f34a23f3 100644 --- a/frontend/views/utils/markdown-utils.js +++ b/frontend/views/utils/markdown-utils.js @@ -51,7 +51,7 @@ export function renderMarkdown (str: string): any { str = combineMarkdownSegmentListIntoString(strSplitByCodeMarkdown) str = str.replace(/(\d+\.|-)(\s.+)\n
/g, '$1$2\n\n') - .replace(/(>)(\s.+)\n
/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) + .replace(/(>)(\s.+)\n
/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 }) From dc68f199d1d74caccd4cf47b3e404ffb8e2d41de Mon Sep 17 00:00:00 2001 From: SebinSong Date: Mon, 16 Dec 2024 20:25:25 +0900 Subject: [PATCH 7/7] handle blank-line within the blockquotes --- frontend/assets/style/components/_custom-markdowns.scss | 6 ++++++ 1 file changed, 6 insertions(+) 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 {