From 42aab3d0221cf7de71e229ad0e0121ce4615d4f4 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 7 Sep 2023 11:07:44 +0200
Subject: [PATCH] feat(docs) add some markdown examples to the NcRichText docs

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NcRichText/NcRichText.vue | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue
index 9cb7a92f3a..c227886098 100644
--- a/src/components/NcRichText/NcRichText.vue
+++ b/src/components/NcRichText/NcRichText.vue
@@ -21,6 +21,10 @@
   -
   -->
 <docs>
+### General description
+
+This component displays rich text with optional autolink or [Markdown support](https://www.markdownguide.org/basic-syntax/).
+
 ```vue
 <template>
 	<div>
@@ -29,6 +33,7 @@
 		<NcCheckboxRadioSwitch :checked.sync="useMarkdown" type="checkbox">Use Markdown</NcCheckboxRadioSwitch>
 
 		<NcRichText
+			:class="{'plain-text': !useMarkdown }"
 			:text="text" :autolink="autolink" :arguments="args"
 			:use-markdown="useMarkdown" />
 	</div>
@@ -37,11 +42,16 @@
 export default {
 	data() {
 		return {
-			text: `Hello {username}. The file {file} was added by {username}. Go visit https://nextcloud.com
+			text: `## Hello everyone 🎉
+The file {file} was added by {username}. Visit https://nextcloud.com to check it!
 
-Local IP: http://127.0.0.1/status.php should be clickable
+Some examples for markdown syntax:
+1. **bold text**
+2. _italic text_
+3. example of \`inline code\`
 
-Some examples for markdown syntax: **bold text** *italic text* \`inline code\``,
+> blockquote example
+`,
 			autolink: true,
 			useMarkdown: true,
 			args: {
@@ -60,7 +70,11 @@ Some examples for markdown syntax: **bold text** *italic text* \`inline code\``,
 <style lang="scss">
 textarea {
 	width: 100%;
-	height: 100px;
+	height: 200px;
+}
+
+.plain-text {
+	white-space: pre-line;
 }
 </style>
 ```