From 28c0fcaa22bb7756c6aeac5fc57dca5a0d9d687a Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Wed, 30 Aug 2023 09:41:48 +0200
Subject: [PATCH] add examples for NcRichContenteditable.vue output

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
(cherry picked from commit 31db00d409bbd4ff02bb7ec020cda215350c57f7)
---
 .../NcRichContenteditable.vue                 | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
index ee3fe938ea..d14577edd8 100644
--- a/src/components/NcRichContenteditable/NcRichContenteditable.vue
+++ b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -47,16 +47,26 @@ This component displays contenteditable div with automated `@` [at] autocompleti
 			:user-data="userData"
 			placeholder="Try mentioning user @Test01 or inserting emoji :smile"
 			@submit="onSubmit" />
-		<br>
-		<br>
+
+		<h5>Output - raw</h5>
 		{{ JSON.stringify(message) }}
+
+		<h5>Output - preformatted</h5>
+		<p class="pre-line">{{ message }}</p>
+
+		<h5>Output - in NcRichText with markdown support</h5>
+		<NcRichText :text="message" use-markdown />
 	</div>
 </template>
 <script>
+	import NcRichText from "../NcRichText/NcRichText.vue";
+
 export default {
+	components: {NcRichText},
+
 	data() {
 		return {
-			message: 'Lorem ipsum dolor sit amet.',
+			message: '**Lorem ipsum** dolor sit amet.',
 
 			// You need to provide this for the inline
 			// mention to understand what to display or not.
@@ -142,6 +152,16 @@ export default {
 	}
 }
 </script>
+<style lang="scss" scoped>
+	h5 {
+		font-weight: bold;
+		margin: 40px 0 20px 0;
+	}
+
+	.pre-line {
+		white-space: pre-line;
+	}
+</style>
 ```
 
 </docs>