fix: only initialize editor once

When we recover a session the editor already exists.
Start the syncing again as the polling backend is created from scratch.
Do not attach further events to the editor and do not reset the content.

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

cypress/e2e/sync.spec.js

@@ -80,11 +80,14 @@ describe('Sync', () => {
 				req.alias = 'deadSync'
 			}
 		})
-		cy.wait('@push', { timeout: 15000 + Cypress.config().defaultCommandTimeout })
-		cy.wait('@push', { timeout: 15000 + Cypress.config().defaultCommandTimeout })
-		cy.wait('@push', { timeout: 15000 + Cypress.config().defaultCommandTimeout })
-		cy.wait('@push', { timeout: 15000 + Cypress.config().defaultCommandTimeout })
+		cy.get('#editor-container .document-status')
+			.should('contain', 'File could not be loaded', { timeout: 10000 })
+		cy.get('#editor-container .document-status', { timeout: 30000 })
+			.should('not.contain', 'File could not be loaded')
+		cy.intercept({ method: 'POST', url: '**/apps/text/session/sync' })
+			.as('syncAfterRecovery')
 		cy.getContent().type('* more content added after the lost connection{enter}')
+		cy.wait('@syncAfterRecovery')
 		cy.closeFile()
 		cy.testName()
 			.then(name => cy.downloadFile(`/${name}.md`))

src/components/Editor.vue

@@ -476,6 +476,9 @@ export default {
 			this.currentSession = session
 			this.document = document
 			this.readOnly = document.readOnly
+			if (this.$editor) {
+				this.$editor.setOptions({ editable: !this.readOnly })
+			}
 			this.lock = this.$syncService.lock
 			localStorage.setItem('nick', this.currentSession.guestName)
 			this.setCurrentSession(this.currentSession)
@@ -498,47 +501,52 @@ export default {
 			(this.isRichEditor ? Promise.resolve() : loadSyntaxHighlight(language))
 				.then(() => {
 					const session = this.currentSession
-					this.$editor ||= createEditor({
-						language,
-						relativePath: this.relativePath,
-						session,
-						onCreate: ({ editor }) => {
-							this.$syncService.startSync()
-						},
-						onUpdate: ({ editor }) => {
-							// this.debugContent(editor)
-							const proseMirrorMarkdown = this.$syncService.serialize(editor.state.doc)
-							this.$parent.$emit('update:content', {
-								markdown: proseMirrorMarkdown,
-							})
-						},
-						extensions: [
-							Collaboration.configure({
-								document: this.$ydoc,
-							}),
-							CollaborationCursor.configure({
-								provider: this.$providers[0],
-								user: {
-									name: session?.userId
-										? session.displayName
-										: (session?.guestName || t('text', 'Guest')),
-									color: session?.color,
-								},
-							}),
-							Keymap.configure({
-								'Mod-s': () => {
-									this.$syncService.save()
-									return true
-								},
-							}),
-						],
-						enableRichEditing: this.isRichEditor,
-					})
-					this.hasEditor = true
-					if (!documentState && documentSource) {
-						this.setContent(documentSource, { addToHistory: false })
+					if (!this.$editor) {
+						this.$editor = createEditor({
+							language,
+							relativePath: this.relativePath,
+							session,
+							onCreate: ({ editor }) => {
+								this.$syncService.startSync()
+							},
+							onUpdate: ({ editor }) => {
+								// this.debugContent(editor)
+								const proseMirrorMarkdown = this.$syncService.serialize(editor.state.doc)
+								this.$parent.$emit('update:content', {
+									markdown: proseMirrorMarkdown,
+								})
+							},
+							extensions: [
+								Collaboration.configure({
+									document: this.$ydoc,
+								}),
+								CollaborationCursor.configure({
+									provider: this.$providers[0],
+									user: {
+										name: session?.userId
+											? session.displayName
+											: (session?.guestName || t('text', 'Guest')),
+										color: session?.color,
+									},
+								}),
+								Keymap.configure({
+									'Mod-s': () => {
+										this.$syncService.save()
+										return true
+									},
+								}),
+							],
+							enableRichEditing: this.isRichEditor,
+						})
+						this.hasEditor = true
+						if (!documentState && documentSource) {
+							this.setContent(documentSource, { addToHistory: false })
+						}
+						this.listenEditorEvents()
+					} else {
+						// $editor already existed. So this is a reconnect.
+						this.$syncService.startSync()
 					}
-					this.listenEditorEvents()
 
 				})