fix: open non-image attachment

Signed-off-by: Luka Trovic <luka@nextcloud.com>

Author: luka-nextcloud

src/components/Editor/MediaHandler.vue

@@ -186,7 +186,7 @@ export default {
 			const src = dirname + '/'
 				+ encodeURIComponent(name).replace(/[!'()*]/g, (c) => {
 					return '%' + c.charCodeAt(0).toString(16).toUpperCase()
-				})
+				}) + '?fileId=' + fileId
 			// simply get rid of brackets to make sure link text is valid
 			// as it does not need to be unique and matching the real file name
 			const alt = name.replaceAll(/[[\]]/g, '')

src/nodes/ImageView.vue

@@ -34,17 +34,19 @@
 				<transition name="fade">
 					<template v-if="!failed">
 						<div v-if="isMediaAttachment"
-							class="media"
-							@click="handleImageClick(src)">
+							class="media">
 							<div class="media__wrapper">
-								<img v-show="loaded"
-									:src="imageUrl"
-									class="image__main"
-									@load="onLoaded">
-								<div class="metadata">
-									<span class="name">{{ alt }}</span>
-									<span class="size">{{ attachmentMetadata.size }}</span>
-								</div>
+								<a :href="internalLinkOrImage"
+									target="_blank">
+									<img v-show="loaded"
+										:src="imageUrl"
+										class="image__main"
+										@load="onLoaded">
+									<div class="metadata">
+										<span class="name">{{ alt }}</span>
+										<span class="size">{{ attachmentMetadata.size }}</span>
+									</div>
+								</a>
 							</div>
 							<div v-if="showDeleteIcon"
 								class="buttons">
@@ -225,16 +227,13 @@ export default {
 
 			return this.loaded && this.imageLoaded
 		},
-		imageFileId() {
-			return getQueryVariable(this.src, 'fileId')
-		},
 		isSupportedImage() {
 			return typeof this.mime === 'undefined'
 				|| IMAGE_MIMES.indexOf(this.mime) !== -1
 		},
 		internalLinkOrImage() {
-			if (this.imageFileId) {
-				return generateUrl('/f/' + this.imageFileId)
+			if (this.fileId) {
+				return generateUrl('/f/' + this.fileId)
 			}
 			return this.src
 		},
@@ -258,6 +257,9 @@ export default {
 				})
 			},
 		},
+		fileId() {
+			return getQueryVariable(this.src, 'fileId')
+		},
 		t() {
 			return (a, s) => window.t(a, s)
 		},
@@ -464,6 +466,10 @@ export default {
 		border-radius: var(--border-radius-large);
 		padding: 8px;
 
+		a {
+			display: contents;
+		}
+
 		img {
 			width: 44px;
 			height: 44px;