diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index 259935fcd66..31c630b1739 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -57,32 +57,34 @@ the main body of the message as well as a quote.
-
+
- + show-as-button />
-
+
@@ -391,6 +393,13 @@ export default { type: Number, default: 0, }, + /** + * Is message allowed to render in markdown + */ + markdown: { + type: Boolean, + default: true, + }, sendingFailure: { type: String, default: '', @@ -907,11 +916,6 @@ export default { align-items: center; } - :deep(.rich-text--wrapper) { - white-space: pre-wrap; - word-break: break-word; - } - &--quote { border-left: 4px solid var(--color-primary-element); padding: 4px 0 0 8px; @@ -1020,4 +1024,43 @@ export default { .reaction-details { padding: 8px; } + +.message-body__main__text--markdown { + :deep(.rich-text--wrapper) { + h1 { + font-weight: bold; + font-size: 32px; + margin-bottom: 12px; + line-height: 36px; + color: var(--color-text-light); + } + + em { + font-style: italic; + } + + ul { + padding-left: 20px; + list-style-type: disc; + } + + ol { + padding-left: 20px; + list-style-type: decimal; + } + + pre, + code, + blockquote { + padding: 6px; + margin: 2px; + border-radius: var(--border-radius); + background-color: var(--color-background-dark); + } + + pre { + overflow-x: auto; + } + } +}