From 4440db49f2e0672cb4b0f81003a546bb5c4b35bd Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 31 Aug 2023 12:01:53 +0200
Subject: [PATCH] feat(docs) extend NcRichText docs with markdown examples and
 NcRichContenteditable usage

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

diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue
index 99ea79d1af..e5d2b9e262 100644
--- a/src/components/NcRichText/NcRichText.vue
+++ b/src/components/NcRichText/NcRichText.vue
@@ -21,6 +21,12 @@
   -
   -->
 <docs>
+### General description
+
+This component displays rich text with optional autolink or [Markdown support](https://www.markdownguide.org/basic-syntax/).
+
+### Example
+
 ```vue
 <template>
 	<div>
@@ -29,6 +35,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 +44,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,10 +72,68 @@ 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>
 ```
+
+### Usage with NcRichContenteditable
+
+NcRichContenteditable escapes some special symbols, so NcRichText should parse them as well.
+
+See [NcRichContenteditable](#/Components/NcRichContenteditable) documentation for more information
+```vue
+<template>
+	<div>
+		<NcRichContenteditable :value.sync="message"
+			:auto-complete="autoComplete"
+			:maxlength="100"
+			:user-data="userData"
+			placeholder="Try mentioning user @Test01 or inserting emoji :smile"
+			@submit="onSubmit" />
+
+		<NcCheckboxRadioSwitch :checked.sync="autolink" type="checkbox">Autolink</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch :checked.sync="useMarkdown" type="checkbox">Use Markdown</NcCheckboxRadioSwitch>
+
+		<NcRichText :text="text"
+			:autolink="autolink"
+			:arguments="userMentions"
+			:use-markdown="useMarkdown" />
+	</div>
+</template>
+<script>
+	import { parseUserMentions, userData, userMentions } from "../NcRichContenteditable/docsHelpers.js";
+
+	export default {
+		data() {
+			return {
+				message: '',
+				autolink: true,
+				useMarkdown: true,
+				userData,
+				userMentions,
+			}
+		},
+		computed: {
+			text() {
+				return parseUserMentions(this.message)
+			},
+		},
+		methods: {
+			autoComplete(search, callback) {
+				callback(Object.values(this.userData))
+			},
+			onSubmit() {
+				alert(this.message)
+			}
+		}
+	}
+</script>
+```
 </docs>
 
 <script>