Add support for @user mentions to RichTextReader.vue

index.html

@@ -4,6 +4,15 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <link rel="stylesheet" href="/dist/style.css" />
+    <style>
+      @import url('https://nextcloud.github.io/server/apps/theming/css/default.css');
+      @import url('https://nextcloud.github.io/server/core/css/server.css');
+      body {
+        position: absolute;
+        height: unset;
+        background-color: var(--color-main-background);
+      }
+    </style>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Test the package</title>
   </head>
@@ -15,7 +24,8 @@
 			return string
 		}
 		OC = {
-			webroot: '/OC_WEBROOT',
+			webroot: '/dist/OC_WEBROOT',
+			config: {},
 			isUserAdmin() {
 				return true
 			}

src/EditorFactory.js

@@ -63,7 +63,17 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi
 		richEditingExtensions = [
 			Markdown,
 			RichText.configure({
-				extensions: [EditableTable],
+				extensions: [
+					EditableTable,
+					Mention.configure({
+						HTMLAttributes: {
+							class: 'mention',
+						},
+						suggestion: MentionSuggestion({
+							session,
+						}),
+					}),
+				],
 			}),
 			Emoji.configure({
 				suggestion: {
@@ -116,14 +126,6 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi
 					},
 				},
 			}),
-			Mention.configure({
-				HTMLAttributes: {
-					class: 'mention',
-				},
-				suggestion: MentionSuggestion({
-					session,
-				}),
-			}),
 			Placeholder.configure({
 				emptyNodeClass: 'is-empty',
 				placeholder: t('text', 'Add notes, lists or links …'),

src/extensions/Mention.vue

@@ -38,7 +38,7 @@ export default {
 	},
 	computed: {
 		isCurrentUser() {
-			return this.node.attrs.id === getCurrentUser().uid
+			return this.node.attrs.id === getCurrentUser()?.uid
 		},
 	},
 }

src/extensions/RichText.js

@@ -43,6 +43,7 @@ import BulletList from './../nodes/BulletList.js'
 import TaskList from './../nodes/TaskList.js'
 import TaskItem from './../nodes/TaskItem.js'
 import Callout from './../nodes/Callouts.js'
+import Mention from './../extensions/Mention.js'
 /* eslint-enable import/no-named-as-default */
 
 import { Strong, Italic, Strike, Link, Underline } from './../marks/index.js'
@@ -91,6 +92,11 @@ export default Extension.create({
 			Dropcursor,
 			KeepSyntax,
 			FrontMatter,
+			Mention.configure({
+				HTMLAttributes: {
+					class: 'mention',
+				},
+			}),
 		]
 		if (this.options.link !== false) {
 			defaultExtensions.push(Link.configure({

src/tests/fixtures/basic.md

@@ -9,3 +9,5 @@
 |table| heading| row|
 | --- | --- | --- |
 |first| body| row|
+
+@[user](mention://user/user)