From f39df6127803962ffc4a6252d0e3cc615cb6f7ec Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Sun, 29 Jun 2025 14:45:39 +0200
Subject: [PATCH 1/5] chore(refactor): move sync service into setup function

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Editor.vue | 118 +++++++++++++++++++-------------------
 1 file changed, 58 insertions(+), 60 deletions(-)

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 1f846e5e1cb..d0183a84d63 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -81,7 +81,7 @@
 </template>
 
 <script>
-import Vue, { ref, set, watch } from 'vue'
+import Vue, { ref, set, shallowRef, watch } from 'vue'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
@@ -163,7 +163,7 @@ export default {
 		// actual values without being reactive
 		Object.defineProperties(val, {
 			[SYNC_SERVICE]: {
-				get: () => this.$syncService,
+				get: () => this.syncService,
 			},
 			[FILE]: {
 				get: () => this.fileData,
@@ -248,19 +248,45 @@ export default {
 			isRichEditor,
 			props,
 		)
+		const baseVersionEtag = shallowRef(null)
+		const syncService = shallowRef(null)
+		const connectSyncService = () => {
+			const guestName = localStorage.getItem('nick') ?? ''
+			const api = new SessionApi({
+				guestName,
+				shareToken: props.shareToken,
+				filePath: props.relativePath,
+			})
+			syncService.value = new SyncService({
+				api,
+				baseVersionEtag: baseVersionEtag.value,
+				serialize: isRichEditor.value
+					? (content) =>
+							createMarkdownSerializer(editor.value?.schema).serialize(
+								content ?? editor.value?.state.doc,
+							)
+					: (content) =>
+							serializePlainText(content ?? editor.value?.state.doc),
+				getDocumentState: () => getDocumentState(ydoc),
+			})
+		}
+
 		return {
-			wrappedConnection,
+			baseVersionEtag,
+			connectSyncService,
+			editor,
 			el,
-			width,
 			hasConnectionIssue,
-			requireReconnect,
-			editor,
-			setEditable,
 			isPublic,
 			isRichEditor,
 			isRichWorkspace,
 			language,
 			lowlightLoaded,
+			requireReconnect,
+			setEditable,
+			syncService,
+			width,
+			wrappedConnection,
 			ydoc,
 		}
 	},
@@ -389,7 +415,6 @@ export default {
 		//   Y.logUpdate(update)
 		// });
 		this.$providers = []
-		this.$syncService = null
 		this.$attachmentResolver = null
 		if (this.active && this.hasDocumentParameters) {
 			this.initSession()
@@ -420,45 +445,18 @@ export default {
 		unsubscribe('text:translate-modal:show', this.showTranslateModal)
 		if (this.dirty) {
 			const timeout = new Promise((resolve) => setTimeout(resolve, 2000))
-			await Promise.any([timeout, this.$syncService.save()])
+			await Promise.any([timeout, this.syncService.save()])
 		}
 		await this.close()
 		removeFromDebugging(this)
 	},
 	methods: {
 		initSession() {
-			if (!this.hasDocumentParameters) {
-				this.emit('error', 'No valid file provided')
-				return
-			}
-			const guestName = localStorage.getItem('nick')
-				? localStorage.getItem('nick')
-				: ''
-
-			const api = new SessionApi({
-				guestName,
-				shareToken: this.shareToken,
-				filePath: this.relativePath,
-			})
-
-			this.$syncService = new SyncService({
-				api,
-				baseVersionEtag: this.$baseVersionEtag,
-				serialize: this.isRichEditor
-					? (content) =>
-							createMarkdownSerializer(this.editor?.schema).serialize(
-								content ?? this.editor?.state.doc,
-							)
-					: (content) =>
-							serializePlainText(content ?? this.editor?.state.doc),
-				getDocumentState: () => getDocumentState(this.ydoc),
-			})
-
+			this.connectSyncService()
 			this.listenSyncServiceEvents()
-
 			const syncServiceProvider = createSyncServiceProvider({
 				ydoc: this.ydoc,
-				syncService: this.$syncService,
+				syncService: this.syncService,
 				fileId: this.fileId,
 				initialSession: this.initialSession,
 				disableBC: true,
@@ -481,7 +479,7 @@ export default {
 		},
 
 		listenSyncServiceEvents() {
-			this.$syncService
+			this.syncService
 				.on('opened', this.onOpened)
 				.on('change', this.onChange)
 				.on('loaded', this.onLoaded)
@@ -493,7 +491,7 @@ export default {
 		},
 
 		unlistenSyncServiceEvents() {
-			this.$syncService
+			this.syncService
 				.off('opened', this.onOpened)
 				.off('change', this.onChange)
 				.off('loaded', this.onLoaded)
@@ -567,7 +565,7 @@ export default {
 			this.editMode = !document.readOnly && !this.openReadOnlyEnabled
 
 			this.setEditable(this.editMode)
-			this.lock = this.$syncService.lock
+			this.lock = this.syncService.lock
 			localStorage.setItem('nick', this.currentSession.guestName)
 			this.$attachmentResolver = new AttachmentResolver({
 				session: this.currentSession,
@@ -594,7 +592,7 @@ export default {
 		onLoaded({ document, documentSource, documentState }) {
 			// Fetch the document state after syntax highlights are loaded
 			this.lowlightLoaded.then(() => {
-				this.$syncService.startSync()
+				this.syncService.startSync()
 				if (!documentState) {
 					setInitialYjsState(this.ydoc, documentSource, {
 						isRichEditor: this.isRichEditor,
@@ -602,7 +600,7 @@ export default {
 				}
 			})
 
-			this.$baseVersionEtag = document.baseVersionEtag
+			this.baseVersionEtag = document.baseVersionEtag
 			this.hasConnectionIssue = false
 
 			const session = this.currentSession
@@ -628,7 +626,7 @@ export default {
 		},
 
 		onCreate({ editor }) {
-			const proseMirrorMarkdown = this.$syncService.serialize(editor.state.doc)
+			const proseMirrorMarkdown = this.syncService.serialize(editor.state.doc)
 			this.emit('create:content', {
 				markdown: proseMirrorMarkdown,
 			})
@@ -636,7 +634,7 @@ export default {
 
 		onUpdate({ editor }) {
 			// this.debugContent(editor)
-			const proseMirrorMarkdown = this.$syncService.serialize(editor.state.doc)
+			const proseMirrorMarkdown = this.syncService.serialize(editor.state.doc)
 			this.emit('update:content', {
 				markdown: proseMirrorMarkdown,
 			})
@@ -644,12 +642,12 @@ export default {
 
 		onSync({ steps, document }) {
 			this.hasConnectionIssue =
-				this.$syncService.backend.fetcher === 0
+				this.syncService.backend.fetcher === 0
 				|| !this.$providers[0].wsconnected
-				|| this.$syncService.pushError > 0
-			if (this.$syncService.pushError > 0) {
+				|| this.syncService.pushError > 0
+			if (this.syncService.pushError > 0) {
 				// successfully received steps - so let's try and also push
-				this.$syncService.sendStepsNow()
+				this.syncService.sendStepsNow()
 			}
 			this.$nextTick(() => {
 				this.emit('sync-service:sync')
@@ -712,14 +710,14 @@ export default {
 				if (this.editor.can().undo() || this.editor.can().redo()) {
 					this.dirty = state.dirty
 					if (this.dirty) {
-						this.$syncService.autosave()
+						this.syncService.autosave()
 					}
 				}
 			}
 		},
 
 		onIdle() {
-			this.$syncService.close()
+			this.syncService.close()
 			this.idle = true
 			this.readOnly = true
 			this.editMode = false
@@ -749,7 +747,7 @@ export default {
 		},
 
 		onKeyboardSave() {
-			this.$syncService.save()
+			this.syncService.save()
 		},
 
 		onAddImageNode() {
@@ -761,21 +759,21 @@ export default {
 		},
 
 		async save() {
-			await this.$syncService.save()
+			await this.syncService.save()
 		},
 
 		async disconnect() {
-			await this.$syncService.close()
+			await this.syncService.close()
 			this.unlistenSyncServiceEvents()
 			this.$providers.forEach((p) => p?.destroy())
 			this.$providers = []
-			this.$syncService = null
+			this.syncService = null
 			// disallow editing while still showing the content
 			this.readOnly = true
 		},
 
 		async close() {
-			await this.$syncService
+			await this.syncService
 				.sendRemainingSteps()
 				.catch((err) =>
 					logger.warn('Failed to send remaining steps', { err }),
@@ -829,7 +827,7 @@ export default {
 		 * @param {object} editor The Tiptap editor
 		 */
 		debugContent(editor) {
-			const proseMirrorMarkdown = this.$syncService.serialize(editor.state.doc)
+			const proseMirrorMarkdown = this.syncService.serialize(editor.state.doc)
 			const markdownItHtml = markdownit.render(proseMirrorMarkdown)
 
 			logger.debug(
@@ -852,7 +850,7 @@ export default {
 				clientId: this.ydoc.clientID,
 				pendingStructs: this.ydoc.store.pendingStructs,
 				clientVectors: [],
-				documentState: this.$syncService?.getDocumentState(),
+				documentState: this.syncService?.getDocumentState(),
 			}
 			for (const client of this.ydoc.store.clients.values()) {
 				yjsData.clientVectors.push(client.at(-1).id)
@@ -867,7 +865,7 @@ export default {
 
 		readOnlyToggled() {
 			if (this.editMode) {
-				this.$syncService.save()
+				this.syncService.save()
 			}
 			this.editMode = !this.editMode
 			this.setEditable(this.editMode)
@@ -916,7 +914,7 @@ export default {
 		},
 
 		saveBeforeUnload() {
-			this.$syncService?.saveViaSendBeacon()
+			this.syncService?.saveViaSendBeacon()
 		},
 	},
 }

From 0e4450ca62fc0f46f006544f49cad11aada93ef8 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Sun, 29 Jun 2025 15:36:26 +0200
Subject: [PATCH 2/5] chore(cleanup): remove unnecessary code in close()

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Editor.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index d0183a84d63..3eb86a99977 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -767,7 +767,6 @@ export default {
 			this.unlistenSyncServiceEvents()
 			this.$providers.forEach((p) => p?.destroy())
 			this.$providers = []
-			this.syncService = null
 			// disallow editing while still showing the content
 			this.readOnly = true
 		},
@@ -785,12 +784,10 @@ export default {
 				try {
 					this.unlistenEditorEvents()
 					this.editor.destroy()
-					this.editor = undefined
 				} catch (error) {
 					logger.warn('Failed to destroy editor', { error })
 				}
 			}
-			return true
 		},
 
 		/**

From 12547cc05a3d8ce4900309db066ac7eddabcc35e Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Sun, 29 Jun 2025 15:50:47 +0200
Subject: [PATCH 3/5] chore(refactor): replace $providers with syncProvider

Move its definition into the setup function.

One problem that becomes apparent here - but that we probably already have:
On a reconnect the provider will change.
But it remains the same in the collaboration cursor extension
effectively disconnecting the two.

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Editor.vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 3eb86a99977..9f01f4fb2a2 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -270,6 +270,7 @@ export default {
 				getDocumentState: () => getDocumentState(ydoc),
 			})
 		}
+		const syncProvider = shallowRef(null)
 
 		return {
 			baseVersionEtag,
@@ -284,6 +285,7 @@ export default {
 			lowlightLoaded,
 			requireReconnect,
 			setEditable,
+			syncProvider,
 			syncService,
 			width,
 			wrappedConnection,
@@ -414,14 +416,13 @@ export default {
 		//   console.debug('ydoc update', update, origin, doc, tr)
 		//   Y.logUpdate(update)
 		// });
-		this.$providers = []
 		this.$attachmentResolver = null
 		if (this.active && this.hasDocumentParameters) {
 			this.initSession()
 			const extensions = [
 				Autofocus.configure({ fileId: this.fileId }),
 				Collaboration.configure({ document: this.ydoc }),
-				CollaborationCursor.configure({ provider: this.$providers[0] }),
+				CollaborationCursor.configure({ provider: this.syncProvider }),
 			]
 			this.editor = this.isRichEditor
 				? createRichEditor({
@@ -454,14 +455,13 @@ export default {
 		initSession() {
 			this.connectSyncService()
 			this.listenSyncServiceEvents()
-			const syncServiceProvider = createSyncServiceProvider({
+			this.syncProvider = createSyncServiceProvider({
 				ydoc: this.ydoc,
 				syncService: this.syncService,
 				fileId: this.fileId,
 				initialSession: this.initialSession,
 				disableBC: true,
 			})
-			this.$providers.push(syncServiceProvider)
 		},
 
 		listenEditorEvents() {
@@ -643,7 +643,7 @@ export default {
 		onSync({ steps, document }) {
 			this.hasConnectionIssue =
 				this.syncService.backend.fetcher === 0
-				|| !this.$providers[0].wsconnected
+				|| !this.syncProvider?.wsconnected
 				|| this.syncService.pushError > 0
 			if (this.syncService.pushError > 0) {
 				// successfully received steps - so let's try and also push
@@ -765,8 +765,7 @@ export default {
 		async disconnect() {
 			await this.syncService.close()
 			this.unlistenSyncServiceEvents()
-			this.$providers.forEach((p) => p?.destroy())
-			this.$providers = []
+			this.syncProvider?.destroy()
 			// disallow editing while still showing the content
 			this.readOnly = true
 		},

From 0dd33bdf94bce04ded9b9d3bc844fe3f7bc55811 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Sun, 29 Jun 2025 16:04:53 +0200
Subject: [PATCH 4/5] fix(awareness): handle awareness independently from
 provider

Keep the same awareness state - even when a new provider instance is created
 - for example on reconnect.

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Editor.vue           | 8 +++++++-
 src/services/SyncServiceProvider.js | 4 +++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 9f01f4fb2a2..4ec21611577 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -135,6 +135,7 @@ import { useDelayedFlag } from './Editor/useDelayedFlag.ts'
 import { useEditorMethods } from '../composables/useEditorMethods.ts'
 import { useSyntaxHighlighting } from '../composables/useSyntaxHighlighting.ts'
 import { provideConnection } from '../composables/useConnection.ts'
+import { Awareness } from 'y-protocols/awareness.js'
 
 export default {
 	name: 'Editor',
@@ -237,6 +238,7 @@ export default {
 			el.value.style.setProperty('--widget-full-width', `${maxWidth}px`)
 		})
 		const ydoc = new Doc()
+		const awareness = new Awareness(ydoc)
 		// Wrap the connection in an object so we can hand it to the Mention extension as a ref.
 		const wrappedConnection = provideConnection()
 		const hasConnectionIssue = ref(false)
@@ -273,6 +275,7 @@ export default {
 		const syncProvider = shallowRef(null)
 
 		return {
+			awareness,
 			baseVersionEtag,
 			connectSyncService,
 			editor,
@@ -422,7 +425,9 @@ export default {
 			const extensions = [
 				Autofocus.configure({ fileId: this.fileId }),
 				Collaboration.configure({ document: this.ydoc }),
-				CollaborationCursor.configure({ provider: this.syncProvider }),
+				CollaborationCursor.configure({
+					provider: { awareness: this.awareness },
+				}),
 			]
 			this.editor = this.isRichEditor
 				? createRichEditor({
@@ -461,6 +466,7 @@ export default {
 				fileId: this.fileId,
 				initialSession: this.initialSession,
 				disableBC: true,
+				awareness: this.awareness,
 			})
 		},
 
diff --git a/src/services/SyncServiceProvider.js b/src/services/SyncServiceProvider.js
index 372fad22f81..6436375b5ea 100644
--- a/src/services/SyncServiceProvider.js
+++ b/src/services/SyncServiceProvider.js
@@ -16,6 +16,7 @@ import { logger } from '../helpers/logger.js'
  * @param {number} options.queue - queue for outgoing steps
  * @param {object} options.initialSession - initialSession to start from
  * @param {boolean} options.disableBc - disable broadcast channel synchronization (default: disabled in debug mode, enabled otherwise)
+ * @param {object} options.awareness - awareness instance for the provider
  */
 export default function createSyncServiceProvider({
 	ydoc,
@@ -23,6 +24,7 @@ export default function createSyncServiceProvider({
 	fileId,
 	initialSession,
 	queue,
+	awareness,
 	disableBc,
 }) {
 	if (!fileId) {
@@ -40,7 +42,7 @@ export default function createSyncServiceProvider({
 		'ws://localhost:1234',
 		'file:' + fileId,
 		ydoc,
-		{ WebSocketPolyfill, disableBc },
+		{ WebSocketPolyfill, awareness, disableBc },
 	)
 	websocketProvider.on('status', (event) => logger.debug('status', event))
 	return websocketProvider

From 4a49f73d80b174bfd9cf1afafd17133167086817 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Sun, 29 Jun 2025 20:33:04 +0200
Subject: [PATCH 5/5] chore(refactor): move editor creation into setup function

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Editor.vue | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 4ec21611577..9c05e9ebc93 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -274,6 +274,20 @@ export default {
 		}
 		const syncProvider = shallowRef(null)
 
+		const extensions = [
+			Autofocus.configure({ fileId: props.fileId }),
+			Collaboration.configure({ document: ydoc }),
+			CollaborationCursor.configure({ provider: { awareness } }),
+		]
+		editor.value = isRichEditor
+			? createRichEditor({
+					...wrappedConnection,
+					relativePath: props.relativePath,
+					extensions,
+					isEmbedded: props.isEmbedded,
+				})
+			: createPlainEditor({ language, extensions })
+
 		return {
 			awareness,
 			baseVersionEtag,
@@ -422,21 +436,6 @@ export default {
 		this.$attachmentResolver = null
 		if (this.active && this.hasDocumentParameters) {
 			this.initSession()
-			const extensions = [
-				Autofocus.configure({ fileId: this.fileId }),
-				Collaboration.configure({ document: this.ydoc }),
-				CollaborationCursor.configure({
-					provider: { awareness: this.awareness },
-				}),
-			]
-			this.editor = this.isRichEditor
-				? createRichEditor({
-						...this.wrappedConnection,
-						relativePath: this.relativePath,
-						extensions,
-						isEmbedded: this.isEmbedded,
-					})
-				: createPlainEditor({ language: this.language, extensions })
 			this.listenEditorEvents()
 		}
 	},