Emit notification on adding a mention

Signed-off-by: Julius Härtl <[email protected]>
nextcloud · Aug 25, 2022 · df46dcc · df46dcc
1 parent 0320ff1
commit df46dcc
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 5 deletions.
diff --git a/src/EditorFactory.js b/src/EditorFactory.js
@@ -54,7 +54,7 @@ const loadSyntaxHighlight = async (language) => {
 	}
 }
 
-const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditing }) => {
+const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditing, session }) => {
 	let richEditingExtensions = []
 	if (enableRichEditing) {
 		richEditingExtensions = [
@@ -116,7 +116,9 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi
 				HTMLAttributes: {
 					class: 'mention',
 				},
-				suggestion: MentionSuggestion,
+				suggestion: MentionSuggestion({
+					session,
+				}),
 			}),
 			Placeholder.configure({
 				emptyNodeClass: 'is-empty',

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -472,6 +472,7 @@ export default {
 			(this.isRichEditor ? Promise.resolve() : loadSyntaxHighlight(language))
 				.then(() => {
 					this.$editor = createEditor({
+						session: this.currentSession,
 						content,
 						onCreate: ({ editor }) => {
 							this.$syncService.state = editor.state

diff --git a/src/components/Mention/suggestion.js b/src/components/Mention/suggestion.js
@@ -6,9 +6,23 @@ import List from './List.vue'
 
 const USERS_LIST_ENDPOINT_URL = generateUrl('apps/text/api/v1/users')
 
-export default {
+const emitMention = ({ session, props }) => {
+	axios.put(generateUrl('apps/text/session/mention'), {
+		documentId: session.documentId,
+		sessionId: session.id,
+		sessionToken: session.token,
+		mention: props.id,
+	})
+}
+
+export default ({ session }) => ({
 	items: async ({ query }) => {
-		const params = { filter: query }
+		const params = {
+			documentId: session.documentId,
+			sessionId: session.id,
+			sessionToken: session.token,
+			filter: query,
+		}
 		const response = await axios.post(USERS_LIST_ENDPOINT_URL, params)
 		const users = JSON.parse(JSON.stringify(response.data))
 		const result = []
@@ -21,6 +35,39 @@ export default {
 		return result
 	},
 
+	command: ({ editor, range, props }) => {
+		emitMention({ session, props })
+
+		// Insert mention
+		// from https://github.com/ueberdosis/tiptap/blob/9a254bf9daf6d839bd02c968e14837098b903b38/packages/extension-mention/src/mention.ts
+
+		// increase range.to by one when the next node is of type "text"
+		// and starts with a space character
+		const nodeAfter = editor.view.state.selection.$to.nodeAfter
+		const overrideSpace = nodeAfter?.text?.startsWith(' ')
+
+		if (overrideSpace) {
+			range.to += 1
+		}
+
+		editor
+			.chain()
+			.focus()
+			.insertContentAt(range, [
+				{
+					type: 'mention',
+					attrs: props,
+				},
+				{
+					type: 'text',
+					text: ' ',
+				},
+			])
+			.run()
+
+		window.getSelection()?.collapseToEnd()
+	},
+
 	render: () => {
 		let component
 		let popup
@@ -82,4 +129,4 @@ export default {
 			},
 		}
 	},
-}
+})