enh(editor): store session in separate extension

The `Session` extension provides the `setSession` and `clearSession` commands.
Session data is made available via `editor.storage.session`.

This way session data can be provided after initializing the editor.

Signed-off-by: Max <[email protected]>

src/EditorFactory.js

@@ -37,7 +37,7 @@ const editorProps = {
 	scrollThreshold: 50,
 }
 
-const createRichEditor = ({ extensions = [], session, relativePath, isEmbedded = false } = {}) => {
+const createRichEditor = ({ extensions = [], relativePath, isEmbedded = false } = {}) => {
 	return new Editor({
 		editorProps,
 		extensions: [
@@ -47,9 +47,7 @@ const createRichEditor = ({ extensions = [], session, relativePath, isEmbedded =
 				component: this,
 				extensions: [
 					Mention.configure({
-						suggestion: MentionSuggestion({
-							session,
-						}),
+						suggestion: MentionSuggestion()
 					}),
 				],
 			}),

src/components/Editor.vue

@@ -135,6 +135,7 @@ import { fetchNode } from '../services/WebdavClient.ts'
 import SuggestionsBar from './SuggestionsBar.vue'
 import { useDelayedFlag } from './Editor/useDelayedFlag.ts'
 import { useEditorMethods } from '../composables/useEditorMethods.ts'
+import { Session } from '../extensions/Session.ts'
 
 export default {
 	name: 'Editor',
@@ -598,21 +599,23 @@ export default {
 						clientId: this.$ydoc.clientID,
 					},
 				}),
+				Session,
 			]
 			if (this.isRichEditor) {
 				this.editor = createRichEditor({
 					relativePath: this.relativePath,
-					session,
 					extensions,
 					isEmbedded: this.isEmbedded,
 				})
 				this.listenEditorEvents()
+				this.editor.commands.setSession(this.currentSession)
 			} else {
 				const language =
 					extensionHighlight[this.fileExtension] || this.fileExtension
 				loadSyntaxHighlight(language).then(() => {
 					this.editor = createPlainEditor({ language, extensions })
 					this.listenEditorEvents()
+					this.editor.commands.setSession(this.currentSession)
 				})
 			}
 		},

src/components/Suggestion/Mention/suggestions.js

@@ -12,42 +12,41 @@ const USERS_LIST_ENDPOINT_URL = generateUrl('apps/text/api/v1/users')
 
 const emitMention = ({ session, props }) => {
 	const documentId = session.documentId
+	if (!session.documentId) {
+		// TODO: emit the mention on reconnect
+		console.warn('Disconnected. Could not notify user about mention.', { user: props.id })
+		return
+	}
 	axios.put(generateUrl(`apps/text/session/${documentId}/mention`), {
-		documentId,
-		sessionId: session.id,
-		sessionToken: session.token,
+		...session,
 		mention: props.id,
 		scope: window.location,
 	})
 }
 
-export default ({ session, params }) => createSuggestions({
+export default ({ params } = {}) => createSuggestions({
 	listComponent: MentionList,
-	items: async ({ query }) => {
+	items: async ({ editor, query }) => {
+		const session = editor.storage.session
+		if (!session.documentId) {
+			// looks like we're not connected right now.
+			return []
+		}
 		const params = {
-			documentId: session.documentId,
-			sessionId: session.id,
-			sessionToken: session.token,
+			...session,
 			filter: query,
 		}
 		const response = await axios.post(USERS_LIST_ENDPOINT_URL, params)
 		const users = JSON.parse(JSON.stringify(response.data))
-		const result = []
-
-		Object.keys(users).map(key => result.push({
-			id: key,
-			label: users[key],
-		}))
-
-		return result
+		return Object.entries(users).map(([id, label]) => ({ id, label }))
 	},
 
 	command: ({ editor, range, props }) => {
 		if (params?.emitMention) {
 			params.emitMention({ props })
 		} else {
 			emitMention({
-				session,
+				session: editor.storage.session,
 				props,
 			})
 		}

src/extensions/Session.ts

@@ -0,0 +1,55 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { Extension } from '@tiptap/core'
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		session: {
+			setSession: (session: {
+				documentId: number
+				id: number
+				token: string
+			}) => ReturnType
+			clearSession: () => ReturnType
+		}
+	}
+}
+
+interface StoredSession {
+	documentId: number
+	sessionId: number
+	sessionToken: string
+}
+
+const emptySession = {
+	documentId: 0,
+	sessionId: 0,
+	sessionToken: '',
+}
+
+export const Session = Extension.create({
+	name: 'session',
+
+	addStorage(): StoredSession {
+		return { ...emptySession }
+	},
+
+	addCommands() {
+		return {
+			setSession: (session) => () => {
+				this.storage.documentId = session.documentId
+				this.storage.sessionId = session.id
+				this.storage.sessionToken = session.token
+				return true
+			},
+			clearSession:
+				() =>
+				({ commands }) => {
+					return commands.setSession({ documentId: 0, id: 0, token: '' })
+				},
+		}
+	},
+})

src/tests/extensions/Session.spec.ts

@@ -0,0 +1,48 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { expect, test as baseTest } from 'vitest'
+import createCustomEditor from '../testHelpers/createCustomEditor'
+import { Session } from '../../extensions/Session'
+import type { Editor } from '@tiptap/core'
+
+interface EditorFixture {
+	editor: Editor
+}
+
+const test = baseTest.extend<EditorFixture>({
+	editor: async ({ task: _ }, use) => {
+		const editor = createCustomEditor('', [Session])
+		await use(editor)
+		editor.destroy()
+	}
+})
+
+test('start with empty session', ({ editor }) => {
+	expect(editor.storage.session).toEqual({
+		"documentId": 0,
+		"sessionId": 0,
+		"sessionToken": "",
+	})
+})
+
+test('set a session', ({ editor }) => {
+	editor.commands.setSession({ documentId: 123, id: 456, token: 'myToken'})
+	expect(editor.storage.session).toEqual({
+		"documentId": 123,
+		"sessionId": 456,
+		"sessionToken": "myToken",
+	})
+})
+
+test('clear the session', ({ editor }) => {
+	editor.commands.setSession({ documentId: 123, id: 456, token: 'myToken'})
+	editor.commands.clearSession()
+	expect(editor.storage.session).toEqual({
+		"documentId": 0,
+		"sessionId": 0,
+		"sessionToken": "",
+	})
+})