Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#2283 - Chat should not replace symbols in <code> #2293

Merged
merged 2 commits into from
Aug 14, 2024
Merged

#2283 - Chat should not replace symbols in <code> #2293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
caf10f4
additional bug-fix
SebinSong Aug 8, 2024
2e0d00b
some more bug-fixes
SebinSong Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/assets/style/components/_custom-markdowns.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
margin: 0.75rem 0;
}

ul li {
ul > li {
position: relative;
display: block;
padding: 0 0 0.2rem 1.125rem;
Expand All @@ -85,7 +85,7 @@
}
}

ol li {
ol > li {
position: relative;
padding-bottom: 0.2rem;
margin-left: 1.125rem;
Expand All @@ -102,7 +102,7 @@
margin-bottom: 0;
}

> ul li::before {
> ul > li::before {
background-color: rgba(0, 0, 0, 0);
border: 1px solid $text_0;
top: 0.6rem;
Expand Down
20 changes: 15 additions & 5 deletions frontend/views/utils/markdown-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,21 @@ export function renderMarkdown (str: string): any {
// There is some caveats discovered with 'dompurify' and DOMParser() API regarding how they interpret '<' and '>' characters.
// So manually converting them to '&lt;' and '&gt;' here first.
// ( context: https://github.com/okTurtles/group-income/issues/2130 )
str = str.replace(/</g, '&lt;').replace(/>/g, '&gt;')
const strSplitByCodeMarkdown = splitStringByMarkdownCode(str)
strSplitByCodeMarkdown.forEach((entry, index) => {
if (entry.type === 'plain' && strSplitByCodeMarkdown[index - 1]?.text !== '```') {
let entryText = entry.text
entryText = entryText.replace(/</g, '&lt;').replace(/>/g, '&gt;')

str = str.replace(/\n(?=\n)/g, '\n<br>')
.replace(/<br>\n(\s*)(\d+\.|-|```)/g, '\n\n$1$2') // custom-handling the case where <br> is directly followed by the start of block-code (```)
.replace(/(\d+\.|-)(\s.+)\n<br>/g, '$1$2\n\n') // this is a custom-logic added so that the end of ordered/un-ordered lists are correctly detected by markedjs.
entryText = entryText.replace(/\n(?=\n)/g, '\n<br>')
.replace(/<br>\n(\s*)(\d+\.|-)/g, '\n\n$1$2') // 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') // this is a custom-logic added so that the end of ordered/un-ordered lists are correctly detected by markedjs.

entry.text = entryText
}
})

str = combineMarkdownSegmentListIntoString(strSplitByCodeMarkdown)
Comment on lines +36 to +50
Copy link
Collaborator Author

@SebinSong SebinSong Aug 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The cause of the issue was that,
These additional fixes & adjustments related to white-spaces, line-breaks and < and > did not need to be applied to the contents of <code>...</code>.
So a logic added here where it selectively apply these adjustments to the text contents outside of <code>...</code>.


// STEP 2. convert the markdown into html DOM string.
let converted = marked.parse(str, { gfm: true })
Expand Down Expand Up @@ -145,7 +155,7 @@ export function splitStringByMarkdownCode (
// This function takes a markdown string and split it by texts written as either inline/block code.
// (e.g. `asdf`, ```const var = 123```)

const regExCodeMultiple = /(^```\n[\s\S]*?```$)/gm // Detecting multi-line code-block by reg-exp - reference: https://regexr.com/4h9sh
const regExCodeMultiple = /(^[\s]*```\n[\s\S]*?```$)/gm // Detecting multi-line code-block by reg-exp - reference: https://regexr.com/4h9sh
const regExCodeInline = /(`.+`)/g
const splitByMulitpleCode = str.split(regExCodeMultiple)
const finalArr = []
Expand Down