enh(sync): recover automatically from outdated / renamed doc

If no changes have been made offline
clear the indexedDb cache
and reload Editor.vue
to load the latest editing session from the server.

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

Author: max-nextcloud

src/components/Editor.vue

@@ -232,7 +232,7 @@ export default defineComponent({
 		})
 		const ydoc = new Doc()
 		const awareness = new Awareness(ydoc)
-		const { dirty, getBaseVersionEtag, setBaseVersionEtag } =
+		const { dirty, getBaseVersionEtag, setBaseVersionEtag, clearIndexedDb } =
 			useIndexedDbProvider(props, ydoc)
 
 		const hasConnectionIssue = ref(false)
@@ -286,6 +286,7 @@ export default defineComponent({
 
 		return {
 			awareness,
+			clearIndexedDb,
 			connection,
 			dirty,
 			editor,
@@ -341,6 +342,13 @@ export default defineComponent({
 		hasDocumentParameters() {
 			return this.fileId || this.shareToken || this.initialSession
 		},
+		hasOutdatedDocument() {
+			return (
+				this.syncError
+				&& this.syncError.type === ERROR_TYPE.LOAD_ERROR
+				&& this.syncError.data.status === 412
+			)
+		},
 		currentDirectory() {
 			return this.relativePath
 				? this.relativePath.split('/').slice(0, -1).join('/')
@@ -395,6 +403,18 @@ export default defineComponent({
 			}
 			this.setEditable(!val)
 		},
+		hasOutdatedDocument(val) {
+			if (!val) {
+				return
+			}
+			if (this.dirty) {
+				// handle conflict between active editing session and offline content
+			} else {
+				// clear the outdated cached content and reload without it.
+				this.clearIndexedDb()
+				this.emit('reload')
+			}
+		},
 	},
 	mounted() {
 		if (!this.richWorkspace) {

src/components/ViewerComponent.vue

@@ -5,15 +5,16 @@
 
 <template>
 	<Editor
-		v-if="!useSourceView"
+		v-if="!useSourceView && !reloading"
 		:file-id="fileid"
 		:relative-path="filename"
 		:active="active || isEmbedded"
 		:autofocus="autofocus"
 		:share-token="shareToken"
 		:class="{ 'text-editor--embedding': isEmbedded }"
 		:mime="mime"
-		:show-outline-outside="showOutlineOutside" />
+		:show-outline-outside="showOutlineOutside"
+		@reload="reloading = true" />
 	<div
 		v-else
 		id="editor-container"
@@ -107,6 +108,7 @@ export default {
 		return {
 			content: '',
 			hasToggledInteractiveEmbedding: false,
+			reloading: false,
 		}
 	},
 	computed: {
@@ -142,6 +144,13 @@ export default {
 		source() {
 			this.loadFileContent()
 		},
+		reloading(val) {
+			if (val) {
+				this.$nextTick(() => {
+					this.reloading = false
+				})
+			}
+		},
 	},
 
 	mounted() {

src/composables/useConnection.ts

@@ -106,7 +106,11 @@ function openInitialSession(
 			throw new Error(
 				'Base version etag did not match when opening initial session.',
 			)
-			// In order to handle this properly we'd need to:
+			// We need to handle dirty documents differently from 'clean' ones.
+			// For clean ones we need to
+			// * call .clearData() on the provider
+			// * reinitialize the editing session - maybe by reloading the component.
+			// In order to handle the dirty state - i.e. a conflict properly we'd need to:
 			// * fetch the file content.
 			// * throw the same exception as a 409 response.
 			// * include the file content as `outsideChange` in the error.

src/composables/useIndexedDbProvider.ts

@@ -48,7 +48,16 @@ export function useIndexedDbProvider(
 		return indexedDbProvider.set('baseVersionEtag', val)
 	}
 
+	/**
+	 * Clear the current document from indexed db.
+	 * Used to reset the browser state to load a new editing session.
+	 */
+	function clearIndexedDb() {
+		return indexedDbProvider.clearData()
+	}
+
 	return {
+		clearIndexedDb,
 		dirty,
 		getBaseVersionEtag,
 		setBaseVersionEtag,