diff --git a/cypress/e2e/api/SessionApi.spec.js b/cypress/e2e/api/SessionApi.spec.js
index 942370f2710..98eb5a135a1 100644
--- a/cypress/e2e/api/SessionApi.spec.js
+++ b/cypress/e2e/api/SessionApi.spec.js
@@ -42,7 +42,7 @@ describe('The session Api', function() {
 				cy.wrap(connection)
 					.its('document.id')
 					.should('equal', fileId)
-				connection.close()
+				cy.destroySession(connection)
 			})
 		})
 
@@ -51,7 +51,7 @@ describe('The session Api', function() {
 				cy.wrap(connection)
 					.its('state.documentSource')
 					.should('eql', '## Hello world\n')
-				connection.close()
+				cy.destroySession(connection)
 			})
 		})
 
@@ -81,7 +81,7 @@ describe('The session Api', function() {
 		})
 
 		afterEach(function() {
-			connection.close()
+			cy.destroySession(connection)
 		})
 
 		// Echoes all message types but queries
@@ -180,7 +180,7 @@ describe('The session Api', function() {
 		})
 
 		afterEach(function() {
-			connection.close()
+			cy.destroySession(connection)
 		})
 	})
 
@@ -212,7 +212,7 @@ describe('The session Api', function() {
 		})
 
 		afterEach(function() {
-			connection.close()
+			cy.destroySession(connection)
 		})
 
 		it('starts empty public', function() {
@@ -276,22 +276,6 @@ describe('The session Api', function() {
 			})
 		})
 
-		it('signals closing connection', function() {
-			cy.then(() => {
-				return new Promise((resolve, reject) => {
-					// Create a promise that resolves when close completes
-					connection.close()
-						.then(() => {
-							connection.push({ steps: [messages.update], version, awareness: '' })
-								.then(
-									() => reject(new Error('Push should have thrown ConnectionClosed()')),
-									resolve,
-								)
-						})
-				})
-			})
-		})
-
 		it('does not send initial content if other session is alive but did not push any steps', function() {
 			let joining
 			cy.createTextSession(undefined, { filePath: '', shareToken })
@@ -301,8 +285,8 @@ describe('The session Api', function() {
 				})
 				.its('state.documentSource')
 				.should('eql', '## Hello world\n')
-				.then(() => joining.close())
-				.then(() => connection.close())
+				.then(() => cy.destroySession(joining))
+			cy.destroySession(connection)
 		})
 
 		it('does not send initial content if session is alive even without saved state', function() {
@@ -317,16 +301,17 @@ describe('The session Api', function() {
 				})
 				.its('state.documentSource')
 				.should('eql', '## Hello world\n')
-				.then(() => joining.close())
-				.then(() => connection.close())
+				.then(() => cy.destroySession(joining))
+			cy.destroySession(connection)
 		})
 
 		it('refuses create,push,sync,save with non-matching baseVersionEtag', function() {
-			cy.failToCreateTextSession(undefined, 'wrongBaseVersionEtag', { filePath: '', shareToken })
+			cy.failToCreateTextSession(undefined, 'wrongBaseVersionEtag', { filePath: '', token: shareToken })
 				.its('status')
 				.should('eql', 412)
 
 			connection.setBaseVersionEtag('wrongBaseVersionEtag')
+			connection.connection.baseVersionEtag = 'wrongBaseVersionEtag'
 
 			cy.failToPushSteps({ connection, steps: [messages.update], version })
 				.its('status')
@@ -340,7 +325,7 @@ describe('The session Api', function() {
 				.its('status')
 				.should('equal', 412)
 
-			cy.then(() => connection.close())
+			cy.destroySession(connection)
 		})
 
 		it('recovers session even if last person leaves right after create', function() {
@@ -355,7 +340,7 @@ describe('The session Api', function() {
 					joining = con
 				})
 			cy.log('Initial user closes session')
-				.then(() => connection.close())
+			cy.destroySession(connection)
 			cy.log('Other user still finds the steps')
 				.then(() => {
 					cy.syncSteps(joining, {
diff --git a/cypress/e2e/api/SyncServiceProvider.spec.js b/cypress/e2e/api/SyncServiceProvider.spec.js
index 614e0983cc4..729fcb8c81c 100644
--- a/cypress/e2e/api/SyncServiceProvider.spec.js
+++ b/cypress/e2e/api/SyncServiceProvider.spec.js
@@ -4,8 +4,8 @@
  */
 
 import { randUser } from '../../utils/index.js'
-import SessionApi from '../../../src/services/SessionApi.js'
-import { SyncService } from '../../../src/services/SyncService.js'
+import { provideConnection } from '../../../src/composables/useConnection.ts'
+import { provideSyncService  } from '../../../src/composables/useSyncService.ts'
 import createSyncServiceProvider from '../../../src/services/SyncServiceProvider.js'
 import { Doc } from 'yjs'
 
@@ -39,13 +39,10 @@ describe('Sync service provider', function() {
 	 * @param {object} ydoc Yjs document
 	 */
 	function createProvider(ydoc) {
+		const relativePath = '.'
+		const { connection, openConnection, baseVersionEtag } = provideConnection({ fileId, relativePath })
+		const { syncService } = provideSyncService( connection, openConnection, baseVersionEtag )
 		const queue = []
-		const api = new SessionApi()
-		const syncService = new SyncService({
-			serialize: () => 'Serialized',
-			getDocumentState: () => null,
-			api,
-		})
 		syncService.on('opened', () => syncService.startSync())
 		return createSyncServiceProvider({
 			ydoc,
diff --git a/cypress/e2e/api/UsersApi.spec.js b/cypress/e2e/api/UsersApi.spec.js
index 9c9acabcb8b..ee9ee8cbe50 100644
--- a/cypress/e2e/api/UsersApi.spec.js
+++ b/cypress/e2e/api/UsersApi.spec.js
@@ -44,7 +44,7 @@ describe('The user mention API', function() {
 	})
 
 	it('rejects closed sessions', function() {
-		cy.then(() => this.connection.close())
+		cy.destroySession(this.connection)
 		cy.sessionUsers(this.connection)
 			.its('status').should('eq', 403)
 	})
diff --git a/cypress/support/sessions.js b/cypress/support/sessions.js
index f297f8e8ce9..ed865f3e79b 100644
--- a/cypress/support/sessions.js
+++ b/cypress/support/sessions.js
@@ -4,33 +4,44 @@
  */
 
 import axios from '@nextcloud/axios'
-import SessionApi from '../../src/services/SessionApi.js'
+import { SessionConnection } from '../../src/services/SessionConnection.js'
+import { open, close } from '../../src/apis/Connect.ts'
+import { push } from '../../src/apis/Sync.ts'
 
 const url = Cypress.config('baseUrl').replace(/\/index.php\/?$/g, '')
 
-Cypress.Commands.add('createTextSession', (fileId, options = {}) => {
-	const api = new SessionApi(options)
-	return api.open({ fileId })
+Cypress.Commands.add('createTextSession', async (fileId, options = {}) => {
+	const { connection, data } = await open({ fileId, token: options.shareToken, ...options })
+	return new SessionConnection(data, connection)
+})
+
+Cypress.Commands.add('destroySession', async (sessionConnection) => {
+	const { documentId, id, token } = sessionConnection.session
+	await close({ documentId, sessionId: id, sessionToken: token })
+	sessionConnection.close()
 })
 
 Cypress.Commands.add('failToCreateTextSession', (fileId, baseVersionEtag = null, options = {}) => {
-	const api = new SessionApi(options)
-	return api.open({ fileId, baseVersionEtag })
-		.then((response) => {
+	return open({ fileId, ...options, baseVersionEtag })
+		.then((_response) => {
 			throw new Error('Expected request to fail - but it succeeded!')
 		}, (err) => err.response)
 })
 
-Cypress.Commands.add('pushSteps', ({ connection, steps, version, awareness = '' }) => {
-	return connection.push({ steps, version, awareness })
-		.then(response => response.data)
+Cypress.Commands.add('pushSteps', ({ connection: sessionConnection, steps, version, awareness = '' }) => {
+	return push(
+		sessionConnection.connection,
+		{ steps, version, awareness }
+	).then(response => response.data)
 })
 
-Cypress.Commands.add('failToPushSteps', ({ connection, steps, version, awareness = '' }) => {
-	return connection.push({ steps, version, awareness })
-		.then((response) => {
-			throw new Error('Expected request to fail - but it succeeded!')
-		}, (err) => err.response)
+Cypress.Commands.add('failToPushSteps', ({ connection: sessionConnection, steps, version, awareness = '' }) => {
+	return push(
+		sessionConnection.connection,
+		{ steps, version, awareness }
+	).then((_response) => {
+		throw new Error('Expected request to fail - but it succeeded!')
+	}, (err) => err.response)
 })
 
 Cypress.Commands.add('syncSteps', (connection, options = { version: 0 }) => {
diff --git a/src/EditorFactory.js b/src/EditorFactory.js
index 280a5fe27f3..ee7d9c37442 100644
--- a/src/EditorFactory.js
+++ b/src/EditorFactory.js
@@ -41,17 +41,9 @@ const createRichEditor = ({ extensions = [], connection, relativePath, isEmbedde
 	return new Editor({
 		editorProps,
 		extensions: [
-			RichText.configure({
-				relativePath,
-				isEmbedded,
-				component: this,
-				extensions: [
-					Mention.configure({
-						suggestion: MentionSuggestion({
-							connection,
-						}),
-					}),
-				],
+			RichText.configure({ relativePath, isEmbedded }),
+			Mention.configure({
+				suggestion: MentionSuggestion({ connection }),
 			}),
 			FocusTrap,
 			...extensions,
diff --git a/src/apis/Connect.ts b/src/apis/Connect.ts
new file mode 100644
index 00000000000..aa615392946
--- /dev/null
+++ b/src/apis/Connect.ts
@@ -0,0 +1,58 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import type { Connection } from '../composables/useConnection.js'
+
+export interface OpenParams {
+	fileId?: number
+	baseVersionEtag?: string
+	filePath: string
+	token?: string
+	guestName?: string
+}
+
+export interface OpenData {
+	document: { baseVersionEtag: string }
+}
+
+/**
+ * Open editing connection to the document
+ * @param params Parameters identifying the document
+ */
+export async function open(
+	params: OpenParams,
+): Promise<{ connection: Connection; data: OpenData }> {
+	const _baseUrl = params.token
+		? generateUrl('/apps/text/public')
+		: generateUrl('/apps/text')
+	const url = `${_baseUrl}/session/${params.fileId}/create`
+	const response = await axios.put(url, params)
+	const { document, session } = response.data
+	const connection = {
+		documentId: document.id,
+		sessionId: session.id,
+		sessionToken: session.token,
+		baseVersionEtag: document.baseVersionEtag,
+		filePath: params.filePath,
+		shareToken: params.token,
+	}
+	return { connection, data: response.data }
+}
+
+/**
+ * Close the connection
+ * @param connection connection to close
+ */
+export async function close(connection: Connection) {
+	const id = connection.documentId
+	const url = generateUrl(`/apps/text/session/${id}/close`)
+	const response = await axios.post(url, {
+		documentId: connection.documentId,
+		sessionId: connection.sessionId,
+		sessionToken: connection.sessionToken,
+	})
+	return response.data
+}
diff --git a/src/apis/Mention.ts b/src/apis/Mention.ts
new file mode 100644
index 00000000000..5c53390612c
--- /dev/null
+++ b/src/apis/Mention.ts
@@ -0,0 +1,67 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import type { Connection } from '../composables/useConnection.js'
+import { unref, type ShallowRef } from 'vue'
+
+/**
+ * Let Nextcloud know someone was mentioned
+ * @param mention user id of the person that was mentioned
+ * @param scope scope the user was mentioned in
+ * @param options options
+ * @param options.connection connection to the text editing session
+ */
+export function emitMention(
+	mention: string,
+	scope: object,
+	{ connection }: { connection: ShallowRef<Connection> | Connection },
+): Promise<void> {
+	// TODO: Require actual connection - handle disconnected state early on
+	const con = unref(connection)
+	if (!con) {
+		const err = new Error('Disconnected. Could not notify user about mention.')
+		console.warn(err.message, { err, mention })
+		return Promise.resolve()
+	}
+	const url = generateUrl(`apps/text/session/${con.documentId}/mention`)
+	return axios.put(url, {
+		documentId: con.documentId,
+		sessionId: con.sessionId,
+		sessionToken: con.sessionToken,
+		mention,
+		scope,
+	})
+	// TODO: handle errors:
+	// * signal something is wrong with the connection
+	// * wait for reconnect and fetch again
+}
+
+const USERS_LIST_ENDPOINT_URL = generateUrl('apps/text/api/v1/users')
+
+/**
+ * Look up user names to mention
+ * @param filter string to look for in the user names
+ * @param options options
+ * @param options.connection connection to the text editing session
+ */
+export async function getUsers(
+	filter: string,
+	{ connection }: { connection: ShallowRef<Connection> },
+): Promise<Record<string, string>> {
+	// TODO: Require actual connection - handle disconnected state early on
+	const con = unref(connection)
+	if (!con) {
+		const err = new Error('Disconnected. Could not lookup users to mention.')
+		console.warn(err.message, { err })
+		return Promise.resolve({})
+	}
+	const response = await axios.post(USERS_LIST_ENDPOINT_URL, { ...con, filter })
+	// TODO: handle errors:
+	// * signal something is wrong with the connection
+	// * wait for reconnect and fetch again
+	return JSON.parse(JSON.stringify(response.data))
+}
diff --git a/src/apis/Sync.ts b/src/apis/Sync.ts
new file mode 100644
index 00000000000..36077faecb5
--- /dev/null
+++ b/src/apis/Sync.ts
@@ -0,0 +1,47 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import axios from '@nextcloud/axios'
+import type { Connection } from '../composables/useConnection.js'
+import { unref, type ShallowRef } from 'vue'
+import { generateUrl } from '@nextcloud/router'
+import type { Step } from '../services/SyncService.js'
+
+interface SyncData {
+	version: number
+	steps: string[]
+	awareness: string
+}
+
+interface SyncResponse {
+	data: {
+		steps: Step[]
+		documentState: string
+		awareness: Record<string, string>
+	}
+}
+
+/**
+ * Send data to the server
+ * @param connection the active connection
+ * @param data data to push to the server
+ */
+export function push(
+	connection: ShallowRef<Connection> | Connection,
+	data: SyncData,
+): Promise<SyncResponse> {
+	const con = unref(connection)
+	const pub = con.shareToken ? '/public' : ''
+	const url = generateUrl(`apps/text${pub}/session/${con.documentId}/push`)
+	return axios.post(url, {
+		documentId: con.documentId,
+		sessionId: con.sessionId,
+		sessionToken: con.sessionToken,
+		token: con.shareToken,
+		baseVersionEtag: con.baseVersionEtag,
+		version: data.version,
+		steps: data.steps.filter((s) => s),
+		awareness: data.awareness,
+	})
+}
diff --git a/src/components/Assistant.vue b/src/components/Assistant.vue
index c9433fcd431..bcf94371d8a 100644
--- a/src/components/Assistant.vue
+++ b/src/components/Assistant.vue
@@ -268,7 +268,7 @@ export default {
 			return
 		}
 
-		this.editor?.on('selectionUpdate', this.onSelection)
+		this.editor.on('selectionUpdate', this.onSelection)
 		this.fetchTasks()
 		subscribe('notifications:notification:received', this.checkNotification)
 	},
@@ -277,7 +277,7 @@ export default {
 			return
 		}
 
-		this.editor?.off('selectionUpdate', this.onSelection)
+		this.editor.off('selectionUpdate', this.onSelection)
 		unsubscribe('notifications:notification:received', this.checkNotification)
 	},
 	methods: {
@@ -310,12 +310,8 @@ export default {
 			await this.fetchTasks()
 		},
 		onSelection() {
-			const { state } = this.editor ?? {}
-			if (!state) {
-				return
-			}
-			const { from, to } = state.selection
-			this.selection = state.doc.textBetween(from, to, ' ')
+			const { selection, doc } = this.editor.state
+			this.selection = doc.textBetween(selection.from, selection.to, ' ')
 		},
 		async openAssistantForm(taskType = null) {
 			await window.OCA.Assistant.openAssistantForm({
@@ -343,7 +339,7 @@ export default {
 		},
 		openTranslateDialog() {
 			if (!this.selection.trim().length) {
-				this.editor?.commands.selectAll()
+				this.editor.commands.selectAll()
 			}
 			emit('text:translate-modal:show', { content: this.selection || '' })
 		},
@@ -367,7 +363,7 @@ export default {
 			const content = isMarkdown
 				? markdownit.render(task.output.output)
 				: task.output.output
-			this.editor?.commands.insertContent(content)
+			this.editor.commands.insertContent(content)
 			this.showTaskList = false
 		},
 		async copyResult(task) {
@@ -402,9 +398,9 @@ export default {
 						.querySelector('.ProseMirror')
 						.getBoundingClientRect()
 					const pos = posToDOMRect(
-						this.editor?.view,
-						this.editor?.state.selection.from,
-						this.editor?.state.selection.to,
+						this.editor.view,
+						this.editor.state.selection.from,
+						this.editor.state.selection.to,
 					)
 					let rightSpacing = 0
 
diff --git a/src/components/BaseReader.vue b/src/components/BaseReader.vue
index 5e1587baf6d..63b2bfb1ab5 100644
--- a/src/components/BaseReader.vue
+++ b/src/components/BaseReader.vue
@@ -14,7 +14,6 @@
 			<EditorOutline />
 		</div>
 		<EditorContent
-			v-if="editor"
 			id="read-only-editor"
 			class="editor__content text-editor__content"
 			:editor="editor" />
@@ -32,6 +31,7 @@ import {
 } from './Editor/Wrapper.provider.js'
 import EditorOutline from './Editor/EditorOutline.vue'
 import { useEditorMethods } from '../composables/useEditorMethods.ts'
+import { inject, watch } from 'vue'
 
 export default {
 	name: 'BaseReader',
@@ -42,9 +42,6 @@ export default {
 
 	mixins: [useOutlineStateMixin, useOutlineActions],
 
-	// extensions is a factory building a list of extensions for the editor
-	inject: ['renderHtml', 'extensions'],
-
 	props: {
 		content: {
 			type: String,
@@ -52,48 +49,36 @@ export default {
 		},
 	},
 
-	setup() {
-		const { editor } = provideEditor()
+	setup(props) {
+		// extensions is a factory building a list of extensions for the editor
+		const extensions = inject('extensions')
+		const renderHtml = inject('renderHtml')
+		const editor = new Editor({
+			content: renderHtml(props.content),
+			extensions: extensions(),
+		})
+		provideEditor(editor)
+		watch(
+			() => props.content,
+			(content) => {
+				console.warn({ content })
+				editor.commands.setContent(renderHtml(content), true)
+			},
+		)
 		const { setEditable } = useEditorMethods(editor)
-		return { editor, setEditable }
+		setEditable(false)
+		return { editor }
 	},
 
 	computed: {
-		htmlContent() {
-			return this.renderHtml(this.content)
-		},
 		showOutline() {
 			return this.$outlineState.visible
 		},
 	},
 
-	watch: {
-		content() {
-			this.updateContent()
-		},
-	},
-
-	created() {
-		this.editor = this.createEditor()
-		this.setEditable(false)
-	},
-
 	beforeDestroy() {
 		this.editor?.destroy()
 	},
-
-	methods: {
-		createEditor() {
-			return new Editor({
-				content: this.htmlContent,
-				extensions: this.extensions(),
-			})
-		},
-
-		updateContent() {
-			this.editor?.commands.setContent(this.htmlContent, true)
-		},
-	},
 }
 </script>
 
diff --git a/src/components/CollisionResolveDialog.vue b/src/components/CollisionResolveDialog.vue
index 7bdf0439b98..73e4bd978ac 100644
--- a/src/components/CollisionResolveDialog.vue
+++ b/src/components/CollisionResolveDialog.vue
@@ -29,17 +29,16 @@
 </template>
 
 <script>
-import { useSyncServiceMixin } from './Editor.provider.ts'
-import { useEditorFlags } from '../composables/useEditorFlags.ts'
 import { useEditor } from '../composables/useEditor.ts'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import { useEditorMethods } from '../composables/useEditorMethods.ts'
+import { useSyncService } from '../composables/useSyncService.ts'
+import { useSaveService } from '../composables/useSaveService.ts'
 export default {
 	name: 'CollisionResolveDialog',
 	components: {
 		NcButton,
 	},
-	mixins: [useSyncServiceMixin],
 	props: {
 		syncError: {
 			type: Object,
@@ -48,9 +47,15 @@ export default {
 	},
 	setup() {
 		const { editor } = useEditor()
+		const { syncService } = useSyncService()
+		const { saveService } = useSaveService()
 		const { setContent, setEditable } = useEditorMethods(editor)
-		const { isRichEditor } = useEditorFlags()
-		return { editor, isRichEditor, setContent, setEditable }
+		return {
+			setContent,
+			setEditable,
+			saveService,
+			syncService,
+		}
 	},
 	data() {
 		return {
@@ -60,15 +65,15 @@ export default {
 	methods: {
 		resolveThisVersion() {
 			this.clicked = true
-			this.$syncService.forceSave().then(() => this.$syncService.syncUp())
+			this.saveService.forceSave().then(() => this.syncService.syncUp())
 			this.setEditable(!this.readOnly)
 		},
 		resolveServerVersion() {
 			const { outsideChange } = this.syncError.data
 			this.clicked = true
 			this.setEditable(!this.readOnly)
-			this.setContent(outsideChange, { isRichEditor: this.isRichEditor })
-			this.$syncService.forceSave().then(() => this.$syncService.syncUp())
+			this.setContent(outsideChange)
+			this.saveService.forceSave().then(() => this.syncService.syncUp())
 		},
 	},
 }
diff --git a/src/components/Editor.provider.ts b/src/components/Editor.provider.ts
index 5a6907490a4..fa49465dfd6 100644
--- a/src/components/Editor.provider.ts
+++ b/src/components/Editor.provider.ts
@@ -8,17 +8,10 @@ import { logger } from '../helpers/logger.js'
 export const FILE = Symbol('editor:file')
 export const ATTACHMENT_RESOLVER = Symbol('attachment:resolver')
 export const IS_MOBILE = Symbol('editor:is-mobile')
-export const SYNC_SERVICE = Symbol('sync:service')
 export const EDITOR_UPLOAD = Symbol('editor:upload')
 export const HOOK_MENTION_SEARCH = Symbol('hook:mention-search')
 export const HOOK_MENTION_INSERT = Symbol('hook:mention-insert')
 
-export const useSyncServiceMixin = {
-	inject: {
-		$syncService: { from: SYNC_SERVICE, default: null },
-	},
-}
-
 export const useIsMobileMixin = {
 	inject: {
 		$isMobile: { from: IS_MOBILE, default: false },
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 41022079192..bd818f21abc 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -81,7 +81,7 @@
 </template>
 
 <script>
-import Vue, { ref, set, shallowRef, watch } from 'vue'
+import Vue, { defineComponent, 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'
@@ -91,20 +91,13 @@ import Autofocus from '../extensions/Autofocus.js'
 import { Doc } from 'yjs'
 import { useElementSize } from '@vueuse/core'
 
-import {
-	FILE,
-	ATTACHMENT_RESOLVER,
-	IS_MOBILE,
-	SYNC_SERVICE,
-} from './Editor.provider.ts'
+import { FILE, ATTACHMENT_RESOLVER, IS_MOBILE } from './Editor.provider.ts'
 import { provideEditorFlags } from '../composables/useEditorFlags.ts'
 import { provideEditor } from '../composables/useEditor.ts'
 import ReadonlyBar from './Menu/ReadonlyBar.vue'
 
 import { logger } from '../helpers/logger.js'
-import { getDocumentState } from '../helpers/yjs.js'
-import { SyncService, ERROR_TYPE, IDLE_TIMEOUT } from './../services/SyncService.js'
-import SessionApi from '../services/SessionApi.js'
+import { ERROR_TYPE, IDLE_TIMEOUT } from '../services/SyncService.ts'
 import createSyncServiceProvider from './../services/SyncServiceProvider.js'
 import AttachmentResolver from './../services/AttachmentResolver.js'
 import {
@@ -136,8 +129,10 @@ 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'
+import { provideSyncService } from '../composables/useSyncService.ts'
+import { provideSaveService } from '../composables/useSaveService.ts'
 
-export default {
+export default defineComponent({
 	name: 'Editor',
 	components: {
 		CollisionResolveDialog,
@@ -163,9 +158,6 @@ export default {
 		// using getters we can always provide the
 		// actual values without being reactive
 		Object.defineProperties(val, {
-			[SYNC_SERVICE]: {
-				get: () => this.syncService,
-			},
 			[FILE]: {
 				get: () => this.fileData,
 			},
@@ -239,59 +231,47 @@ export default {
 		})
 		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)
 		const { delayed: requireReconnect } = useDelayedFlag(hasConnectionIssue)
-		const { editor } = provideEditor()
-		const { setEditable } = useEditorMethods(editor)
 		const { isPublic, isRichEditor, isRichWorkspace } = provideEditorFlags(props)
 		const { language, lowlightLoaded } = useSyntaxHighlighting(
 			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),
-			})
-		}
-		const syncProvider = shallowRef(null)
-
+		const { connection, openConnection, baseVersionEtag } =
+			provideConnection(props)
+		const { syncService } = provideSyncService(connection, openConnection)
 		const extensions = [
 			Autofocus.configure({ fileId: props.fileId }),
 			Collaboration.configure({ document: ydoc }),
 			CollaborationCursor.configure({ provider: { awareness } }),
 		]
-		editor.value = isRichEditor
+		const editor = isRichEditor
 			? createRichEditor({
-					...wrappedConnection,
+					connection,
 					relativePath: props.relativePath,
 					extensions,
 					isEmbedded: props.isEmbedded,
 				})
 			: createPlainEditor({ language, extensions })
+		provideEditor(editor)
+
+		const { setEditable } = useEditorMethods(editor)
+
+		const serialize = isRichEditor
+			? () =>
+					createMarkdownSerializer(editor.schema).serialize(
+						editor.state.doc,
+					)
+			: () => serializePlainText(editor.state.doc)
+
+		const { saveService } = provideSaveService(syncService, serialize, ydoc)
+
+		const syncProvider = shallowRef(null)
 
 		return {
 			awareness,
 			baseVersionEtag,
-			connectSyncService,
 			editor,
 			el,
 			hasConnectionIssue,
@@ -301,11 +281,13 @@ export default {
 			language,
 			lowlightLoaded,
 			requireReconnect,
+			saveService,
+			serialize,
 			setEditable,
 			syncProvider,
 			syncService,
 			width,
-			wrappedConnection,
+			connection,
 			ydoc,
 		}
 	},
@@ -450,14 +432,13 @@ 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.saveService.save()])
 		}
 		await this.close()
 		removeFromDebugging(this)
 	},
 	methods: {
 		initSession() {
-			this.connectSyncService()
 			this.listenSyncServiceEvents()
 			this.syncProvider = createSyncServiceProvider({
 				ydoc: this.ydoc,
@@ -470,17 +451,17 @@ export default {
 		},
 
 		listenEditorEvents() {
-			this.editor?.on('focus', this.onFocus)
-			this.editor?.on('blur', this.onBlur)
-			this.editor?.on('create', this.onCreate)
-			this.editor?.on('update', this.onUpdate)
+			this.editor.on('focus', this.onFocus)
+			this.editor.on('blur', this.onBlur)
+			this.editor.on('create', this.onCreate)
+			this.editor.on('update', this.onUpdate)
 		},
 
 		unlistenEditorEvents() {
-			this.editor?.off('focus', this.onFocus)
-			this.editor?.off('blur', this.onBlur)
-			this.editor?.off('create', this.onCreate)
-			this.editor?.off('update', this.onUpdate)
+			this.editor.off('focus', this.onFocus)
+			this.editor.off('blur', this.onBlur)
+			this.editor.off('create', this.onCreate)
+			this.editor.off('update', this.onUpdate)
 		},
 
 		listenSyncServiceEvents() {
@@ -510,7 +491,6 @@ export default {
 		reconnect() {
 			this.contentLoaded = false
 			this.hasConnectionIssue = false
-			this.wrappedConnection.connection.value = undefined
 			this.disconnect().then(() => {
 				this.initSession()
 			})
@@ -563,11 +543,13 @@ export default {
 			}
 		},
 
-		onOpened({ document, session }) {
+		onOpened({ document, session, documentSource, documentState }) {
 			this.currentSession = session
 			this.document = document
 			this.readOnly = document.readOnly
+			this.baseVersionEtag = document.baseVersionEtag
 			this.editMode = !document.readOnly && !this.openReadOnlyEnabled
+			this.hasConnectionIssue = false
 
 			this.setEditable(this.editMode)
 			this.lock = this.syncService.lock
@@ -592,9 +574,6 @@ export default {
 					})
 					.catch((err) => logger.warn('Failed to fetch node', { err }))
 			}
-		},
-
-		onLoaded({ document, documentSource, documentState }) {
 			// Fetch the document state after syntax highlights are loaded
 			this.lowlightLoaded.then(() => {
 				this.syncService.startSync()
@@ -604,11 +583,6 @@ export default {
 					})
 				}
 			})
-
-			this.baseVersionEtag = document.baseVersionEtag
-			this.hasConnectionIssue = false
-
-			const session = this.currentSession
 			const user = {
 				name: session?.userId
 					? session.displayName
@@ -616,9 +590,6 @@ export default {
 				color: session?.color,
 				clientId: this.ydoc.clientID,
 			}
-			this.wrappedConnection.connection.value = {
-				...this.currentSession,
-			}
 			this.editor.commands.updateUser(user)
 		},
 
@@ -631,7 +602,7 @@ export default {
 		},
 
 		onCreate({ editor }) {
-			const proseMirrorMarkdown = this.syncService.serialize(editor.state.doc)
+			const proseMirrorMarkdown = this.serialize()
 			this.emit('create:content', {
 				markdown: proseMirrorMarkdown,
 			})
@@ -639,7 +610,7 @@ export default {
 
 		onUpdate({ editor }) {
 			// this.debugContent(editor)
-			const proseMirrorMarkdown = this.syncService.serialize(editor.state.doc)
+			const proseMirrorMarkdown = this.serialize()
 			this.emit('update:content', {
 				markdown: proseMirrorMarkdown,
 			})
@@ -698,9 +669,6 @@ export default {
 		},
 
 		onStateChange(state) {
-			if (!this.editor) {
-				return
-			}
 			if (state.initialLoading && !this.contentLoaded) {
 				this.contentLoaded = true
 				if (this.autofocus && !this.readOnly) {
@@ -715,7 +683,7 @@ export default {
 				if (this.editor.can().undo() || this.editor.can().redo()) {
 					this.dirty = state.dirty
 					if (this.dirty) {
-						this.syncService.autosave()
+						this.saveService.autosave()
 					}
 				}
 			}
@@ -752,7 +720,7 @@ export default {
 		},
 
 		onKeyboardSave() {
-			this.syncService.save()
+			this.saveService.save()
 		},
 
 		onAddImageNode() {
@@ -764,7 +732,7 @@ export default {
 		},
 
 		async save() {
-			await this.syncService.save()
+			await this.saveService.save()
 		},
 
 		async disconnect() {
@@ -828,7 +796,7 @@ export default {
 		 * @param {object} editor The Tiptap editor
 		 */
 		debugContent(editor) {
-			const proseMirrorMarkdown = this.syncService.serialize(editor.state.doc)
+			const proseMirrorMarkdown = this.serialize()
 			const markdownItHtml = markdownit.render(proseMirrorMarkdown)
 
 			logger.debug(
@@ -852,7 +820,7 @@ export default {
 				pendingStructs: this.ydoc.store.pendingStructs,
 				pendingStructsRemote: this.syncProvider?.remote.store.pendingStructs,
 				clientVectors: [],
-				documentState: this.syncService?.getDocumentState(),
+				documentState: this.saveService.getDocumentState(),
 			}
 			for (const client of this.ydoc.store.clients.values()) {
 				yjsData.clientVectors.push(client.at(-1).id)
@@ -867,7 +835,7 @@ export default {
 
 		readOnlyToggled() {
 			if (this.editMode) {
-				this.syncService.save()
+				this.saveService.save()
 			}
 			this.editMode = !this.editMode
 			this.setEditable(this.editMode)
@@ -881,7 +849,7 @@ export default {
 			this.translateModal = false
 		},
 		applyCommand(fn) {
-			this.editor?.commands?.command(fn)
+			this.editor.commands.command(fn)
 		},
 		translateInsert(content) {
 			this.applyCommand(({ tr, commands }) => {
@@ -904,8 +872,8 @@ export default {
 		handleEditorWidthChange(newWidth) {
 			this.updateEditorWidth(newWidth)
 			this.$nextTick(() => {
-				this.editor?.view.updateState(this.editor?.view.state)
-				this.editor?.commands.focus()
+				this.editor.view.updateState(this.editor.view.state)
+				this.editor.commands.focus()
 			})
 		},
 		updateEditorWidth(newWidth) {
@@ -916,10 +884,10 @@ export default {
 		},
 
 		saveBeforeUnload() {
-			this.syncService?.saveViaSendBeacon()
+			this.saveService.saveViaSendBeacon()
 		},
 	},
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/Editor/DocumentStatus/SyncStatus.vue b/src/components/Editor/DocumentStatus/SyncStatus.vue
index 87dcc0773ad..55216b26bb4 100644
--- a/src/components/Editor/DocumentStatus/SyncStatus.vue
+++ b/src/components/Editor/DocumentStatus/SyncStatus.vue
@@ -14,7 +14,7 @@
 
 <script>
 
-import { ERROR_TYPE } from '../../../services/SyncService.js'
+import { ERROR_TYPE } from '../../../services/SyncService.ts'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 
 export default {
diff --git a/src/components/Editor/GuestNameDialog.vue b/src/components/Editor/GuestNameDialog.vue
index c5855d8989f..e959fb38ae2 100644
--- a/src/components/Editor/GuestNameDialog.vue
+++ b/src/components/Editor/GuestNameDialog.vue
@@ -20,22 +20,23 @@
 <script>
 import { generateUrl } from '@nextcloud/router'
 import AvatarWrapper from './AvatarWrapper.vue'
-import { useSyncServiceMixin } from '../Editor.provider.ts'
+import { useSyncService } from '../../composables/useSyncService.ts'
 
 export default {
 	name: 'GuestNameDialog',
 	components: {
 		AvatarWrapper,
 	},
-	mixins: [
-		useSyncServiceMixin,
-	],
 	props: {
 		session: {
 			type: Object,
 			required: true,
 		},
 	},
+	setup() {
+		const { syncService } = useSyncService()
+		return { syncService }
+	},
 	data() {
 		return {
 			guestName: '',
@@ -55,13 +56,13 @@ export default {
 		},
 	},
 	beforeMount() {
-		this.guestName = this.$syncService.guestName
+		this.guestName = this.syncService.guestName
 		this.updateBufferedGuestName()
 	},
 	methods: {
 		setGuestName() {
-			const previousGuestName = this.$syncService.guestName
-			this.$syncService.updateSession(this.guestName).then(() => {
+			const previousGuestName = this.syncService.guestName
+			this.syncService.updateSession(this.guestName).then(() => {
 				localStorage.setItem('nick', this.guestName)
 				this.updateBufferedGuestName()
 			}).catch((e) => {
diff --git a/src/components/Editor/MarkdownContentEditor.vue b/src/components/Editor/MarkdownContentEditor.vue
index 0279c571aa9..7a9a18bff4f 100644
--- a/src/components/Editor/MarkdownContentEditor.vue
+++ b/src/components/Editor/MarkdownContentEditor.vue
@@ -37,7 +37,7 @@ import { RichText, FocusTrap } from '../../extensions/index.js'
 import ReadonlyBar from '../Menu/ReadonlyBar.vue'
 import ContentContainer from './ContentContainer.vue'
 import { useEditorMethods } from '../../composables/useEditorMethods.ts'
-import { provide, ref } from 'vue'
+import { provide, watch } from 'vue'
 
 export default {
 	name: 'MarkdownContentEditor',
@@ -86,32 +86,49 @@ export default {
 	},
 	emits: ['update:content'],
 
-	setup() {
-		const { editor } = provideEditor()
-		const { setEditable } = useEditorMethods(editor)
-		provide(editorFlagsKey, {
-			isPublic: ref(false),
-			isRichEditor: ref(true),
-			isRichWorkspace: ref(false),
+	setup(props) {
+		const extensions = [
+			RichText.configure({
+				extensions: [ History ],
+			}),
+			FocusTrap,
+		]
+		const editor = new Editor({
+			content: markdownit.render(props.content),
+			extensions,
 		})
-		return { editor, setEditable }
-	},
 
-	computed: {
-		htmlContent() {
-			return this.renderHtml(this.content)
-		},
-	},
+		const { setEditable, setContent } = useEditorMethods(editor)
+		watch(() => props.content, (content) => {
+			setContent(content)
+		})
 
-	watch: {
-		content() {
-			this.updateContent()
-		},
+		setEditable(!props.readOnly)
+		watch(() => props.readOnly, (readOnly) => {
+			setEditable(!readOnly)
+		})
+
+		provideEditor(editor)
+		provide(editorFlagsKey, {
+			isPublic: false,
+			isRichEditor: true,
+			isRichWorkspace: false,
+		})
+		return { editor }
 	},
 
 	created() {
-		this.editor = this.createEditor()
-		this.setEditable(!this.readOnly)
+		this.editor.on('create', () => {
+			this.$emit('ready')
+			this.$parent.$emit('ready')
+		})
+		this.editor.on('update', ({ editor }) => {
+			const markdown = (createMarkdownSerializer(editor.schema)).serialize(editor.state.doc)
+			this.emit('update:content', {
+				json: editor.state.doc,
+				markdown,
+			})
+		})
 		if (this.fileId) {
 			this.$attachmentResolver = new AttachmentResolver({
 				currentDirectory: this.relativePath?.match(/.*\//),
@@ -122,50 +139,11 @@ export default {
 		}
 	},
 
-	updated() {
-		this.setEditable(!this.readOnly)
-	},
-
 	beforeDestroy() {
-		this.editor?.destroy()
+		this.editor.destroy()
 	},
 
 	methods: {
-		renderHtml(content) {
-			return markdownit.render(content)
-		},
-		extensions() {
-			return [
-				RichText.configure({
-					component: this,
-					extensions: [
-						History,
-					],
-				}),
-				FocusTrap,
-			]
-		},
-		createEditor() {
-			return new Editor({
-				content: this.htmlContent,
-				extensions: this.extensions(),
-				onUpdate: ({ editor }) => {
-					const markdown = (createMarkdownSerializer(this.editor?.schema)).serialize(editor.state.doc)
-					this.emit('update:content', {
-						json: editor.state.doc,
-						markdown,
-					})
-				},
-				onCreate: ({ editor }) => {
-					this.$emit('ready')
-					this.$parent.$emit('ready')
-				},
-			})
-		},
-
-		updateContent() {
-			this.editor?.commands.setContent(this.htmlContent, true)
-		},
 
 		outlineToggled(visible) {
 			this.emit('outline-toggled', visible)
diff --git a/src/components/Editor/MediaHandler.vue b/src/components/Editor/MediaHandler.vue
index 5a84e59d303..7316a092c1f 100644
--- a/src/components/Editor/MediaHandler.vue
+++ b/src/components/Editor/MediaHandler.vue
@@ -33,7 +33,6 @@ import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 
 import {
 	useFileMixin,
-	useSyncServiceMixin,
 } from '../Editor.provider.ts'
 import { useEditor } from '../../composables/useEditor.ts'
 
@@ -43,12 +42,13 @@ import {
 	ACTION_CREATE_ATTACHMENT,
 	STATE_UPLOADING,
 } from './MediaHandler.provider.js'
+import { useSyncService } from '../../composables/useSyncService.ts'
 
 const getDir = (val) => val.split('/').slice(0, -1).join('/')
 
 export default {
 	name: 'MediaHandler',
-	mixins: [ useFileMixin, useSyncServiceMixin],
+	mixins: [ useFileMixin],
 	provide() {
 		const val = {}
 
@@ -72,8 +72,9 @@ export default {
 	setup() {
 		const isMobile = useIsMobile()
 		const { editor } = useEditor()
+		const { syncService } = useSyncService()
 		return {
-			editor, isMobile,
+			editor, isMobile, syncService
 		}
 	},
 	data() {
@@ -133,7 +134,7 @@ export default {
 		async uploadAttachmentFile(file, position = null) {
 			this.state.isUploadingAttachments = true
 
-			return this.$syncService.uploadAttachment(file)
+			return this.syncService.uploadAttachment(file)
 				.then((response) => {
 					this.insertAttachment(
 						response.data?.name, response.data?.id, file.type,
@@ -167,7 +168,7 @@ export default {
 
 			this.state.isUploadingAttachments = true
 
-			return this.$syncService.insertAttachmentFile(filePath).then((response) => {
+			return this.syncService.insertAttachmentFile(filePath).then((response) => {
 				this.insertAttachment(
 					response.data?.name, response.data?.id, response.data?.mimetype,
 					null, response.data?.dirname,
@@ -181,7 +182,7 @@ export default {
 		},
 		createAttachment(template) {
 			this.state.isUploadingAttachments = true
-			return this.$syncService.createAttachment(template).then((response) => {
+			return this.syncService.createAttachment(template).then((response) => {
 				this.insertAttachmentPreview(response.data?.id)
 			}).catch((error) => {
 				logger.error('Failed to create attachment', { error })
@@ -193,7 +194,7 @@ export default {
 		insertAttachmentPreview(fileId) {
 			const url = new URL(generateUrl(`/f/${fileId}`), window.origin)
 			const href = url.href.replaceAll(' ', '%20')
-			this.editor?.chain()
+			this.editor.chain()
 				.focus()
 				.insertPreview(href)
 				.run()
@@ -209,9 +210,6 @@ export default {
 			// as it does not need to be unique and matching the real file name
 			const alt = name.replaceAll(/[[\]]/g, '')
 
-			if (!this.editor) {
-				return
-			}
 			const chain = position
 				? this.editor.chain().focus(position)
 				: this.editor.chain()
diff --git a/src/components/Editor/SessionList.vue b/src/components/Editor/SessionList.vue
index 61306872d73..5bfce425e5a 100644
--- a/src/components/Editor/SessionList.vue
+++ b/src/components/Editor/SessionList.vue
@@ -55,7 +55,7 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwit
 import NcPopover from '@nextcloud/vue/components/NcPopover'
 import AccountMultipleIcon from 'vue-material-design-icons/AccountMultiple.vue'
 import AvatarWrapper from './AvatarWrapper.vue'
-import { COLLABORATOR_DISCONNECT_TIME, COLLABORATOR_IDLE_TIME } from '../../services/SyncService.js'
+import { COLLABORATOR_DISCONNECT_TIME, COLLABORATOR_IDLE_TIME } from '../../services/SyncService.ts'
 import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
diff --git a/src/components/Editor/Status.vue b/src/components/Editor/Status.vue
index 15ef1b79b56..edb2cd59326 100644
--- a/src/components/Editor/Status.vue
+++ b/src/components/Editor/Status.vue
@@ -27,16 +27,16 @@
 
 <script>
 
-import { ERROR_TYPE } from '../../services/SyncService.js'
+import { ERROR_TYPE } from '../../services/SyncService.ts'
 import moment from '@nextcloud/moment'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcSavingIndicatorIcon from '@nextcloud/vue/components/NcSavingIndicatorIcon'
 import {
 	useIsMobileMixin,
-	useSyncServiceMixin,
 } from '../Editor.provider.ts'
 import { useEditorFlags } from '../../composables/useEditorFlags.ts'
 import refreshMoment from '../../mixins/refreshMoment.js'
+import { useSaveService } from '../../composables/useSaveService.ts'
 
 export default {
 	name: 'Status',
@@ -50,7 +50,6 @@ export default {
 
 	mixins: [
 		useIsMobileMixin,
-		useSyncServiceMixin,
 		refreshMoment,
 	],
 
@@ -81,7 +80,8 @@ export default {
 
 	setup() {
 		const { isPublic } = useEditorFlags()
-		return { isPublic }
+		const { saveService } = useSaveService()
+		return { isPublic, saveService }
 	},
 
 	computed: {
@@ -130,7 +130,7 @@ export default {
 	methods: {
 		onClickSave() {
 			if (this.dirtyStateIndicator) {
-				this.$syncService.forceSave()
+				this.saveService.forceSave()
 			}
 		},
 		onEditorWidthChange(newWidth) {
diff --git a/src/components/Editor/TableOfContents.vue b/src/components/Editor/TableOfContents.vue
index fd402771b98..3c4bf2d3a20 100644
--- a/src/components/Editor/TableOfContents.vue
+++ b/src/components/Editor/TableOfContents.vue
@@ -37,10 +37,8 @@ export default {
 		headings: [],
 	}),
 	mounted() {
-		if (this.editor) {
-			this.editor.on('update', this.updateHeadings)
-			this.updateHeadings()
-		}
+		this.editor.on('update', this.updateHeadings)
+		this.updateHeadings()
 		setTimeout(() => {
 			this.initialRender = false
 		}, 1000)
@@ -58,7 +56,7 @@ export default {
 		},
 		updateHeadings() {
 			this.headings = headingAnchorPluginKey
-				.getState(this.editor?.state)?.headings ?? []
+				.getState(this.editor.state)?.headings ?? []
 		},
 	},
 }
diff --git a/src/components/Menu/ActionAttachmentUpload.vue b/src/components/Menu/ActionAttachmentUpload.vue
index 0c3f6adb301..1a90baf4c3b 100644
--- a/src/components/Menu/ActionAttachmentUpload.vue
+++ b/src/components/Menu/ActionAttachmentUpload.vue
@@ -60,10 +60,7 @@ import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import { loadState } from '@nextcloud/initial-state'
 import { Loading, Folder, Upload, Plus } from '../icons.js'
-import {
-	useEditorUpload,
-	useSyncServiceMixin,
-} from '../Editor.provider.ts'
+import { useEditorUpload } from '../Editor.provider.ts'
 import { useEditorFlags } from '../../composables/useEditorFlags.ts'
 import { BaseActionEntry } from './BaseActionEntry.js'
 import { useMenuIDMixin } from './MenuBar.provider.js'
@@ -73,6 +70,7 @@ import {
 	useActionChooseLocalAttachmentMixin,
 	useActionCreateAttachmentMixin,
 } from '../Editor/MediaHandler.provider.js'
+import { useSyncService } from '../../composables/useSyncService.ts'
 
 export default {
 	name: 'ActionAttachmentUpload',
@@ -89,7 +87,6 @@ export default {
 	extends: BaseActionEntry,
 	mixins: [
 		useEditorUpload,
-		useSyncServiceMixin,
 		useActionAttachmentPromptMixin,
 		useUploadingStateMixin,
 		useActionChooseLocalAttachmentMixin,
@@ -98,7 +95,8 @@ export default {
 	],
 	setup() {
 		const { isPublic } = useEditorFlags()
-		return { isPublic }
+		const { syncService } = useSyncService()
+		return { ...BaseActionEntry.setup(), isPublic, syncService }
 	},
 	computed: {
 		icon() {
@@ -113,7 +111,7 @@ export default {
 			return loadState('files', 'templates', [])
 		},
 		isUploadDisabled() {
-			return !this.$syncService.hasOwner
+			return !this.syncService.hasOwner
 		},
 		menuTitle() {
 			return this.isUploadDisabled
diff --git a/src/components/Menu/BaseActionEntry.js b/src/components/Menu/BaseActionEntry.js
index 3ac88750823..3b301ae6a95 100644
--- a/src/components/Menu/BaseActionEntry.js
+++ b/src/components/Menu/BaseActionEntry.js
@@ -77,16 +77,16 @@ const BaseActionEntry = {
 	},
 	mounted() {
 		this.$_updateState = debounce(this.updateState.bind(this), 50)
-		this.editor?.on('update', this.$_updateState)
-		this.editor?.on('selectionUpdate', this.$_updateState)
+		this.editor.on('update', this.$_updateState)
+		this.editor.on('selectionUpdate', this.$_updateState)
 		// Initially emit the disabled event to set the state in parent
 		this.$emit('disabled', this.state.disabled)
 		// Initially set the tabindex
 		this.setTabIndexOnButton()
 	},
 	beforeDestroy() {
-		this.editor?.off('update', this.$_updateState)
-		this.editor?.off('selectionUpdate', this.$_updateState)
+		this.editor.off('update', this.$_updateState)
+		this.editor.off('selectionUpdate', this.$_updateState)
 	},
 	methods: {
 		updateState() {
diff --git a/src/components/Menu/CharacterCount.vue b/src/components/Menu/CharacterCount.vue
index b67db8ae65d..0677ec38b15 100644
--- a/src/components/Menu/CharacterCount.vue
+++ b/src/components/Menu/CharacterCount.vue
@@ -31,10 +31,7 @@ export default defineComponent({
 		const { editor } = useEditor()
 		const countString = ref('')
 		const refresh = () => {
-			if (!editor.value) {
-				return
-			}
-			const { storage, state } = editor.value
+			const { storage, state } = editor
 			// characterCount is not reactive so we need this workaround
 			// We also need to provide the doc as storage is a singleton in tiptap v2.
 			// See ueberdosis/tiptap#6060
@@ -45,7 +42,7 @@ export default defineComponent({
 			countString.value = [words, chars].join(', ')
 			console.debug({ wordCount, charCount, countString: countString.value })
 		}
-		return { countString, editor, refresh }
+		return { countString, refresh }
 	},
 	watch: {
 		visible: 'refresh',
diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
index 937cf359c00..f562759f3c2 100644
--- a/src/components/Menu/MenuBar.vue
+++ b/src/components/Menu/MenuBar.vue
@@ -207,9 +207,6 @@ export default {
 			this.displayHelp = false
 		},
 		showTranslate() {
-			if(!this.editor) {
-				return
-			}
 			const { commands, view: { state }} = this.editor
 			const { from, to } = state.selection
 			let selectedText = state.doc.textBetween(from, to, ' ')
diff --git a/src/components/Suggestion/Mention/suggestions.js b/src/components/Suggestion/Mention/suggestions.js
index ddf00fe7f04..4a91a71b896 100644
--- a/src/components/Suggestion/Mention/suggestions.js
+++ b/src/components/Suggestion/Mention/suggestions.js
@@ -3,46 +3,14 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
 import MentionList from './MentionList.vue'
 import createSuggestions from '../suggestions.js'
-import { unref } from 'vue'
+import { emitMention, getUsers } from '../../../apis/Mention.ts'
 
-const USERS_LIST_ENDPOINT_URL = generateUrl('apps/text/api/v1/users')
-
-const emitMention = ({ connection, props }) => {
-	const { documentId, id, token } = unref(connection) ?? {}
-	if (!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: id,
-		sessionToken: token,
-		mention: props.id,
-		scope: window.location,
-	})
-}
-
-export default ({ connection, options } = {}) => createSuggestions({
+export default ({ connection, options }) => createSuggestions({
 	listComponent: MentionList,
 	items: async ({ query }) => {
-		const { documentId, id, token } = unref(connection) ?? {}
-		if (!documentId) {
-			// looks like we're not connected right now.
-			return []
-		}
-		const params = {
-			documentId,
-			sessionId: id,
-			sessionToken: token,
-			filter: query,
-		}
-		const response = await axios.post(USERS_LIST_ENDPOINT_URL, params)
-		const users = JSON.parse(JSON.stringify(response.data))
+		const users = await getUsers(query, { connection })
 		return Object.entries(users).map(([id, label]) => ({ id, label }))
 	},
 
@@ -50,10 +18,7 @@ export default ({ connection, options } = {}) => createSuggestions({
 		if (options?.emitMention) {
 			options.emitMention({ props })
 		} else {
-			emitMention({
-				connection,
-				props,
-			})
+			emitMention(props.id, window.location, { connection })
 		}
 
 		// Insert mention
diff --git a/src/components/SuggestionsBar.vue b/src/components/SuggestionsBar.vue
index 4795903e0a1..36604da1019 100644
--- a/src/components/SuggestionsBar.vue
+++ b/src/components/SuggestionsBar.vue
@@ -61,11 +61,12 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import { Document, Shape, Upload, Table as TableIcon } from '../components/icons.js'
 import { useActionChooseLocalAttachmentMixin } from './Editor/MediaHandler.provider.js'
 import { getLinkWithPicker } from '@nextcloud/vue/dist/Components/NcRichText.js'
-import { useFileMixin, useSyncServiceMixin } from './Editor.provider.ts'
+import { useFileMixin } from './Editor.provider.ts'
 import { useEditor } from '../composables/useEditor.ts'
 import { generateUrl } from '@nextcloud/router'
 import { buildFilePicker } from '../helpers/filePicker.js'
 import { isMobileDevice } from '../helpers/isMobileDevice.js'
+import { useSyncService } from '../composables/useSyncService.ts'
 
 export default {
 	name: 'SuggestionsBar',
@@ -77,13 +78,15 @@ export default {
 		Upload,
 	},
 
-	mixins: [useActionChooseLocalAttachmentMixin, useFileMixin, useSyncServiceMixin],
+	mixins: [useActionChooseLocalAttachmentMixin, useFileMixin],
 
 	setup() {
 		const { editor } = useEditor()
+		const { syncService } = useSyncService()
 		return {
 			editor,
 			isMobileDevice,
+			syncService,
 		}
 	},
 
@@ -99,7 +102,7 @@ export default {
 			return this.$file?.relativePath ?? '/'
 		},
 		isUploadDisabled() {
-			return !this.$syncService.hasOwner
+			return !this.syncService.hasOwner
 		},
 		uploadTitle() {
 			return (
@@ -113,12 +116,12 @@ export default {
 	},
 
 	mounted() {
-		this.editor?.on('update', this.onUpdate)
+		this.editor.on('update', this.onUpdate)
 		this.onUpdate({ editor: this.editor })
 	},
 
 	beforeDestroy() {
-		this.editor?.off('update', this.onUpdate)
+		this.editor.off('update', this.onUpdate)
 	},
 
 	methods: {
@@ -129,8 +132,8 @@ export default {
 		linkPicker() {
 			getLinkWithPicker(null, true)
 				.then((link) => {
-					const chain = this.editor?.chain()
-					if (this.editor?.view.state?.selection.empty) {
+					const chain = this.editor.chain()
+					if (this.editor.view.state.selection.empty) {
 						chain.focus().insertPreview(link).run()
 					} else {
 						chain.setLink({ href: link }).focus().run()
@@ -146,7 +149,7 @@ export default {
 		 * Triggered by the "Insert table" button
 		 */
 		insertTable() {
-			this.editor?.chain().focus().insertTable()?.run()
+			this.editor.chain().focus().insertTable()?.run()
 		},
 
 		/**
@@ -189,7 +192,7 @@ export default {
 		 * @param {string} text Text part of the link
 		 */
 		setLink(url, text) {
-			this.editor?.chain().insertOrSetLink(text, { href: url }).focus().run()
+			this.editor.chain().insertOrSetLink(text, { href: url }).focus().run()
 		},
 
 		onUpdate({ editor }) {
diff --git a/src/composables/useConnection.ts b/src/composables/useConnection.ts
index 21d49e75685..95f2de61e9c 100644
--- a/src/composables/useConnection.ts
+++ b/src/composables/useConnection.ts
@@ -4,27 +4,94 @@
  */
 
 import { inject, provide, shallowRef, type InjectionKey, type ShallowRef } from 'vue'
+import { open } from '../apis/Connect.js'
+import type { Document, Session } from '../services/SyncService.js'
 
 export interface Connection {
-	baseVersionEtag: string
 	documentId: number
 	sessionId: number
 	sessionToken: string
-	filePath?: string
-	token?: string
+	baseVersionEtag: string
+	filePath: string
+	shareToken?: string
+}
+
+export interface InitialData {
+	document: Document
+	session: Session
+	readOnly: boolean
+	content: string
+	documentState?: string
+	lock?: object
+	hasOwner: boolean
 }
 
 export const connectionKey = Symbol('text:connection') as InjectionKey<
 	ShallowRef<Connection | undefined>
 >
 
-export const provideConnection = () => {
+/**
+ * Handle the connection to the text api and provide it to child components
+ * @param props Props of the editor component.
+ * @param props.fileId Fileid of the file.
+ * @param props.relativePath Relative path to the file.
+ * @param props.initialSession Initial session handed to the editor in direct editing
+ * @param props.shareToken Share token of the file.
+ */
+export function provideConnection(props: {
+	fileId: number
+	relativePath: string
+	initialSession?: InitialData
+	shareToken?: string
+}) {
+	const baseVersionEtag = shallowRef<string | undefined>(undefined)
 	const connection = shallowRef<Connection | undefined>(undefined)
+	const openConnection = async () => {
+		const guestName = localStorage.getItem('nick') ?? ''
+		const { connection: opened, data } =
+			openInitialSession(props)
+			|| (await open({
+				fileId: props.fileId,
+				guestName,
+				token: props.shareToken,
+				filePath: props.relativePath,
+				baseVersionEtag: baseVersionEtag.value,
+			}))
+		baseVersionEtag.value = data.document.baseVersionEtag
+		connection.value = opened
+		return data
+	}
 	provide(connectionKey, connection)
-	return { connection }
+	return { connection, openConnection, baseVersionEtag }
 }
 
 export const useConnection = () => {
 	const connection = inject(connectionKey)
 	return { connection }
 }
+
+/**
+ * Get the connection and additional data from the initial session if available.
+ * @param props Props of the editor component
+ * @param props.relativePath Relative path to the file.
+ * @param props.initialSession Initial session handed to the editor in direct editing
+ * @param props.shareToken Share token of the file.
+ */
+function openInitialSession(props: {
+	relativePath: string
+	initialSession?: InitialData
+	shareToken?: string
+}) {
+	if (props.initialSession) {
+		const { document, session } = props.initialSession
+		const connection = {
+			documentId: document.id,
+			sessionId: session.id,
+			sessionToken: session.token,
+			baseVersionEtag: document.baseVersionEtag,
+			filePath: props.relativePath,
+			shareToken: props.shareToken,
+		}
+		return { connection, data: props.initialSession }
+	}
+}
diff --git a/src/composables/useEditor.ts b/src/composables/useEditor.ts
index 26a03cb2971..05f3bd48b97 100644
--- a/src/composables/useEditor.ts
+++ b/src/composables/useEditor.ts
@@ -3,18 +3,17 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { Editor } from '@tiptap/core'
-import { type InjectionKey, type ShallowRef, shallowRef, provide, inject } from 'vue'
+import { Editor } from '@tiptap/core'
+import { type InjectionKey, provide, inject } from 'vue'
 
-export const editorKey = Symbol('tiptap:editor') as InjectionKey<
-	ShallowRef<Editor | undefined>
->
-export const provideEditor = () => {
-	const editor: ShallowRef<Editor | undefined> = shallowRef(undefined)
+export const editorKey = Symbol('tiptap:editor') as InjectionKey<Editor>
+export const provideEditor = (editor: Editor) => {
 	provide(editorKey, editor)
-	return { editor }
 }
 export const useEditor = () => {
-	const editor = inject(editorKey, shallowRef(undefined))
-	return { editor }
+	const editor = inject(editorKey)
+	if (!editor) {
+		throw new Error('Failed to inject Editor')
+	}
+	return { editor: editor as Editor }
 }
diff --git a/src/composables/useEditorFlags.ts b/src/composables/useEditorFlags.ts
index 8994481ee30..cf8ef764449 100644
--- a/src/composables/useEditorFlags.ts
+++ b/src/composables/useEditorFlags.ts
@@ -5,20 +5,12 @@
 
 import { loadState } from '@nextcloud/initial-state'
 import { isPublicShare } from '@nextcloud/sharing/public'
-import {
-	type Ref,
-	type InjectionKey,
-	type ShallowReactive,
-	computed,
-	provide,
-	inject,
-	ref,
-} from 'vue'
+import { type InjectionKey, provide, inject } from 'vue'
 
 export interface EditorFlags {
-	isPublic: Ref<boolean>
-	isRichEditor: Ref<boolean>
-	isRichWorkspace: Ref<boolean>
+	isPublic: boolean
+	isRichEditor: boolean
+	isRichWorkspace: boolean
 }
 interface Props {
 	isDirectEditing: boolean
@@ -26,22 +18,20 @@ interface Props {
 	mime: string
 }
 export const editorFlagsKey = Symbol('editor:flags') as InjectionKey<EditorFlags>
-export const provideEditorFlags = (props: ShallowReactive<Props>) => {
-	const isPublic = computed(() => props.isDirectEditing || isPublicShare())
-	const isRichWorkspace = computed(() => props.richWorkspace ?? false)
-	const isRichEditor = computed(
-		() =>
-			loadState('text', 'rich_editing_enabled', true)
-			&& props.mime === 'text/markdown',
-	)
+export const provideEditorFlags = (props: Props) => {
+	const isPublic = props.isDirectEditing || isPublicShare()
+	const isRichWorkspace = props.richWorkspace ?? false
+	const isRichEditor =
+		loadState('text', 'rich_editing_enabled', true)
+		&& props.mime === 'text/markdown'
 	provide(editorFlagsKey, { isPublic, isRichEditor, isRichWorkspace })
 	return { isPublic, isRichEditor, isRichWorkspace }
 }
 export const useEditorFlags = () => {
 	const { isPublic, isRichEditor, isRichWorkspace } = inject(editorFlagsKey, {
-		isPublic: ref(false),
-		isRichEditor: ref(false),
-		isRichWorkspace: ref(false),
+		isPublic: false,
+		isRichEditor: false,
+		isRichWorkspace: false,
 	})
 	return { isPublic, isRichEditor, isRichWorkspace }
 }
diff --git a/src/composables/useEditorMethods.ts b/src/composables/useEditorMethods.ts
index 45a658e6ab7..bbda8c470ef 100644
--- a/src/composables/useEditorMethods.ts
+++ b/src/composables/useEditorMethods.ts
@@ -5,25 +5,27 @@
 
 import type { Editor } from '@tiptap/core'
 import escapeHtml from 'escape-html'
-import type { ShallowRef } from 'vue'
 import markdownit from '../markdownit/index.js'
+import Markdown from '../extensions/Markdown.js'
 
-export const useEditorMethods = (editor: ShallowRef<Editor | undefined>) => {
+export const useEditorMethods = (editor: Editor) => {
 	const setEditable = (val: boolean) => {
-		if (editor.value && editor.value.isEditable !== val) {
-			editor.value.setEditable(val)
+		if (editor && editor.isEditable !== val) {
+			editor.setEditable(val)
 		}
 	}
 
 	const setContent: (
 		content: string,
-		options: { isRichEditor?: boolean; addToHistory?: boolean },
-	) => void = (content, { isRichEditor, addToHistory = true } = {}) => {
-		const html = isRichEditor
+		options: { addToHistory?: boolean },
+	) => void = (content, { addToHistory = true } = {}) => {
+		const hasMarkdownContent =
+			editor.extensionManager.extensions.includes(Markdown)
+		const html = hasMarkdownContent
 			? markdownit.render(content) + '<p/>'
 			: `<pre>${escapeHtml(content)}</pre>`
-		editor.value
-			?.chain()
+		editor
+			.chain()
 			.setContent(html, addToHistory)
 			.command(({ tr }) => {
 				tr.setMeta('addToHistory', addToHistory)
diff --git a/src/composables/useSaveService.ts b/src/composables/useSaveService.ts
new file mode 100644
index 00000000000..584199c3562
--- /dev/null
+++ b/src/composables/useSaveService.ts
@@ -0,0 +1,31 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { type InjectionKey, provide, inject } from 'vue'
+import { SaveService } from '../services/SaveService.js'
+import type { SyncService } from '../services/SyncService.ts'
+import type { Doc } from 'yjs'
+import { getDocumentState } from '../helpers/yjs.js'
+
+const saveServiceKey = Symbol('text:save') as InjectionKey<SaveService>
+
+export const provideSaveService = (
+	syncService: SyncService,
+	serialize: () => string,
+	ydoc: Doc,
+) => {
+	const saveService = new SaveService({
+		syncService,
+		serialize,
+		getDocumentState: () => getDocumentState(ydoc),
+	})
+	provide(saveServiceKey, saveService)
+	return { saveService }
+}
+
+export const useSaveService = () => {
+	const saveService = inject(saveServiceKey) as SaveService
+	return { saveService }
+}
diff --git a/src/composables/useSyncService.ts b/src/composables/useSyncService.ts
new file mode 100644
index 00000000000..a991b71c6fb
--- /dev/null
+++ b/src/composables/useSyncService.ts
@@ -0,0 +1,32 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { type InjectionKey, type ShallowRef, provide, inject } from 'vue'
+import { SyncService } from '../services/SyncService'
+import type { Connection, InitialData } from './useConnection.js'
+
+const syncServiceKey = Symbol('text:sync') as InjectionKey<SyncService>
+
+/**
+ * Define a sync service and provide it to child components
+ * @param connection Connection to the text api.
+ * @param openConnection Function to open the connection.
+ */
+export function provideSyncService(
+	connection: ShallowRef<Connection>,
+	openConnection: () => Promise<InitialData>,
+) {
+	const syncService = new SyncService({
+		connection,
+		openConnection,
+	})
+	provide(syncServiceKey, syncService)
+	return { syncService }
+}
+
+export const useSyncService = () => {
+	const syncService = inject(syncServiceKey) as SyncService
+	return { syncService }
+}
diff --git a/src/composables/useSyntaxHighlighting.ts b/src/composables/useSyntaxHighlighting.ts
index 7f96f63d559..7e176c77cfc 100644
--- a/src/composables/useSyntaxHighlighting.ts
+++ b/src/composables/useSyntaxHighlighting.ts
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { Ref } from 'vue'
 import { extensionHighlight } from '../helpers/mappings'
 import { loadSyntaxHighlight } from '../EditorFactory.js'
 
@@ -14,13 +13,13 @@ import { loadSyntaxHighlight } from '../EditorFactory.js'
  * @param props.relativePath Relative path to the file.
  */
 export function useSyntaxHighlighting(
-	isRichEditor: Ref<boolean>,
-	props: { relativePath: Ref<string> },
+	isRichEditor: boolean,
+	props: { relativePath: string },
 ) {
-	if (isRichEditor.value) {
+	if (isRichEditor) {
 		return { language: 'md', lowlightLoaded: Promise.resolve() }
 	}
-	const filename = props.relativePath.value?.split('/').pop()
+	const filename = props.relativePath.split('/').pop()
 	const extension = filename?.split('.').pop() ?? 'txt'
 	const language = extensionHighlight[extension] || extension
 	const lowlightLoaded = loadSyntaxHighlight(language)
diff --git a/src/extensions/RichText.js b/src/extensions/RichText.js
index eadaeb0f0ca..1d9d3a99f85 100644
--- a/src/extensions/RichText.js
+++ b/src/extensions/RichText.js
@@ -32,8 +32,6 @@ import LinkBubble from './../extensions/LinkBubble.js'
 import LinkPicker from './../extensions/LinkPicker.js'
 import ListItem from '@tiptap/extension-list-item'
 import Markdown from './../extensions/Markdown.js'
-import Mention from './../extensions/Mention.js'
-import MentionSuggestion from '../components/Suggestion/Mention/suggestions.js'
 import OrderedList from './../nodes/OrderedList.js'
 import Paragraph from './../nodes/Paragraph.js'
 import Preview from './../nodes/Preview.js'
@@ -58,7 +56,6 @@ export default Extension.create({
 		return {
 			editing: true,
 			extensions: [],
-			component: null,
 			relativePath: null,
 			isEmbedded: false,
 		}
@@ -102,9 +99,6 @@ export default Extension.create({
 			KeepSyntax,
 			Keymap,
 			FrontMatter,
-			Mention.configure({
-				suggestion: MentionSuggestion(),
-			}),
 			Search,
 			Emoji.configure({
 				suggestion: EmojiSuggestion(),
diff --git a/src/helpers/yjs.js b/src/helpers/yjs.js
index 8986ffd6d00..85c65e0e1ac 100644
--- a/src/helpers/yjs.js
+++ b/src/helpers/yjs.js
@@ -39,7 +39,7 @@ export function applyDocumentState(ydoc, documentState, origin) {
  * and encode it and wrap it in a step data structure.
  *
  * @param {string} documentState - base64 encoded doc state
- * @return {string} base64 encoded yjs sync protocol update message
+ * @return {{step: string}} base64 encoded yjs sync protocol update message
  */
 export function documentStateToStep(documentState) {
 	const message = documentStateToUpdateMessage(documentState)
diff --git a/src/services/PollingBackend.js b/src/services/PollingBackend.js
index 75c3b5b53f3..43273d8574e 100644
--- a/src/services/PollingBackend.js
+++ b/src/services/PollingBackend.js
@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import { logger } from '../helpers/logger.js'
-import { SyncService, ERROR_TYPE } from './SyncService.js'
-import { Connection } from './SessionApi.js'
+import { SyncService, ERROR_TYPE } from './SyncService.ts'
+import { SessionConnection } from './SessionConnection.js'
 import getNotifyBus from './NotifyService.js'
 
 /**
@@ -56,7 +56,7 @@ const COLLABORATOR_DISCONNECT_TIME = FETCH_INTERVAL_INVISIBLE * 1.5
 class PollingBackend {
 	/** @type {SyncService} */
 	#syncService
-	/** @type {Connection} */
+	/** @type {SessionConnection} */
 	#connection
 
 	#lastPoll
diff --git a/src/services/SaveService.ts b/src/services/SaveService.ts
new file mode 100644
index 00000000000..b640d99b043
--- /dev/null
+++ b/src/services/SaveService.ts
@@ -0,0 +1,105 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/* eslint-disable jsdoc/valid-types */
+
+import debounce from 'debounce'
+
+import { logger } from '../helpers/logger.js'
+import type { SyncService } from './SyncService.js'
+
+/**
+ * Interval to save the serialized document and the document state
+ *
+ * @type {number} time in ms
+ */
+const AUTOSAVE_INTERVAL = 30000
+
+class SaveService {
+	syncService
+	serialize
+	getDocumentState
+	autosave
+
+	constructor({
+		syncService,
+		serialize,
+		getDocumentState,
+	}: {
+		syncService: SyncService
+		serialize: () => string
+		getDocumentState: () => string
+	}) {
+		this.syncService = syncService
+		this.serialize = serialize
+		this.getDocumentState = getDocumentState
+		this.autosave = debounce(this._autosave.bind(this), AUTOSAVE_INTERVAL)
+		this.syncService.on('close', () => {
+			this.autosave.clear()
+		})
+	}
+
+	get connection() {
+		return this.syncService.sessionConnection
+	}
+
+	get version() {
+		return this.syncService.version
+	}
+
+	get emit() {
+		return this.syncService.emit.bind(this.syncService)
+	}
+
+	_getContent() {
+		return this.serialize()
+	}
+
+	async save({ force = false, manualSave = true } = {}) {
+		logger.debug('[SaveService] saving', { force, manualSave })
+		if (!this.connection) {
+			logger.warn('Could not save due to missing connection')
+			return
+		}
+		try {
+			const response = await this.connection.save({
+				version: this.version,
+				autosaveContent: this._getContent(),
+				documentState: this.getDocumentState(),
+				force,
+				manualSave,
+			})
+			this.emit('stateChange', { dirty: false })
+			logger.debug('[SaveService] saved', { response })
+			this.emit('save', response.data)
+			this.autosave.clear()
+		} catch (e) {
+			logger.error('Failed to save document.', { error: e })
+			throw e
+		}
+	}
+
+	saveViaSendBeacon() {
+		this.connection?.saveViaSendBeacon({
+			version: this.version,
+			autosaveContent: this._getContent(),
+			documentState: this.getDocumentState(),
+			force: false,
+			manualSave: true,
+		}) && logger.debug('[SaveService] saved using sendBeacon')
+	}
+
+	forceSave() {
+		return this.save({ force: true })
+	}
+
+	_autosave() {
+		return this.save({ manualSave: false }).catch((error) => {
+			logger.error('Failed to autosave document.', { error })
+		})
+	}
+}
+
+export { SaveService }
diff --git a/src/services/SessionApi.js b/src/services/SessionConnection.js
similarity index 75%
rename from src/services/SessionApi.js
rename to src/services/SessionConnection.js
index 949133c4eba..1a83cfdad70 100644
--- a/src/services/SessionApi.js
+++ b/src/services/SessionConnection.js
@@ -15,43 +15,18 @@ export class ConnectionClosedError extends Error {
 	}
 }
 
-class SessionApi {
-	#options
-
-	constructor(options = {}) {
-		this.#options = options
-	}
-
-	open({ fileId, baseVersionEtag }) {
-		return axios
-			.put(this.#url(`session/${fileId}/create`), {
-				fileId,
-				baseVersionEtag,
-				filePath: this.#options.filePath,
-				token: this.#options.shareToken,
-				guestName: this.#options.guestName,
-			})
-			.then((response) => new Connection(response, this.#options))
-	}
-
-	#url(endpoint) {
-		const isPublic = !!this.#options.shareToken
-		return _endpointUrl(endpoint, isPublic)
-	}
-}
-
-export class Connection {
+export class SessionConnection {
 	#content
-	#closed
+	closed
 	#documentState
 	#document
 	#session
 	#lock
 	#readOnly
 	#hasOwner
-	#options
+	connection
 
-	constructor(response, options) {
+	constructor(data, connection) {
 		const {
 			document,
 			session,
@@ -60,16 +35,16 @@ export class Connection {
 			content,
 			documentState,
 			hasOwner,
-		} = response.data
+		} = data
 		this.#document = document
 		this.#session = session
 		this.#lock = lock
 		this.#readOnly = readOnly
 		this.#content = content
 		this.#documentState = documentState
-		this.#options = options
 		this.#hasOwner = hasOwner
-		this.isPublic = !!options.shareToken
+		this.connection = connection
+		this.isPublic = !!connection.shareToken
 		this.closed = false
 	}
 
@@ -107,14 +82,14 @@ export class Connection {
 			documentId: this.#document.id,
 			sessionId: this.#session.id,
 			sessionToken: this.#session.token,
-			token: this.#options.shareToken,
+			token: this.connection.shareToken,
 		}
 	}
 
 	sync({ version }) {
 		return this.#post(this.#url(`session/${this.#document.id}/sync`), {
 			...this.#defaultParams,
-			filePath: this.#options.filePath,
+			filePath: this.connection.filePath,
 			baseVersionEtag: this.#document.baseVersionEtag,
 			version,
 		})
@@ -124,7 +99,7 @@ export class Connection {
 		const url = this.#url(`session/${this.#document.id}/save`)
 		const postData = {
 			...this.#defaultParams,
-			filePath: this.#options.filePath,
+			filePath: this.connection.filePath,
 			baseVersionEtag: this.#document.baseVersionEtag,
 			...data,
 		}
@@ -136,7 +111,7 @@ export class Connection {
 		const url = this.#url(`session/${this.#document.id}/save`)
 		const postData = {
 			...this.#defaultParams,
-			filePath: this.#options.filePath,
+			filePath: this.connection.filePath,
 			baseVersionEtag: this.#document.baseVersionEtag,
 			...data,
 			requestToken: getRequestToken() ?? '',
@@ -148,17 +123,6 @@ export class Connection {
 		return navigator.sendBeacon(url, blob)
 	}
 
-	push({ steps, version, awareness }) {
-		return this.#post(this.#url(`session/${this.#document.id}/push`), {
-			...this.#defaultParams,
-			filePath: this.#options.filePath,
-			baseVersionEtag: this.#document.baseVersionEtag,
-			steps,
-			version,
-			awareness,
-		})
-	}
-
 	// TODO: maybe return a new connection here so connections have immutable state
 	update(guestName) {
 		return this.#post(this.#url(`session/${this.#document.id}/session`), {
@@ -181,7 +145,7 @@ export class Connection {
 			+ '&sessionToken='
 			+ encodeURIComponent(this.#session.token)
 			+ '&token='
-			+ encodeURIComponent(this.#options.shareToken || '')
+			+ encodeURIComponent(this.connection.shareToken || '')
 		return this.#post(url, formData, {
 			headers: {
 				'Content-Type': 'multipart/form-data',
@@ -208,12 +172,7 @@ export class Connection {
 	}
 
 	close() {
-		return this.#post(
-			this.#url(`session/${this.#document.id}/close`),
-			this.#defaultParams,
-		).then(() => {
-			this.closed = true
-		})
+		this.closed = true
 	}
 
 	// To be used in Cypress tests only
@@ -246,5 +205,3 @@ function _endpointUrl(endpoint, isPublic = false) {
 	}
 	return `${_baseUrl}/${endpoint}`
 }
-
-export default SessionApi
diff --git a/src/services/SyncService.d.ts b/src/services/SyncService.d.ts
deleted file mode 100644
index 29a725849ce..00000000000
--- a/src/services/SyncService.d.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-export declare type EventTypes = {
-	/* Document state */
-	opened: unknown
-	loaded: unknown
-
-	/* All initial steps fetched */
-	fetched: unknown
-
-	/* received new steps */
-	sync: unknown
-
-	/* state changed (dirty) */
-	stateChange: unknown
-
-	/* error */
-	error: unknown
-
-	/* Events for session and document meta data */
-	change: unknown
-
-	/* Emitted after successful save */
-	save: unknown
-
-	/* Emitted once a document becomes idle */
-	idle: unknown
-}
diff --git a/src/services/SyncService.js b/src/services/SyncService.js
deleted file mode 100644
index 2012f6cce03..00000000000
--- a/src/services/SyncService.js
+++ /dev/null
@@ -1,408 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-/* eslint-disable jsdoc/valid-types */
-
-import mitt from 'mitt'
-import debounce from 'debounce'
-
-import PollingBackend from './PollingBackend.js'
-import Outbox from './Outbox.ts'
-import { Connection } from './SessionApi.js'
-import { documentStateToStep } from '../helpers/yjs.js'
-import { logger } from '../helpers/logger.js'
-
-/**
- * Timeout after which the editor will consider a document without changes being synced as idle
- * The session will be terminated and the document will stay open in read-only mode with a button to reconnect if needed
- *
- * @type {number}
- */
-const IDLE_TIMEOUT = 1440
-
-/**
- * Interval to save the serialized document and the document state
- *
- * @type {number} time in ms
- */
-const AUTOSAVE_INTERVAL = 30000
-
-const COLLABORATOR_IDLE_TIME = 60
-
-const COLLABORATOR_DISCONNECT_TIME = 90
-
-const ERROR_TYPE = {
-	/**
-	 * Failed to save collaborative document due to external change
-	 * collission needs to be resolved manually
-	 */
-	SAVE_COLLISSION: 0,
-	/**
-	 * Failed to push changes for MAX_REBASE_RETRY times
-	 */
-	PUSH_FAILURE: 1,
-
-	LOAD_ERROR: 2,
-
-	CONNECTION_FAILED: 3,
-
-	SOURCE_NOT_FOUND: 4,
-
-	PUSH_FORBIDDEN: 5,
-}
-
-class SyncService {
-	#sendIntervalId
-	#connection
-	#outbox = new Outbox()
-
-	constructor({ baseVersionEtag, serialize, getDocumentState, api }) {
-		/** @type {import('mitt').Emitter<import('./SyncService').EventTypes>} _bus */
-		this._bus = mitt()
-
-		this.serialize = serialize
-		this.getDocumentState = getDocumentState
-		this._api = api
-		this.#connection = null
-
-		this.stepClientIDs = []
-
-		this.lastStepPush = Date.now()
-
-		this.version = null
-		this.baseVersionEtag = baseVersionEtag
-		this.sending = false
-		this.#sendIntervalId = null
-
-		this.autosave = debounce(this._autosave.bind(this), AUTOSAVE_INTERVAL)
-
-		this.pushError = 0
-
-		return this
-	}
-
-	get isReadOnly() {
-		return this.#connection.state.document.readOnly
-	}
-
-	get hasOwner() {
-		return this.#connection?.hasOwner
-	}
-
-	get guestName() {
-		return this.#connection.session.guestName
-	}
-
-	get hasActiveConnection() {
-		return this.#connection && !this.#connection.isClosed
-	}
-
-	get connectionState() {
-		if (!this.#connection || this.version === undefined) {
-			return null
-		}
-		return {
-			...this.#connection.state,
-			version: this.version,
-		}
-	}
-
-	async open({ fileId, initialSession }) {
-		if (this.hasActiveConnection) {
-			return this.connectionState
-		}
-		const connect = initialSession
-			? Promise.resolve(new Connection({ data: initialSession }, {}))
-			: this._api
-					.open({ fileId, baseVersionEtag: this.baseVersionEtag })
-					.catch((error) => this._emitError(error))
-		this.#connection = await connect
-		if (!this.#connection) {
-			// Error was already emitted in connect
-			return null
-		}
-		this.backend = new PollingBackend(this, this.#connection)
-		this.version = this.#connection.docStateVersion
-		this.baseVersionEtag = this.#connection.document.baseVersionEtag
-		this.emit('opened', this.connectionState)
-		this.emit('loaded', this.connectionState)
-
-		return this.connectionState
-	}
-
-	startSync() {
-		this.backend.connect()
-	}
-
-	syncUp() {
-		this.backend.resetRefetchTimer()
-	}
-
-	_emitError(error) {
-		if (!error.response || error.code === 'ECONNABORTED') {
-			this.emit('error', { type: ERROR_TYPE.CONNECTION_FAILED, data: {} })
-		} else {
-			this.emit('error', { type: ERROR_TYPE.LOAD_ERROR, data: error.response })
-		}
-	}
-
-	updateSession(guestName) {
-		if (!this.#connection.isPublic) {
-			return Promise.reject(new Error())
-		}
-		return this.#connection.update(guestName).catch((error) => {
-			logger.error('Failed to update the session', { error })
-			return Promise.reject(error)
-		})
-	}
-
-	sendStep(step) {
-		this.#outbox.storeStep(step)
-		this.sendSteps()
-	}
-
-	sendSteps() {
-		// If already waiting to send, do nothing.
-		if (this.#sendIntervalId) {
-			return
-		}
-		this.#sendIntervalId = setInterval(() => {
-			if (this.#connection && !this.sending) {
-				this.sendStepsNow().catch((err) => logger.error(err))
-			}
-		}, 200)
-	}
-
-	async sendStepsNow() {
-		this.sending = true
-		clearInterval(this.#sendIntervalId)
-		this.#sendIntervalId = null
-		const sendable = this.#outbox.getDataToSend()
-		if (sendable.steps.length > 0) {
-			this.emit('stateChange', { dirty: true })
-		}
-		if (!this.hasActiveConnection) {
-			return
-		}
-		return this.#connection
-			.push({ ...sendable, version: this.version })
-			.then((response) => {
-				this.#outbox.clearSentData(sendable)
-				const { steps, documentState } = response.data
-				if (documentState) {
-					const documentStateStep = documentStateToStep(documentState)
-					this.emit('sync', {
-						version: this.version,
-						steps: [documentStateStep],
-						document: this.#connection.document,
-					})
-				}
-				this.pushError = 0
-				this.sending = false
-				if (steps?.length > 0) {
-					this.receiveSteps({ steps })
-				}
-			})
-			.catch((err) => {
-				const { response, code } = err
-				this.sending = false
-				this.pushError++
-				logger.error('Failed to push the steps to the server', err)
-				if (!response || code === 'ECONNABORTED') {
-					this.emit('error', {
-						type: ERROR_TYPE.CONNECTION_FAILED,
-						data: {},
-					})
-				}
-				if (response?.status === 412) {
-					this.emit('error', {
-						type: ERROR_TYPE.LOAD_ERROR,
-						data: response,
-					})
-				} else if (response?.status === 403) {
-					// TODO: is this really about sendable?
-					if (!sendable.document) {
-						// either the session is invalid or the document is read only.
-						logger.error('failed to write to document - not allowed')
-						this.emit('error', {
-							type: ERROR_TYPE.PUSH_FORBIDDEN,
-							data: {},
-						})
-					}
-					// TODO: does response.data ever have a document? maybe for errors?
-					// TODO: `currentVersion` is always 0 nowadays. Check if this is still needed.
-					// Only emit conflict event if we have synced until the latest version
-					if (response.data.document?.currentVersion === this.version) {
-						this.emit('error', {
-							type: ERROR_TYPE.PUSH_FAILURE,
-							data: {},
-						})
-						OC.Notification.showTemporary(
-							'Changes could not be sent yet',
-						)
-					}
-				} else {
-					this.emit('error', { type: ERROR_TYPE.PUSH_FAILURE, data: {} })
-				}
-				throw new Error('Failed to apply steps. Retry!', { cause: err })
-			})
-	}
-
-	receiveSteps({ steps, document = null, sessions = [] }) {
-		const awareness = sessions
-			.filter(
-				(s) =>
-					s.lastContact
-					> Math.floor(Date.now() / 1000) - COLLABORATOR_DISCONNECT_TIME,
-			)
-			.filter((s) => s.lastAwarenessMessage)
-			.map((s) => {
-				return { step: s.lastAwarenessMessage, clientId: s.clientId }
-			})
-		const newSteps = [...awareness]
-		for (let i = 0; i < steps.length; i++) {
-			const singleSteps = steps[i].data
-			if (this.version < steps[i].version) {
-				this.version = steps[i].version
-			}
-			if (!Array.isArray(singleSteps)) {
-				logger.error('Invalid step data, skipping step', { step: steps[i] })
-				// TODO: recover
-				continue
-			}
-			singleSteps.forEach((step) => {
-				newSteps.push({
-					step,
-					clientID: steps[i].sessionId,
-				})
-			})
-		}
-		this.lastStepPush = Date.now()
-		this.emit('sync', {
-			steps: newSteps,
-			document,
-			version: this.version,
-		})
-	}
-
-	checkIdle() {
-		const lastPushMinutesAgo = (Date.now() - this.lastStepPush) / 1000 / 60
-		if (lastPushMinutesAgo > IDLE_TIMEOUT) {
-			logger.debug(
-				`[SyncService] Document is idle for ${this.IDLE_TIMEOUT} minutes, suspending connection`,
-			)
-			this.emit('idle')
-			return true
-		}
-		return false
-	}
-
-	_getContent() {
-		return this.serialize()
-	}
-
-	async save({ force = false, manualSave = true } = {}) {
-		logger.debug('[SyncService] saving', arguments[0])
-		try {
-			const response = await this.#connection.save({
-				version: this.version,
-				autosaveContent: this._getContent(),
-				documentState: this.getDocumentState(),
-				force,
-				manualSave,
-			})
-			this.emit('stateChange', { dirty: false })
-			this.#connection.document.lastSavedVersionTime = Date.now() / 1000
-			logger.debug('[SyncService] saved', response)
-			const { document, sessions } = response.data
-			this.emit('save', { document, sessions })
-			this.autosave.clear()
-		} catch (e) {
-			logger.error('Failed to save document.', { error: e })
-			throw e
-		}
-	}
-
-	saveViaSendBeacon() {
-		this.#connection.saveViaSendBeacon({
-			version: this.version,
-			autosaveContent: this._getContent(),
-			documentState: this.getDocumentState(),
-			force: false,
-			manualSave: true,
-		})
-		logger.debug('[SyncService] saved using sendBeacon')
-	}
-
-	forceSave() {
-		return this.save({ force: true })
-	}
-
-	_autosave() {
-		return this.save({ manualSave: false }).catch((error) => {
-			logger.error('Failed to autosave document.', { error })
-		})
-	}
-
-	async sendRemainingSteps() {
-		if (!this.#outbox.hasUpdate) {
-			return
-		}
-		logger.debug('sending final steps')
-		return this.sendStepsNow().catch((err) => logger.error(err))
-	}
-
-	async close() {
-		// Make sure to leave no pending requests behind.
-		this.autosave.clear()
-		this.backend?.disconnect()
-		if (!this.hasActiveConnection) {
-			return
-		}
-		return (
-			this.#connection
-				.close()
-				// Log and ignore possible network issues.
-				.catch((e) => {
-					logger.info('Failed to close connection.', { e })
-				})
-		)
-	}
-
-	uploadAttachment(file) {
-		return this.#connection.uploadAttachment(file)
-	}
-
-	insertAttachmentFile(filePath) {
-		return this.#connection.insertAttachmentFile(filePath)
-	}
-
-	createAttachment(template) {
-		return this.#connection.createAttachment(template)
-	}
-
-	on(event, callback) {
-		this._bus.on(event, callback)
-		return this
-	}
-
-	off(event, callback) {
-		this._bus.off(event, callback)
-		return this
-	}
-
-	emit(event, data) {
-		this._bus.emit(event, data)
-	}
-}
-
-export default SyncService
-export {
-	SyncService,
-	ERROR_TYPE,
-	IDLE_TIMEOUT,
-	COLLABORATOR_IDLE_TIME,
-	COLLABORATOR_DISCONNECT_TIME,
-}
diff --git a/src/services/SyncService.ts b/src/services/SyncService.ts
new file mode 100644
index 00000000000..3bc3dade582
--- /dev/null
+++ b/src/services/SyncService.ts
@@ -0,0 +1,408 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/* eslint-disable jsdoc/valid-types */
+
+import mitt, { type Handler } from 'mitt'
+
+import PollingBackend from './PollingBackend.js'
+import Outbox from './Outbox.js'
+import { SessionConnection } from './SessionConnection.js'
+import { documentStateToStep } from '../helpers/yjs.js'
+import { logger } from '../helpers/logger.js'
+import type { ShallowRef } from 'vue'
+import type { Connection } from '../composables/useConnection.js'
+import { close, type OpenData } from '../apis/Connect.js'
+import { push } from '../apis/Sync.js'
+
+/**
+ * Timeout after which the editor will consider a document without changes being synced as idle
+ * The session will be terminated and the document will stay open in read-only mode with a button to reconnect if needed
+ *
+ * @type {number}
+ */
+const IDLE_TIMEOUT = 1440
+
+const COLLABORATOR_IDLE_TIME = 60
+
+const COLLABORATOR_DISCONNECT_TIME = 90
+
+const ERROR_TYPE = {
+	/**
+	 * Failed to save collaborative document due to external change
+	 * collission needs to be resolved manually
+	 */
+	SAVE_COLLISSION: 0,
+	/**
+	 * Failed to push changes for MAX_REBASE_RETRY times
+	 */
+	PUSH_FAILURE: 1,
+
+	LOAD_ERROR: 2,
+
+	CONNECTION_FAILED: 3,
+
+	SOURCE_NOT_FOUND: 4,
+
+	PUSH_FORBIDDEN: 5,
+}
+
+/*
+ * Step as what we expect to be returned from the server right now.
+ */
+export interface Step {
+	data: string[]
+	version: number
+	sessionId: number
+}
+
+export interface Session {
+	id: number
+	userId: string
+	token: string
+	color: string
+	lastAwarenessMessage: string
+	lastContact: number
+	guestName?: string
+	documentId: number
+	displayName: string
+}
+
+export interface Document {
+	id: number
+	lastSavedVersion: number
+	lastSavedVersionTime: number
+	baseVersionEtag: string
+	initialVersion: number
+}
+
+export declare type EventTypes = {
+	/* Document state */
+	opened: {
+		document: Document
+		session: Session
+		documentSource: string
+		documentState: string
+	}
+
+	/* All initial steps fetched */
+	fetched: unknown
+
+	/* received new steps */
+	sync: unknown
+
+	/* state changed (dirty) */
+	stateChange: unknown
+
+	/* error */
+	error: unknown
+
+	/* Events for session and document meta data */
+	change: unknown
+
+	/* Emitted after successful save */
+	save: unknown
+
+	/* Emitted once a document becomes idle */
+	idle: unknown
+
+	/* Emitted if the connection has been closed */
+	close: void
+}
+
+class SyncService {
+	connection: ShallowRef<Connection | undefined>
+	sessionConnection?: SessionConnection
+	version = -1
+	pushError = 0
+	backend?: PollingBackend
+	#sendIntervalId?: NodeJS.Timeout
+	#outbox = new Outbox()
+	bus = mitt<EventTypes>()
+	#openConnection: () => Promise<OpenData>
+	#lastStepPush = Date.now()
+	#sending = false
+
+	constructor({
+		connection,
+		openConnection,
+	}: {
+		connection: ShallowRef<Connection | undefined>
+		openConnection: () => Promise<OpenData>
+	}) {
+		this.connection = connection
+		this.#openConnection = openConnection
+	}
+
+	get isReadOnly() {
+		return this.sessionConnection?.state.document.readOnly
+	}
+
+	get hasOwner() {
+		return this.sessionConnection?.hasOwner
+	}
+
+	get guestName() {
+		return this.sessionConnection?.session.guestName
+	}
+
+	hasActiveConnection(): this is {
+		sessionConnection: SessionConnection
+		connection: ShallowRef<Connection>
+	} {
+		return !!this.sessionConnection && !this.sessionConnection.isClosed
+	}
+
+	async open() {
+		if (this.hasActiveConnection()) {
+			return
+		}
+		const data = await this.#openConnection().catch((e) => this._emitError(e))
+		if (!data) {
+			// Error was already emitted above
+			return
+		}
+		this.sessionConnection = new SessionConnection(data, this.connection.value)
+		this.backend = new PollingBackend(this, this.sessionConnection)
+		this.version = this.sessionConnection.docStateVersion
+		this.emit('opened', this.sessionConnection.state)
+	}
+
+	startSync() {
+		this.backend?.connect()
+	}
+
+	syncUp() {
+		this.backend?.resetRefetchTimer()
+	}
+
+	_emitError(error: { response?: object; code?: string }) {
+		if (!error.response || error.code === 'ECONNABORTED') {
+			this.emit('error', { type: ERROR_TYPE.CONNECTION_FAILED, data: {} })
+		} else {
+			this.emit('error', { type: ERROR_TYPE.LOAD_ERROR, data: error.response })
+		}
+	}
+
+	updateSession(guestName: string) {
+		if (!this.sessionConnection?.isPublic) {
+			return Promise.reject(new Error())
+		}
+		return this.sessionConnection.update(guestName).catch((error) => {
+			logger.error('Failed to update the session', { error })
+			return Promise.reject(error)
+		})
+	}
+
+	sendStep(step: ArrayBuffer) {
+		this.#outbox.storeStep(step)
+		this.sendSteps()
+	}
+
+	sendSteps() {
+		// If already waiting to send, do nothing.
+		if (this.#sendIntervalId) {
+			return
+		}
+		this.#sendIntervalId = setInterval(() => {
+			if (this.sessionConnection && !this.#sending) {
+				this.sendStepsNow().catch((err) => logger.error(err))
+			}
+		}, 200)
+	}
+
+	async sendStepsNow() {
+		this.#sending = true
+		clearInterval(this.#sendIntervalId)
+		this.#sendIntervalId = undefined
+		const sendable = this.#outbox.getDataToSend()
+		if (sendable.steps.length > 0) {
+			this.emit('stateChange', { dirty: true })
+		}
+		if (!this.hasActiveConnection()) {
+			return
+		}
+		return push(this.connection, {
+			version: this.version,
+			...sendable,
+		})
+			.then((response) => {
+				this.#outbox.clearSentData(sendable)
+				const { steps, documentState } = response.data as {
+					steps: Step[]
+					documentState: string
+				}
+				if (documentState) {
+					const documentStateStep = documentStateToStep(documentState)
+					this.emit('sync', {
+						version: this.version,
+						steps: [documentStateStep],
+						document: this.sessionConnection.document,
+					})
+				}
+				this.pushError = 0
+				this.#sending = false
+				if (steps?.length > 0) {
+					this.receiveSteps({ steps })
+				}
+			})
+			.catch((err) => {
+				const { response, code } = err
+				this.#sending = false
+				this.pushError++
+				logger.error('Failed to push the steps to the server', err)
+				if (!response || code === 'ECONNABORTED') {
+					this.emit('error', {
+						type: ERROR_TYPE.CONNECTION_FAILED,
+						data: {},
+					})
+				}
+				if (response?.status === 412) {
+					this.emit('error', {
+						type: ERROR_TYPE.LOAD_ERROR,
+						data: response,
+					})
+				} else if (response?.status === 403) {
+					// either the session is invalid or the document is read only.
+					logger.error('failed to write to document - not allowed')
+					this.emit('error', {
+						type: ERROR_TYPE.PUSH_FORBIDDEN,
+						data: {},
+					})
+				} else {
+					this.emit('error', { type: ERROR_TYPE.PUSH_FAILURE, data: {} })
+				}
+				throw new Error('Failed to apply steps. Retry!', { cause: err })
+			})
+	}
+
+	receiveSteps({
+		steps,
+		document,
+		sessions = [],
+	}: {
+		steps: { data: string[]; version: number; sessionId: number }[]
+		document?: object
+		sessions?: {
+			lastContact: number
+			lastAwarenessMessage: string
+			clientId: number
+		}[]
+	}) {
+		const awareness = sessions
+			.filter(
+				(s) =>
+					s.lastContact
+					> Math.floor(Date.now() / 1000) - COLLABORATOR_DISCONNECT_TIME,
+			)
+			.filter((s) => s.lastAwarenessMessage)
+			.map((s) => {
+				return { step: s.lastAwarenessMessage, clientId: s.clientId }
+			})
+		const newSteps = [...awareness]
+		for (let i = 0; i < steps.length; i++) {
+			const singleSteps = steps[i].data
+			if (this.version < steps[i].version) {
+				this.version = steps[i].version
+			}
+			if (!Array.isArray(singleSteps)) {
+				logger.error('Invalid step data, skipping step', { step: steps[i] })
+				// TODO: recover
+				continue
+			}
+			singleSteps.forEach((step) => {
+				newSteps.push({
+					step,
+					clientId: steps[i].sessionId,
+				})
+			})
+		}
+		this.#lastStepPush = Date.now()
+		this.emit('sync', {
+			steps: newSteps,
+			document,
+			version: this.version,
+		})
+	}
+
+	checkIdle() {
+		const lastPushMinutesAgo = (Date.now() - this.#lastStepPush) / 1000 / 60
+		if (lastPushMinutesAgo > IDLE_TIMEOUT) {
+			logger.debug(
+				`[SyncService] Document is idle for ${IDLE_TIMEOUT} minutes, suspending connection`,
+			)
+			this.emit('idle')
+			return true
+		}
+		return false
+	}
+
+	async sendRemainingSteps() {
+		if (!this.#outbox.hasUpdate) {
+			return
+		}
+		logger.debug('sending final steps')
+		return this.sendStepsNow().catch((err) => logger.error(err))
+	}
+
+	async close() {
+		this.backend?.disconnect()
+		if (this.connection.value) {
+			close(this.connection.value)
+				// Log and ignore possible network issues.
+				.catch((e) => {
+					logger.info('Failed to close connection.', { e })
+				})
+		}
+		// Mark sessionConnection closed so hasActiveConnection turns false and we can reconnect.
+		this.sessionConnection?.close()
+		this.emit('close')
+	}
+
+	uploadAttachment(file: object) {
+		if (!this.hasActiveConnection()) {
+			throw new Error('Not connected to server.')
+		}
+		return this.sessionConnection.uploadAttachment(file)
+	}
+
+	insertAttachmentFile(filePath: string) {
+		if (!this.hasActiveConnection()) {
+			throw new Error('Not connected to server.')
+		}
+		return this.sessionConnection.insertAttachmentFile(filePath)
+	}
+
+	createAttachment(template: object) {
+		if (!this.hasActiveConnection()) {
+			throw new Error('Not connected to server.')
+		}
+		return this.sessionConnection.createAttachment(template)
+	}
+
+	// For better typing use the bus directly: `syncService.bus.on()`.
+	on(event: keyof EventTypes, callback: Handler<unknown>) {
+		this.bus.on(event, callback)
+		return this
+	}
+
+	off(event: keyof EventTypes, callback: Handler<unknown>) {
+		this.bus.off(event, callback)
+		return this
+	}
+
+	emit(event: keyof EventTypes, data?: unknown) {
+		this.bus.emit(event, data)
+	}
+}
+
+export default SyncService
+export {
+	SyncService,
+	ERROR_TYPE,
+	IDLE_TIMEOUT,
+	COLLABORATOR_IDLE_TIME,
+	COLLABORATOR_DISCONNECT_TIME,
+}
diff --git a/src/services/WebSocketPolyfill.js b/src/services/WebSocketPolyfill.js
index afd0965323c..047914aaf28 100644
--- a/src/services/WebSocketPolyfill.js
+++ b/src/services/WebSocketPolyfill.js
@@ -45,7 +45,7 @@ export default function initWebSocketPolyfill(syncService, fileId, initialSessio
 				},
 			})
 
-			syncService.open({ fileId, initialSession }).then((data) => {
+			syncService.open({ fileId, initialSession }).then(() => {
 				if (syncService.hasActiveConnection) {
 					this.onopen?.()
 				}
diff --git a/src/tests/components/Editor/TableOfContents.spec.js b/src/tests/components/Editor/TableOfContents.spec.js
index 6baccea389f..948a405f902 100644
--- a/src/tests/components/Editor/TableOfContents.spec.js
+++ b/src/tests/components/Editor/TableOfContents.spec.js
@@ -24,12 +24,6 @@ const mountWithEditor = (editor) => {
 	})
 }
 
-test('mounts without editor', () => {
-	const wrapper = mount(TableOfContents, {})
-	expect(wrapper.text()).toEqual('')
-	expect(wrapper.vm.headings).toEqual([])
-})
-
 test('renders nothing for editor without headings', () => {
 	const editor = createEditor('no heading here')
 	const wrapper = mountWithEditor(editor)
diff --git a/src/tests/components/SyncStatus.spec.js b/src/tests/components/SyncStatus.spec.js
index dc3f26d164f..5667d225145 100644
--- a/src/tests/components/SyncStatus.spec.js
+++ b/src/tests/components/SyncStatus.spec.js
@@ -6,7 +6,7 @@
 import { expect, test } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
 import SyncStatus from '../../components/Editor/DocumentStatus/SyncStatus.vue'
-import { ERROR_TYPE } from '../../services/SyncService.js'
+import { ERROR_TYPE } from '../../services/SyncService.ts'
 
 const FLAGS = ['idle', 'hasConnectionIssue']
 
diff --git a/src/tests/services/SessionApi.spec.js b/src/tests/services/SessionApi.spec.js
deleted file mode 100644
index 5787c48da6f..00000000000
--- a/src/tests/services/SessionApi.spec.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { describe, it, vi, expect } from 'vitest'
-import axios from '@nextcloud/axios'
-import SessionApi, { Connection } from '../../services/SessionApi.js'
-
-vi.mock('@nextcloud/axios', () => {
-	const put = vi.fn()
-	return { default: { put } }
-})
-
-describe('Session api', () => {
-	it('opens a connection', async () => {
-		const api = new SessionApi()
-		axios.put.mockResolvedValue({ data: { hasOwner: true } })
-		const connection = await api.open({ fileId: 123, baseBersionEtag: 'abc' })
-		expect(connection).toBeInstanceOf(Connection)
-		expect(connection.isClosed).toBe(false)
-		expect(connection.hasOwner).toBe(true)
-	})
-})
-
diff --git a/src/tests/services/SyncService.spec.js b/src/tests/services/SyncService.spec.js
deleted file mode 100644
index 30ca27e9c57..00000000000
--- a/src/tests/services/SyncService.spec.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { describe, it, vi, expect } from 'vitest'
-import { SyncService } from '../../services/SyncService.js'
-
-describe('Sync service', () => {
-
-	it('opens a connection', async () => {
-		const api = mockApi({ hasOwner: true })
-		const service = new SyncService({ api, baseVersionEtag: 'abc' })
-		await service.open({ fileId: 123 })
-		expect(service.hasOwner).toBe(true)
-	})
-
-	it('opens a connection to a file without owner', async () => {
-		const api = mockApi({ hasOwner: false })
-		const service = new SyncService({ api, baseVersionEtag: 'abc' })
-		await service.open({ fileId: 123 })
-		expect(service.hasOwner).toBe(false)
-	})
-
-	it('hasOwner is undefined without connection', async () => {
-		const service = new SyncService({})
-		expect(service.hasOwner).toBe(undefined)
-	})
-
-})
-
-const mockApi = (connectionOptions = {}) => {
-	const defaults = { document: { baseVersionEtag: 'abc' } }
-	const open = vi.fn().mockResolvedValue({ ...defaults, ...connectionOptions })
-	return { open }
-}
diff --git a/src/tests/services/SyncService.spec.ts b/src/tests/services/SyncService.spec.ts
new file mode 100644
index 00000000000..88432112a2e
--- /dev/null
+++ b/src/tests/services/SyncService.spec.ts
@@ -0,0 +1,29 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { describe, it, vi, expect } from 'vitest'
+import { SyncService } from '../../services/SyncService.js'
+import { provideConnection } from '../../composables/useConnection.js'
+import * as connect from '../../apis/Connect'
+
+const connection = { documentId: 123, sessionId: 345, sessionToken: 'sessionToken', filePath: './', baseVersionEtag: 'etag'}
+const initialData = { session: { id: 345 }, document: { id: 123, baseVersionEtag: 'etag' }, readOnly: false, content: '', hasOwner: true }
+
+const openData = { connection, data: initialData }
+
+describe('Sync service', () => {
+	it('opens a connection', async () => {
+		const { connection, openConnection } = provideConnection({ fileId: 123, relativePath: './', })
+		vi.mock('../../apis/Connect.ts')
+		vi.mocked(connect.open).mockResolvedValue(openData)
+		const openHandler = vi.fn()
+		const service = new SyncService({ connection, openConnection })
+		service.on('opened', openHandler)
+		await service.open()
+		expect(openHandler).toHaveBeenCalledWith(expect.objectContaining({ session: initialData.session }))
+		expect(service.hasOwner).toBe(true)
+	})
+
+})