[stable26] fix: only initialize editor once

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()
 
 				})