Merge pull request #10063 from nextcloud/feat/9949/frontend-markdown-…

…support feat(Message) - support Markdown in messages
nextcloud · Jul 27, 2023 · 9b92330 · 9b92330
2 parents 53ae33b + e646536
commit 9b92330
Showing 1 changed file with 56 additions and 13 deletions.
diff --git 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.
 				<div v-else-if="showJoinCallButton" class="message-body__main__text call-started">
 					<NcRichText :text="message"
 						:arguments="richParameters"
-						:autolink="true"
+						autolink
 						:reference-limit="0" />
 					<CallButton />
 				</div>
-				<div v-else-if="showResultsButton" class="message-body__main__text system-message">
+				<div v-else-if="showResultsButton || isSystemMessage" class="message-body__main__text system-message">
 					<NcRichText :text="message"
 						:arguments="richParameters"
-						:autolink="true"
+						autolink
 						:reference-limit="0" />
 					<!-- Displays only the "see results" button with the results modal -->
-					<Poll :id="messageParameters.poll.id"
+					<Poll v-if="showResultsButton"
+						:id="messageParameters.poll.id"
 						:poll-name="messageParameters.poll.name"
 						:token="token"
-						:show-as-button="true" />
+						show-as-button />
 				</div>
 				<div v-else-if="isDeletedMessage" class="message-body__main__text deleted-message">
 					<NcRichText :text="message"
 						:arguments="richParameters"
-						:autolink="true"
+						autolink
 						:reference-limit="0" />
 				</div>
-				<div v-else class="message-body__main__text" :class="{'system-message': isSystemMessage}">
+				<div v-else class="message-body__main__text message-body__main__text--markdown">
 					<Quote v-if="parent" :parent-id="parent" v-bind="quote" />
 					<NcRichText :text="message"
 						:arguments="richParameters"
-						:autolink="true"
+						autolink
+						:use-markdown="markdown"
 						:reference-limit="1" />
 				</div>
 				<div v-if="!isDeletedMessage" class="message-body__main__right">
@@ -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;
+		}
+	}
+}
 </style>