fix(Editor): Separate backend readonly flag and editor editable state

Use a computed (`isEditableEditor`) to determine if the editor should be in editable state. Signed-off-by: Jonas <[email protected]>
nextcloud · Mar 12, 2024 · 5106357 · 5106357
1 parent ac126df
commit 5106357
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -43,7 +43,7 @@
 			@outline-toggled="outlineToggled">
 			<MainContainer v-if="hasEditor">
 				<!-- Readonly -->
-				<div v-if="readOnly" class="text-editor--readonly-bar">
+				<div v-if="!this.isEditableEditor" class="text-editor--readonly-bar">
 					<slot name="readonlyBar">
 						<ReadonlyBar>
 							<Status :document="document"
@@ -272,6 +272,9 @@ export default {
 		isRichEditor() {
 			return loadState('text', 'rich_editing_enabled', true) && this.mime === 'text/markdown'
 		},
+		isEditableEditor() {
+			return !this.readOnly && !this.idle && !this.syncError && !this.hasConnectionIssue
+		},
 		fileExtension() {
 			return this.relativePath ? this.relativePath.split('/').pop().split('.').pop() : 'txt'
 		},
@@ -289,8 +292,7 @@ export default {
 		renderRichEditorMenus() {
 			return this.contentLoaded
 				&& this.isRichEditor
-				&& !this.syncError
-				&& !this.readOnly
+				&& this.isEditableEditor
 		},
 		renderMenus() {
 			return this.contentLoaded
@@ -315,6 +317,9 @@ export default {
 				this.contentWrapper = this.$refs.contentWrapper
 			})
 		},
+		isEditableEditor(val) {
+			this.$editor?.setEditable(val)
+		},
 	},
 	mounted() {
 		if (this.active && (this.hasDocumentParameters)) {
@@ -478,9 +483,6 @@ export default {
 			this.currentSession = session
 			this.document = document
 			this.readOnly = document.readOnly
-			if (this.$editor) {
-				this.$editor.setEditable(!this.readOnly)
-			}
 			this.lock = this.$syncService.lock
 			localStorage.setItem('nick', this.currentSession.guestName)
 			this.setCurrentSession(this.currentSession)
@@ -545,6 +547,8 @@ export default {
 							enableRichEditing: this.isRichEditor,
 							isEmbedded: this.isEmbedded,
 						})
+						// Start with read-only editor, will be updated by watcher later on
+						this.$editor.setEditable(false)
 						this.hasEditor = true
 						if (!documentState && documentSource) {
 							this.setContent(documentSource, {
@@ -567,7 +571,6 @@ export default {
 			this.document = document
 
 			this.syncError = null
-			this.$editor.setEditable(!this.readOnly)
 		},
 
 		onSync({ steps, document }) {
@@ -580,7 +583,6 @@ export default {
 
 		onError({ type, data }) {
 			this.$nextTick(() => {
-				this.$editor?.setEditable(false)
 				this.emit('sync-service:error')
 			})
 
@@ -612,7 +614,7 @@ export default {
 		onStateChange(state) {
 			if (state.initialLoading && !this.contentLoaded) {
 				this.contentLoaded = true
-				if (this.autofocus && !this.readOnly) {
+				if (this.autofocus && this.isEditableEditor) {
 					this.$nextTick(() => {
 						this.$editor.commands.autofocus()
 					})
@@ -635,8 +637,6 @@ export default {
 		onIdle() {
 			this.$syncService.close()
 			this.idle = true
-			this.readOnly = true
-			this.$editor.setEditable(!this.readOnly)
 
 			this.$nextTick(() => {
 				this.emit('sync-service:idle')