change image target in markdown content to relative path, handle it in ImageView

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>

2 files changed, 37 insertions, 24 deletions

diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
index c7283780f..ae07abf94 100644
--- a/src/components/EditorWrapper.vue
+++ b/src/components/EditorWrapper.vue
@@ -616,7 +616,7 @@ export default {
 			}
 
 			return this.$syncService.uploadImage(file).then((response) => {
-				this.insertAttachmentImage(response.data?.name, response.data?.id, position)
+				this.insertAttachmentImage(response.data?.name, response.data?.id, position, response.data?.dirname)
 			}).catch((error) => {
 				console.error(error)
 				showError(error?.response?.data?.error)
@@ -625,7 +625,7 @@ export default {
 		insertImagePath(imagePath) {
 			this.uploadingImages = true
 			this.$syncService.insertImageFile(imagePath).then((response) => {
-				this.insertAttachmentImage(response.data?.name, response.data?.id)
+				this.insertAttachmentImage(response.data?.name, response.data?.id, null, response.data?.dirname)
 			}).catch((error) => {
 				console.error(error)
 				showError(error?.response?.data?.error)
@@ -633,13 +633,19 @@ export default {
 				this.uploadingImages = false
 			})
 		},
-		insertAttachmentImage(name, fileId, position = null) {
+		insertAttachmentImage(name, fileId, position = null, dirname = '') {
 			// inspired by the fixedEncodeURIComponent function suggested in
 			// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+			/*
 			const src = 'text://image?imageFileName='
 				+ encodeURIComponent(name).replace(/[!'()*]/g, (c) => {
 					return '%' + c.charCodeAt(0).toString(16).toUpperCase()
 				})
+			*/
+			const src = dirname + '/'
+				+ encodeURIComponent(name).replace(/[!'()*]/g, (c) => {
+					return '%' + c.charCodeAt(0).toString(16).toUpperCase()
+				})
 			// 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, '')
diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue
index e02887afa..b9650fc85 100644
--- a/src/nodes/ImageView.vue
+++ b/src/nodes/ImageView.vue
@@ -153,28 +153,12 @@ export default {
 		},
 		imageUrl() {
 			if (this.src.startsWith('text://')) {
-				const documentId = this.currentSession?.documentId
-				const sessionId = this.currentSession?.id
-				const sessionToken = this.currentSession?.token
 				const imageFileName = getQueryVariable(this.src, 'imageFileName')
-				if (getCurrentUser() || !this.token) {
-					return generateUrl('/apps/text/image?documentId={documentId}&sessionId={sessionId}&sessionToken={sessionToken}&imageFileName={imageFileName}',
-						{
-							documentId,
-							sessionId,
-							sessionToken,
-							imageFileName,
-						})
-				} else {
-					return generateUrl('/apps/text/image?documentId={documentId}&sessionId={sessionId}&sessionToken={sessionToken}&imageFileName={imageFileName}&shareToken={shareToken}',
-						{
-							documentId,
-							sessionId,
-							sessionToken,
-							imageFileName,
-							shareToken: this.token,
-						})
-				}
+				return this.getTextApiUrl(imageFileName)
+			}
+			if (this.src.startsWith(`.attachments.${this.currentSession?.documentId}/`)) {
+				const imageFileName = decodeURIComponent(this.src.replace(`.attachments.${this.currentSession?.documentId}/`, '').split('?')[0])
+				return this.getTextApiUrl(imageFileName)
 			}
 			if (this.isRemoteUrl || this.isPreviewUrl || this.isDataUrl) {
 				return this.src
@@ -301,6 +285,29 @@ export default {
 				this.editor.commands.scrollIntoView()
 			})
 		},
+		getTextApiUrl(imageFileName) {
+			const documentId = this.currentSession?.documentId
+			const sessionId = this.currentSession?.id
+			const sessionToken = this.currentSession?.token
+			if (getCurrentUser() || !this.token) {
+				return generateUrl('/apps/text/image?documentId={documentId}&sessionId={sessionId}&sessionToken={sessionToken}&imageFileName={imageFileName}',
+					{
+						documentId,
+						sessionId,
+						sessionToken,
+						imageFileName,
+					})
+			} else {
+				return generateUrl('/apps/text/image?documentId={documentId}&sessionId={sessionId}&sessionToken={sessionToken}&imageFileName={imageFileName}&shareToken={shareToken}',
+					{
+						documentId,
+						sessionId,
+						sessionToken,
+						imageFileName,
+						shareToken: this.token,
+					})
+			}
+		},
 	},
 }
 </script>