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>
This commit is contained in:
Pranav Raj S
2023-03-02 23:56:54 -08:00
committed by GitHub
parent ec04ddc725
commit 2a385f377c
13 changed files with 332 additions and 106 deletions

View File

@@ -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>