fix(SaveService): Don't save if yjs reports pendingStructs

src/components/Editor.vue

@@ -801,6 +801,10 @@ export default defineComponent({
 			this.translateModal = false
 		},
 
+		hasYjsPendingStructs() {
+			return !!this.ydoc.store.pendingStructs
+		},
+
 		saveBeforeUnload() {
 			this.saveService.saveViaSendBeacon()
 		},

src/components/Editor/Status.vue

@@ -11,7 +11,9 @@
 			:class="saveStatusClass">
 			<NcButton
 				type="tertiary"
-				:aria-label="t('text', 'Save document')"
+				:disabled="saveService.hasYjsPendingStructs()"
+				:title="saveTitle"
+				:aria-label="saveAriaLabel"
 				@click="onClickSave">
 				<template #icon>
 					<NcSavingIndicatorIcon
@@ -122,6 +124,16 @@ export default {
 			}
 			return this.dirtyStateIndicator ? 'saving' : 'saved'
 		},
+		saveTitle() {
+			return this.saveService.hasYjsPendingStructs()
+				? ('text', 'Cannot save due to inconsistent sync state')
+				: ''
+		},
+		saveAriaLabel() {
+			return this.saveService.hasYjsPendingStructs()
+				? ('text', 'Cannot save due to inconsistent sync state')
+				: ('text', 'Save document')
+		},
 		lastSavedString() {
 			// Make this a dependent of refreshMoment, so it will be recomputed
 			/* eslint-disable-next-line no-unused-expressions */

src/composables/useSaveService.ts

@@ -23,6 +23,7 @@ export const provideSaveService = (
 		syncService,
 		serialize,
 		getDocumentState: () => getDocumentState(ydoc),
+		hasYjsPendingStructs: () => !!ydoc.store.pendingStructs,
 	})
 	provide(saveServiceKey, saveService)
 	return { saveService }

src/services/SaveService.ts

@@ -23,23 +23,27 @@ class SaveService {
 	syncService
 	serialize
 	getDocumentState
+	hasYjsPendingStructs
 	autosave
 
 	constructor({
 		connection,
 		syncService,
 		serialize,
 		getDocumentState,
+		hasYjsPendingStructs,
 	}: {
 		connection: ShallowRef<Connection | undefined>
 		syncService: SyncService
 		serialize: () => string
 		getDocumentState: () => string
+		hasYjsPendingStructs: () => boolean
 	}) {
 		this.connection = connection
 		this.syncService = syncService
 		this.serialize = serialize
 		this.getDocumentState = getDocumentState
+		this.hasYjsPendingStructs = hasYjsPendingStructs
 		this.autosave = debounce(this._autosave.bind(this), AUTOSAVE_INTERVAL)
 		this.syncService.on('close', () => {
 			this.autosave.clear()
@@ -64,6 +68,11 @@ class SaveService {
 			logger.warn('Could not save due to missing connection')
 			return
 		}
+		// Don't save if we have pendingStructs (i.e. document state misses a step)
+		if (this.hasYjsPendingStructs()) {
+			logger.debug('[SaveService] not saving due to inconsistent yjs state')
+			return
+		}
 		try {
 			const response = await save(this.connection.value, {
 				version: this.version,
@@ -86,6 +95,10 @@ class SaveService {
 		if (!this.connection.value) {
 			return
 		}
+		// Don't save if we have pendingStructs (i.e. document state misses a step)
+		if (this.hasYjsPendingStructs()) {
+			return
+		}
 		saveViaSendBeacon(this.connection.value, {
 			version: this.version,
 			autosaveContent: this._getContent(),