Merge pull request #8422 from nextcloud/backport/8371/stable33

[stable33] fix(editorApi): use onMentionSearch callback if provided

Author: mejo-

src/EditorFactory.js

@@ -42,11 +42,17 @@ const createRichEditor = ({
 	connection,
 	relativePath,
 	isEmbedded = false,
+	mentionSearch = undefined,
 } = {}) => {
 	return new Editor({
 		editorProps,
 		extensions: [
-			RichText.configure({ connection, relativePath, isEmbedded }),
+			RichText.configure({
+				connection,
+				relativePath,
+				isEmbedded,
+				mentionSearch,
+			}),
 			FocusTrap,
 			...extensions,
 		],

src/components/Editor.vue

@@ -85,13 +85,18 @@ import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { File } from '@nextcloud/files'
 import { Collaboration } from '@tiptap/extension-collaboration'
 import { useElementSize } from '@vueuse/core'
-import { defineComponent, ref, shallowRef, watch } from 'vue'
+import { defineComponent, inject, ref, shallowRef, watch } from 'vue'
 import { Doc } from 'yjs'
 import Autofocus from '../extensions/Autofocus.js'
 
 import { provideEditor } from '../composables/useEditor.ts'
 import { provideEditorFlags } from '../composables/useEditorFlags.ts'
-import { ATTACHMENT_RESOLVER, FILE, IS_MOBILE } from './Editor.provider.ts'
+import {
+	ATTACHMENT_RESOLVER,
+	FILE,
+	HOOK_MENTION_SEARCH,
+	IS_MOBILE,
+} from './Editor.provider.ts'
 import ReadonlyBar from './Menu/ReadonlyBar.vue'
 
 import { generateRemoteUrl } from '@nextcloud/router'
@@ -239,12 +244,14 @@ export default defineComponent({
 			Collaboration.configure({ document: ydoc }),
 			CollaborationCaret.configure({ provider: { awareness } }),
 		]
+		const mentionSearch = inject(HOOK_MENTION_SEARCH)
 		const editor = isRichEditor
 			? createRichEditor({
 					connection,
 					relativePath: props.relativePath,
 					extensions,
 					isEmbedded: props.isEmbedded,
+					mentionSearch,
 				})
 			: createPlainEditor({ language, extensions })
 		provideEditor(editor)

src/components/Suggestion/Mention/suggestions.js

@@ -11,8 +11,26 @@ export default ({ connection, options }) =>
 	createSuggestions({
 		listComponent: MentionList,
 		items: async ({ query }) => {
-			const users = await getUsers(query, { connection })
-			return Object.entries(users).map(([id, label]) => ({ id, label }))
+			let customUsers = {}
+			if (typeof options?.mentionSearch === 'function') {
+				customUsers = await options.mentionSearch(query)
+			}
+
+			const entries = Object.entries(customUsers).map(([id, label]) => ({
+				id,
+				label,
+			}))
+			if (entries.length >= 6) {
+				return entries
+			}
+
+			const serverUsers = await getUsers(query, { connection })
+			const serverEntries = Object.entries(serverUsers)
+				.filter(([id]) => !(id in customUsers))
+				.map(([id, label]) => ({ id, label }))
+				.slice(0, 6 - entries.length)
+
+			return [...entries, ...serverEntries]
 		},
 
 		command: ({ editor, range, props }) => {

src/editor.js

@@ -259,7 +259,7 @@ window.OCA.Text.createEditor = async function ({
 	onOutlineToggle = (visible) => {}, // deprecated, use `onTocToggle`
 	onTocPin = (fileId, keep) => {},
 	onFileInsert = undefined,
-	onMentionSearch = undefined,
+	onMentionSearch = undefined, // (query) => Promise<{ [id]: label }>
 	onMentionInsert = undefined,
 	openLinkHandler = undefined,
 	onSearch = undefined,
@@ -283,8 +283,8 @@ window.OCA.Text.createEditor = async function ({
 			return {
 				[ACTION_ATTACHMENT_PROMPT]: onFileInsert,
 				[EDITOR_UPLOAD]: !!sessionEditor,
-				[HOOK_MENTION_SEARCH]: sessionEditor ? true : onMentionSearch,
-				[HOOK_MENTION_INSERT]: sessionEditor ? true : onMentionInsert,
+				[HOOK_MENTION_SEARCH]: onMentionSearch,
+				[HOOK_MENTION_INSERT]: onMentionInsert,
 				[OPEN_LINK_HANDLER]: {
 					openLink: openLinkHandler || openLink,
 				},

src/extensions/RichText.js

@@ -60,6 +60,7 @@ export default Extension.create({
 			extensions: [],
 			relativePath: null,
 			isEmbedded: false,
+			mentionSearch: undefined,
 		}
 	},
 
@@ -107,6 +108,9 @@ export default Extension.create({
 			Mention.configure({
 				suggestion: MentionSuggestion({
 					connection: this.options.connection,
+					options: {
+						mentionSearch: this.options.mentionSearch,
+					},
 				}),
 			}),
 			Search,