fix(attachments): Fix some issues with the showimage modal

* Only open images from native attachments list
* Only open images, non-image attachments are not supported anyway
* Fix watcher for `startIndex`
* Don't set computed property `currentImage`
* Show error if image cannot be found in attachments

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

src/components/ImageView/ShowImageModal.vue

@@ -1,7 +1,7 @@
 <template>
 	<NcModal v-if="show"
 		size="large"
-		:name="currentImage.basename"
+		:name="currentImage.name"
 		:out-transition="true"
 		:has-next="true"
 		:has-previous="true"
@@ -11,7 +11,7 @@
 		@previous="showPreviousImage"
 		@close="$emit('close')">
 		<div class="modal__content">
-			<img :src="currentImage.source">
+			<img :src="currentImage.previewUrl">
 		</div>
 	</NcModal>
 </template>
@@ -27,14 +27,7 @@ export default {
 	props: {
 		images: {
 			type: Array,
-			default() {
-				return []
-			},
-			validator(imagesList) {
-				return (imagesList.length === 0)
-					? true
-					: imagesList.every(image => image.basename && image.source)
-			},
+			required: true,
 		},
 		startIndex: {
 			type: Number,
@@ -56,20 +49,18 @@ export default {
 		},
 	},
 	watch: {
-		startIndex(val) {
+		'startIndex'(val) {
 			this.currentImageIndex = val
 		},
 	},
 	methods: {
 		showNextImage() {
 			this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length
-			this.currentImage = this.images[this.currentImageIndex]
 		},
 		showPreviousImage() {
 			this.currentImageIndex = this.currentImageIndex <= 0
 				? this.images.length - 1
 				: this.currentImageIndex - 1
-			this.currentImage = this.images[this.currentImageIndex]
 		},
 	},
 }

src/nodes/ImageView.vue

@@ -36,7 +36,7 @@
 						<div v-if="isMediaAttachment"
 							contenteditable="false"
 							class="media"
-							@click="handleImageClick(src)">
+							@click="handleImageClick">
 							<div class="media__wrapper">
 								<img v-show="loaded"
 									:src="imageUrl"
@@ -62,7 +62,7 @@
 							<img v-show="loaded"
 								:src="imageUrl"
 								class="image__main"
-								@click="handleImageClick(src)"
+								@click="handleImageClick"
 								@load="onLoaded">
 						</div>
 					</template>
@@ -101,7 +101,7 @@
 					</div>
 				</transition>
 				<div class="image__modal">
-					<ShowImageModal :images="embeddedImagesList"
+					<ShowImageModal :images="imageAttachments"
 						:start-index="imageIndex"
 						:show="showImageModal"
 						@close="showImageModal=false" />
@@ -135,7 +135,9 @@
 
 <script>
 import ClickOutside from 'vue-click-outside'
+import { mapGetters } from 'vuex'
 import { NcButton } from '@nextcloud/vue'
+import { showError } from '@nextcloud/dialogs'
 import ShowImageModal from '../components/ImageView/ShowImageModal.vue'
 import store from '../mixins/store.js'
 import { useAttachmentResolver } from '../components/Editor.provider.js'
@@ -191,6 +193,7 @@ export default {
 	props: ['editor', 'node', 'extension', 'updateAttributes', 'deleteNode'], // eslint-disable-line
 	data() {
 		return {
+			attachment: null,
 			imageLoaded: false,
 			loaded: false,
 			failed: false,
@@ -200,12 +203,14 @@ export default {
 			attachmentType: null,
 			attachmentSize: null,
 			showImageModal: false,
-			embeddedImagesList: [],
 			imageIndex: null,
 			isEditable: false,
 		}
 	},
 	computed: {
+		...mapGetters({
+			imageAttachments: 'text/imageAttachments',
+		}),
 		isMediaAttachment() {
 			return this.attachmentType === this.$attachmentResolver.ATTACHMENT_TYPE_MEDIA
 		},
@@ -282,21 +287,21 @@ export default {
 	},
 	methods: {
 		async loadPreview() {
-			const attachment = await this.$attachmentResolver.resolve(this.src)
+			this.attachment = await this.$attachmentResolver.resolve(this.src)
 			return new Promise((resolve, reject) => {
 				const img = new Image()
 				img.onload = async () => {
-					this.imageUrl = attachment.previewUrl
+					this.imageUrl = this.attachment.previewUrl
 					this.imageLoaded = true
 					this.loaded = true
-					this.attachmentType = attachment.isImage ? this.$attachmentResolver.ATTACHMENT_TYPE_IMAGE : this.$attachmentResolver.ATTACHMENT_TYPE_MEDIA
-					this.attachmentSize = attachment.size
-					resolve(attachment.previewUrl)
+					this.attachmentType = this.attachment.isImage ? this.$attachmentResolver.ATTACHMENT_TYPE_IMAGE : this.$attachmentResolver.ATTACHMENT_TYPE_MEDIA
+					this.attachmentSize = this.attachment.size
+					resolve(this.attachment.previewUrl)
 				}
 				img.onerror = (e) => {
-					reject(new LoadImageError(e, attachment.previewUrl))
+					reject(new LoadImageError(e, this.attachment.previewUrl))
 				}
-				img.src = attachment.previewUrl
+				img.src = this.attachment.previewUrl
 			})
 		},
 		onImageLoadFailure(err) {
@@ -319,23 +324,14 @@ export default {
 		onLoaded() {
 			this.loaded = true
 		},
-		async handleImageClick(src) {
-			const imageViews = Array.from(document.querySelectorAll('figure[data-component="image-view"].image-view'))
-			let basename, relativePath
-
-			for (const imgv of imageViews) {
-				relativePath = imgv.getAttribute('data-src')
-				basename = relativePath.split('/').slice(-1).join()
-				const response = await this.$attachmentResolver.resolve(relativePath, true)
-				const { url: source } = response.shift()
-				this.embeddedImagesList.push({
-					source,
-					basename,
-					relativePath,
-				})
+		async handleImageClick() {
+			this.imageIndex = this.imageAttachments.findIndex(i => (i.isImage && i.fileId === this.attachment.fileId))
+			if (this.imageIndex !== -1) {
+				this.showImageModal = true
+			} else {
+				console.error('Could not find image in attachments list', this.attachment)
+				showError(t('text', 'Could not find image in attachments list.'))
 			}
-			this.imageIndex = this.embeddedImagesList.findIndex(image => image.relativePath === src)
-			this.showImageModal = true
 		},
 		onDelete() {
 			emit('text:image-node:delete', this.imageUrl)

src/store/index.js

@@ -48,6 +48,7 @@ export const textModule = {
 		attachmentList: [],
 	},
 	getters: {
+		imageAttachments: (state) => state.attachmentList.filter(a => a.isImage),
 		findAttachment: (state) => (fileName) => state.attachmentList.find(a => a.name === fileName),
 	},
 	mutations: {