Merge pull request #5055 from nextcloud/backport/5020/stable27

[stable27] fix(ImageView): Fix detection of editable editor
nextcloud · Nov 29, 2023 · c8efdf6 · c8efdf6
2 parents 92045eb + 8500cc9
commit c8efdf6
Show file tree

Hide file tree

Showing 13 changed files with 27 additions and 25 deletions.
diff --git a/js/editor.js b/js/editor.js
diff --git a/js/editor.js.map b/js/editor.js.map
diff --git a/js/text-editors.js b/js/text-editors.js
diff --git a/js/text-editors.js.map b/js/text-editors.js.map
diff --git a/js/text-files.js b/js/text-files.js
diff --git a/js/text-files.js.map b/js/text-files.js.map
diff --git a/js/text-public.js b/js/text-public.js
diff --git a/js/text-public.js.map b/js/text-public.js.map
diff --git a/js/text-text.js b/js/text-text.js
diff --git a/js/text-text.js.map b/js/text-text.js.map
diff --git a/js/text-viewer.js b/js/text-viewer.js
diff --git a/js/text-viewer.js.map b/js/text-viewer.js.map
diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<NodeViewWrapper>
+	<NodeViewWrapper :contenteditable="isEditable">
 		<figure class="image image-view"
 			data-component="image-view"
 			:class="{'icon-loading': !loaded, 'image-view--failed': failed}"
@@ -74,7 +74,7 @@
 						v-show="loaded"
 						class="image__caption"
 						:title="alt">
-						<figcaption v-if="!editable">
+						<figcaption v-if="!isEditable">
 							{{ alt }}
 						</figcaption>
 						<div v-else class="image__caption__wrapper">
@@ -118,7 +118,7 @@
 						<input ref="altInput"
 							type="text"
 							:value="alt"
-							:disabled="!editable"
+							:disabled="!isEditable"
 							@blur="updateAlt"
 							@keyup.enter="updateAlt">
 					</div>
@@ -202,17 +202,15 @@ export default {
 			showImageModal: false,
 			embeddedImagesList: [],
 			imageIndex: null,
+			isEditable: false,
 		}
 	},
 	computed: {
 		isMediaAttachment() {
 			return this.attachmentType === this.$attachmentResolver.ATTACHMENT_TYPE_MEDIA
 		},
-		editable() {
-			return this.editor.isEditable
-		},
 		showDeleteIcon() {
-			return this.editable && this.showIcons
+			return this.isEditable && this.showIcons
 		},
 		showImageDeleteIcon() {
 			return this.showDeleteIcon && !this.isMediaAttachment
@@ -270,6 +268,10 @@ export default {
 		},
 	},
 	beforeMount() {
+		this.isEditable = this.editor.isEditable
+		this.editor.on('update', ({ editor }) => {
+			this.isEditable = editor.isEditable
+		})
 		if (!this.isSupportedImage) {
 			// TODO check if hasPreview and render a file preview if available
 			this.failed = true