Fix parsing of HTML for the mention

Signed-off-by: Julius Härtl <[email protected]>

src/extensions/Mention.js

@@ -3,13 +3,17 @@ import Mention from './Mention.vue'
 import { VueNodeViewRenderer } from '@tiptap/vue-2'
 
 export default TipTapMention.extend({
+
 	parseHTML() {
 		return [
 			{
 				tag: 'span[data-type="user"]',
-				getAttrs: element => ((element.getAttribute('data-type') === 'user')
-					&& (element.getAttribute('class') === 'mention')
-					&& null),
+				getAttrs: element => {
+					return {
+						id: element.getAttribute('data-id'),
+						label: element.innerText ?? element.getAttribute('data-id'),
+					}
+				},
 				priority: 100,
 			},
 		]
@@ -21,7 +25,7 @@ export default TipTapMention.extend({
 
 	toMarkdown(state, node) {
 		state.write(' ')
-		state.write(`@[${node.attrs.id}](mention://user/${node.attrs.label})`)
+		state.write(`@[${node.attrs.label}](mention://user/${node.attrs.id})`)
 		state.write(' ')
 	},
 })

src/extensions/Mention.vue

@@ -1,19 +1,19 @@
 <template>
 	<NodeViewWrapper as="span" class="mention" contenteditable="false">
-		<UserBubble :user="node.attrs.id" :display-name="username" class="mention-user-bubble">
+		<NcUserBubble :user="node.attrs.id" :display-name="username" class="mention-user-bubble">
 			@{{ username }}
-		</UserBubble>
+		</NcUserBubble>
 	</NodeViewWrapper>
 </template>
 
 <script>
-import UserBubble from '@nextcloud/vue/dist/Components/UserBubble'
+import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble'
 import { NodeViewWrapper } from '@tiptap/vue-2'
 
 export default {
 	name: 'Mention',
 	components: {
-		UserBubble,
+		NcUserBubble,
 		NodeViewWrapper,
 	},
 	props: {
@@ -39,11 +39,4 @@ export default {
 .text-editor__wrapper div.ProseMirror .mention[contenteditable=false] :deep(*) {
     -webkit-user-modify: read-only !important;
 }
-
-.mention-user-bubble /deep/ .user-bubble__content .user-bubble__title {
-	position: relative !important;
-    top: -20px !important;
-    left: -60px !important;
-	height: 40px;
-}
 </style>