fix: solve markdown-it-mentions issues

Signed-off-by: Luka Trovic <luka@nextcloud.com>

5 files changed, 26 insertions, 16 deletions

diff --git a/src/components/Mention/AutoCompleteResult.vue b/src/components/Mention/AutoCompleteResult.vue
index c53bb6bfd..a8d11fbd9 100644
--- a/src/components/Mention/AutoCompleteResult.vue
+++ b/src/components/Mention/AutoCompleteResult.vue
@@ -78,7 +78,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$clickable-area: 44px;
+$clickable-area: 30px;
 $autocomplete-padding: 10px;
 
 .autocomplete-result {
diff --git a/src/components/Mention/List.vue b/src/components/Mention/List.vue
index cf2287108..1774d2648 100644
--- a/src/components/Mention/List.vue
+++ b/src/components/Mention/List.vue
@@ -1,14 +1,15 @@
 <template>
 	<div class="items">
 		<template v-if="items.length">
-			<div v-for="(item, index) in items"
+			<div v-for="({ id, label }, index) in items"
 				:key="index"
-				:class="index === selectedIndex ? 'highlight' : null">
-				<AutoCompleteResult :id="item"
-					:label="item"
+				:class="id === selectedIndex ? 'highlight' : null">
+				<AutoCompleteResult 
+					:id="id"
+					:label="label"
 					icon="icon-user"
 					source="users"
-					@mouseover.native="selectedIndex = index"
+					@mouseover.native="selectedIndex = id"
 					@click.native="selectItem(index)" />
 			</div>
 		</template>
@@ -84,7 +85,7 @@ export default {
 			const item = this.items[index]
 
 			if (item) {
-				this.command({ id: item })
+				this.command(item)
 			}
 		},
 	},
diff --git a/src/components/Mention/suggestion.js b/src/components/Mention/suggestion.js
index ef74c8d98..385c18a30 100644
--- a/src/components/Mention/suggestion.js
+++ b/src/components/Mention/suggestion.js
@@ -8,12 +8,17 @@ const USERS_LIST_ENDPOINT_URL = generateUrl('apps/text/api/v1/users');
 
 export default {
 	items: async ({ query }) => {
-    
-		const params = { filter: query };
-		const response = await axios.post(USERS_LIST_ENDPOINT_URL, params);
-		const users = JSON.parse(JSON.stringify(response.data));
+		const params = { filter: query }
+		const response = await axios.post(USERS_LIST_ENDPOINT_URL, params)
+		const users = JSON.parse(JSON.stringify(response.data))
+		let result = []
 
-		return Object.keys(users).map(key => users[key]);
+		Object.keys(users).map(key => result.push({
+			id: key,
+			label: users[key],
+		}))
+
+		return result
 	},
 
 	render: () => {
diff --git a/src/extensions/Mention.js b/src/extensions/Mention.js
index 36353c666..38024e141 100644
--- a/src/extensions/Mention.js
+++ b/src/extensions/Mention.js
@@ -13,8 +13,10 @@ export default TipTapMention.extend({
 	parseHTML() {
 		return [
 			{
-				tag: `span[data-type="${this.name}"]`,
-				getAttrs: element => ((element.getAttribute('data-type') === this.name) && null),
+				tag: `span[data-type="user"]`,
+				getAttrs: element => ((element.getAttribute('data-type') === "user") 
+					&& (element.getAttribute('class') === "mention") 
+					&& null),
 				priority: 100,
 			},
 		]
@@ -61,8 +63,8 @@ export default TipTapMention.extend({
 	},
 
 	toMarkdown(state, node) {
-		state.write('@')
-		state.write(node.attrs.id)
+		state.write(' ')
+		state.write(`@[${node.attrs.id}](mention://user/${node.attrs.id})`)
 		state.write(' ')
 	},
 });
\ No newline at end of file
diff --git a/src/markdownit/index.js b/src/markdownit/index.js
index 81fe0fb11..71c36cc92 100644
--- a/src/markdownit/index.js
+++ b/src/markdownit/index.js
@@ -1,5 +1,6 @@
 import MarkdownIt from 'markdown-it'
 import taskLists from '@hedgedoc/markdown-it-task-lists'
+import markdownitMentions from '@quartzy/markdown-it-mentions'
 import underline from './underline.js'
 import splitMixedLists from './splitMixedLists.js'
 import callouts from './callouts.js'
@@ -13,5 +14,6 @@ const markdownit = MarkdownIt('commonmark', { html: false, breaks: false })
 	.use(underline)
 	.use(callouts)
 	.use(keepSyntax)
+	.use(markdownitMentions)
 
 export default markdownit