feat(editor): Send save request with navigator.sendBeacon before un…

…load Try to send a save request on unsaved changes on `beforeunload` event, which happens e.g. when the tab/browser gets closed. Fixes: #6606 Signed-off-by: Jonas <[email protected]>
nextcloud · Dec 2, 2024 · 22737a2 · 22737a2
1 parent b7cedef
commit 22737a2
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -354,6 +354,7 @@ export default {
 		subscribe('text:image-node:delete', this.onDeleteImageNode)
 		this.emit('update:loaded', true)
 		subscribe('text:translate-modal:show', this.showTranslateModal)
+		window.addEventListener('beforeunload', this.checkBeforeUnload)
 		this.setupEditorDebug()
 	},
 	created() {
@@ -370,6 +371,7 @@ export default {
 		this.$attachmentResolver = null
 	},
 	async beforeDestroy() {
+		window.removeEventListener('beforeunload', this.checkBeforeUnload)
 		if (!this.richWorkspace) {
 			window.removeEventListener('beforeprint', this.preparePrinting)
 			window.removeEventListener('afterprint', this.preparePrinting)
@@ -850,15 +852,18 @@ export default {
 			this.translateContent = e.content
 			this.translateModal = true
 		},
+
 		hideTranslate() {
 			this.translateModal = false
 		},
+
 		translateInsert(content) {
 			this.$editor.commands.command(({ tr, commands }) => {
 				return commands.insertContentAt(tr.selection.to, content)
 			})
 			this.translateModal = false
 		},
+
 		translateReplace(content) {
 			this.$editor.commands.command(({ tr, commands }) => {
 				const selection = tr.selection
@@ -880,9 +885,17 @@ export default {
 				}
 			})
 		},
+
 		updateEditorWidth(newWidth) {
 			document.documentElement.style.setProperty('--text-editor-max-width', newWidth)
 		},
+
+		checkBeforeUnload(event) {
+			if (this.document?.hasUnsavedChanges) {
+				this.$syncService.save({ useSendBeacon: true })
+				event.preventDefault()
+			}
+		},
 	},
 }
 </script>

diff --git a/src/services/SessionApi.js b/src/services/SessionApi.js
@@ -106,8 +106,9 @@ export class Connection {
 		})
 	}
 
-	save({ version, autosaveContent, documentState, force, manualSave }) {
-		return this.#post(this.#url(`session/${this.#document.id}/save`), {
+	save({ version, autosaveContent, documentState, force, manualSave, useSendBeacon = false }) {
+		const url = this.#url(`session/${this.#document.id}/save`)
+		const data = {
 			...this.#defaultParams,
 			filePath: this.#options.filePath,
 			baseVersionEtag: this.#document.baseVersionEtag,
@@ -116,7 +117,10 @@ export class Connection {
 			documentState,
 			force,
 			manualSave,
-		})
+		}
+		return useSendBeacon
+			? navigator.sendBeacon(url, data)
+			: this.#post(url, data)
 	}
 
 	push({ steps, version, awareness }) {

diff --git a/src/services/SyncService.js b/src/services/SyncService.js
@@ -281,7 +281,7 @@ class SyncService {
 		return this.serialize()
 	}
 
-	async save({ force = false, manualSave = true } = {}) {
+	async save({ force = false, manualSave = true, useSendBeacon = false } = {}) {
 		logger.debug('[SyncService] saving', arguments[0])
 		try {
 			const response = await this.#connection.save({
@@ -290,6 +290,7 @@ class SyncService {
 				documentState: this.getDocumentState(),
 				force,
 				manualSave,
+				useSendBeacon,
 			})
 			this.emit('stateChange', { dirty: false })
 			this.#connection.document.lastSavedVersionTime = Date.now() / 1000