feat(docs) show mentions in NcRichText output example

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud-libraries · Sep 6, 2023 · 6be0d2b · 6be0d2b
1 parent c338863
commit 6be0d2b
Show file tree

Hide file tree

Showing 2 changed files with 144 additions and 65 deletions.
diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -27,6 +27,8 @@ This component displays contenteditable div with automated `@` [at] autocompleti
 
 ### Examples
 
+Try mentioning user @Test01 or inserting emoji :smile
+
 ```vue
 <template>
 	<div>
@@ -55,84 +57,48 @@ This component displays contenteditable div with automated `@` [at] autocompleti
 		<p class="pre-line">{{ message }}</p>
 
 		<h5>Output - in NcRichText with markdown support</h5>
-		<NcRichText :text="message" use-markdown />
+		<NcRichText :text="text" :arguments="userMentions" autolink use-markdown />
 	</div>
 </template>
 <script>
-	import NcRichText from "../NcRichText/NcRichText.vue";
+	import { parseUserMentions, userData, userMentions } from "./docsHelpers.js";
 
 export default {
-	components: {NcRichText},
-
 	data() {
 		return {
 			message: '**Lorem ipsum** dolor sit amet.',
 
 			// You need to provide this for the inline
 			// mention to understand what to display or not.
-			userData: {
-				Test01: {
-					icon: 'icon-user',
-					id: 'Test01',
-					title: 'Test01',
-					source: 'users',
-					primary: true,
-				},
-				Test02: {
-					icon: 'icon-user',
-					id: 'Test02',
-					title: 'Test02',
-					source: 'users',
-					status: {
-						clearAt: null,
-						icon: '🎡',
-						message: 'Visiting London',
-						status: 'away',
-					},
-					subline: 'Visiting London',
-				},
-				'Test@User': {
-					icon: 'icon-user',
-					id: 'Test@User',
-					title: 'Test 03',
-					source: 'users',
-					status: {
-						clearAt: null,
-						icon: '🎡',
-						message: 'Having space in my name',
-						status: 'online',
-					},
-					subline: 'Visiting London',
-				},
-				'Test Offline': {
-					icon: 'icon-user',
-					id: 'Test Offline',
-					title: 'Test Offline',
-					source: 'users',
-					status: {
-						clearAt: null,
-						icon: null,
-						message: null,
-						status: 'offline',
-					},
-					subline: null,
-				},
-				'Test DND': {
-					icon: 'icon-user',
-					id: 'Test DND',
-					title: 'Test DND',
-					source: 'users',
-					status: {
-						clearAt: null,
-						icon: null,
-						message: 'Out sick',
-						status: 'dnd',
-					},
-					subline: 'Out sick',
-				},
-			}
+			userData,
+			// Test02: {
+			//   icon: 'icon-user',
+			//       id: 'Test02',
+			//       title: 'Test02',
+			//       source: 'users',
+			//       status: {
+			//     clearAt: null,
+			//         icon: '🎡',
+			//         message: 'Visiting London',
+			//         status: 'away',
+			//   },
+			//   subline: 'Visiting London',
+			// },
+			userMentions,
+			// Test02: {
+			//   component: 'NcUserBubble',
+			//   props: {
+			//     displayName: 'Test02',
+			//   },
+			// },
 		}
 	},
+	computed: {
+		text() {
+			// NcRichText need to accept mention references in curly brackets without '@' and ' ' symbols
+			return parseUserMentions(this.message)
+		},
+	},
 	methods: {
 		/**
 		* Do your own query to the autocompletion api.

diff --git a/src/components/NcRichContenteditable/docsHelpers.js b/src/components/NcRichContenteditable/docsHelpers.js
@@ -0,0 +1,113 @@
+export const userData = {
+	Test01: {
+		icon: 'icon-user',
+		id: 'Test01',
+		title: 'Test01',
+		source: 'users',
+		primary: true,
+	},
+	Test02: {
+		icon: 'icon-user',
+		id: 'Test02',
+		title: 'Test02',
+		source: 'users',
+		status: {
+			clearAt: null,
+			icon: '🎡',
+			message: 'Visiting London',
+			status: 'away',
+		},
+		subline: 'Visiting London',
+	},
+	'Test@User': {
+		icon: 'icon-user',
+		id: 'Test@User',
+		title: 'Test 03',
+		source: 'users',
+		status: {
+			clearAt: null,
+			icon: '🎡',
+			message: 'Having space in my name',
+			status: 'online',
+		},
+		subline: 'Visiting London',
+	},
+	'Test Offline': {
+		icon: 'icon-user',
+		id: 'Test Offline',
+		title: 'Test Offline',
+		source: 'users',
+		status: {
+			clearAt: null,
+			icon: null,
+			message: null,
+			status: 'offline',
+		},
+		subline: null,
+	},
+	'Test DND': {
+		icon: 'icon-user',
+		id: 'Test DND',
+		title: 'Test DND',
+		source: 'users',
+		status: {
+			clearAt: null,
+			icon: null,
+			message: 'Out sick',
+			status: 'dnd',
+		},
+		subline: 'Out sick',
+	},
+}
+
+/**
+ * @param {string} string NcRichContenteditable output
+ * @return {string} NcRichText input
+ */
+export function parseUserMentions(string) {
+	return string
+		.replace('@Test01', '{user-1}')
+		.replace('@Test02', '{user-2}')
+		.replace('@Test@User', '{user-3}')
+		.replace('@"Test Offline"', '{user-4}')
+		.replace('@"Test DND"', '{user-5}')
+}
+
+export const userMentions = {
+	'user-1': {
+		component: 'NcUserBubble',
+		props: {
+			displayName: 'Test01',
+			user: 'Test01',
+			primary: true,
+		},
+	},
+	'user-2': {
+		component: 'NcUserBubble',
+		props: {
+			displayName: 'Test02',
+			user: 'Test02',
+		},
+	},
+	'user-3': {
+		component: 'NcUserBubble',
+		props: {
+			displayName: 'Test 03',
+			user: 'Test@User',
+		},
+	},
+	'user-4': {
+		component: 'NcUserBubble',
+		props: {
+			displayName: 'Test Offline',
+			user: 'Test Offline',
+		},
+	},
+	'user-5': {
+		component: 'NcUserBubble',
+		props: {
+			displayName: 'Test DND',
+			user: 'Test DND',
+		},
+	},
+}