Show HTML mentions instead of plain text when composing a message

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

2 files changed, 28 insertions, 2 deletions

diff --git a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
index 10d05d935..fb26019ae 100644
--- a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
+++ b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
@@ -47,7 +47,13 @@
 		<template v-slot:embeddedItem="scope">
 			<!-- The root element itself is ignored, only its contents are taken
 			     into account. -->
-			<span>@{{ scope.current.id }}</span>
+			<span>
+				<!-- vue-at seems to try to create an embedded item at some
+				     strange times in which no item is selected and thus there
+				     is no data, so do not use the Mention component in those
+				     cases. -->
+				<Mention v-if="scope.current.id" :data="getDataForMentionComponent(scope.current)" :data-mention-id="scope.current.id" />
+			</span>
 		</template>
 		<div ref="contentEditable"
 			:contenteditable="activeInput"
@@ -64,12 +70,14 @@ import VueAtReparenter from '../../../mixins/vueAtReparenter'
 import { EventBus } from '../../../services/EventBus'
 import { searchPossibleMentions } from '../../../services/mentionsService'
 import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import Mention from '../../MessagesList/MessagesGroup/Message/MessagePart/Mention'
 
 export default {
 	name: 'AdvancedInput',
 	components: {
 		At,
 		Avatar,
+		Mention,
 	},
 	mixins: [
 		VueAtReparenter,
@@ -227,6 +235,21 @@ export default {
 			return customName.charAt(0)
 		},
 
+		getDataForMentionComponent(candidate) {
+			let type = 'user'
+			if (this.isMentionToAll(candidate.id)) {
+				type = 'call'
+			} else if (this.isMentionToGuest(candidate.id)) {
+				type = 'guest'
+			}
+
+			return {
+				id: candidate.id,
+				name: candidate.label,
+				type: type,
+			}
+		},
+
 		/**
 		 * Adds a special style sheet to customize atwho elements.
 		 *
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 0c27706e2..a80ef40ec 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -100,7 +100,10 @@ export default {
 		contentEditableToParsed(contentEditable) {
 			const mentions = contentEditable.querySelectorAll('span[data-at-embedded]')
 			mentions.forEach(mention => {
-				mention.replaceWith(mention.innerText.trim())
+				// FIXME Adding a space after the mention should be improved to
+				// do it or not based on the next element instead of always
+				// adding it.
+				mention.replaceWith('@' + mention.firstElementChild.attributes['data-mention-id'].value + ' ')
 			})
 
 			this.parsedText = this.rawToParsed(contentEditable.innerHTML)