From b99c81071a6931e15132110801684dd594fd370d Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Wed, 22 Nov 2023 15:24:39 +0100
Subject: [PATCH] fix(ImageView): Fix detection of editable editor

Fixes images always being displayed as editable, even in readonly
editor.

Also set `contenteditable` to false in readonly mode. This fixes
image captions being editable in readonly editor without session.

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/nodes/ImageView.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue
index 06d74ce8259..966642d4584 100644
--- a/src/nodes/ImageView.vue
+++ b/src/nodes/ImageView.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<NodeViewWrapper contenteditable="true">
+	<NodeViewWrapper :contenteditable="isEditable">
 		<figure class="image image-view"
 			data-component="image-view"
 			:class="{'icon-loading': !loaded, 'image-view--failed': failed}"
@@ -75,7 +75,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">
@@ -120,7 +120,7 @@
 						<input ref="altInput"
 							type="text"
 							:value="alt"
-							:disabled="!editable"
+							:disabled="!isEditable"
 							@blur="updateAlt"
 							@keyup.enter="updateAlt">
 					</div>
@@ -204,17 +204,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
@@ -272,6 +270,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