allow relative image sources with fileid

includes a unit test for turning the src in markdown
into a src for html that can be resolved by nextcloud

Signed-off-by: Azul <azul@riseup.net>

2 files changed, 70 insertions, 18 deletions

diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue
index efa9cdd36..448613410 100644
--- a/src/nodes/ImageView.vue
+++ b/src/nodes/ImageView.vue
@@ -25,7 +25,7 @@
 		<div v-if="imageLoaded && isSupportedImage" class="image__view">
 			<transition name="fade">
 				<img v-show="loaded"
-					:src="src"
+					:src="imageUrl"
 					class="image__main"
 					@load="onLoaded">
 			</transition>
@@ -38,13 +38,6 @@
 				</div>
 			</transition>
 		</div>
-		<div v-else-if="isRelativeImage">
-			<img :src="relativeSrc">
-			<input ref="srcInput"
-				type="text"
-				:value="src"
-				@keyup.enter="updateSrc()">
-		</div>
 		<div v-else class="image__placeholder">
 			<transition name="fade">
 				<div v-show="loaded" class="image__main">
@@ -79,11 +72,11 @@ const imageMimes = [
 ]
 
 const getQueryVariable = (src, variable) => {
-	const query = src.split('#')[1]
+	const query = src.split('?')[1]
 	if (typeof query === 'undefined') {
 		return
 	}
-	const vars = query.split('&')
+	const vars = query.split(/[&#]/)
 	if (typeof vars === 'undefined') {
 		return
 	}
@@ -106,14 +99,23 @@ export default {
 		}
 	},
 	computed: {
-		isRelativeImage() {
-			return !this.src.match(/\/core\/preview/)
-		},
-		relativeSrc() {
+		imageUrl() {
+			if (this.hasPreviewUrl) {
+				return this.src
+			}
+			if (this.fileId) {
+				return generateUrl('/core/preview') + `?fileId=${this.fileId}&x=1024&y=1024&a=true`
+			}
 			const f = FileList.getCurrentDirectory() + '/' + this.src
 			const pathParam = encodeURIComponent(path.normalize(f))
 			return generateUrl('/core/preview.png') + `?file=${pathParam}&x=1024&y=1024&a=true`
 		},
+		fileId() {
+			return getQueryVariable(this.src, 'fileId')
+		},
+		hasPreviewUrl() {
+			return this.src.match(/^(\/index.php)?\/core\/preview/)
+		},
 		mimeIcon() {
 			const mime = getQueryVariable(this.src, 'mimetype')
 			if (mime) {
@@ -167,7 +169,7 @@ export default {
 			return
 		}
 		const img = new Image()
-		img.src = this.node.attrs.src
+		img.src = this.imageUrl
 		img.onload = () => {
 			this.imageLoaded = true
 		}
@@ -181,9 +183,6 @@ export default {
 		updateAlt() {
 			this.alt = this.$refs.altInput.value
 		},
-		updateSrc() {
-			this.src = this.$refs.srcInput.value
-		},
 		onLoaded() {
 			this.loaded = true
 		},
diff --git a/src/tests/nodes/ImageView.spec.js b/src/tests/nodes/ImageView.spec.js
new file mode 100644
index 000000000..43f6b3fdd
--- /dev/null
+++ b/src/tests/nodes/ImageView.spec.js
@@ -0,0 +1,53 @@
+import { shallowMount } from '@vue/test-utils'
+import ImageView from '../../nodes/ImageView.vue'
+
+global.FileList = {
+	getCurrentDirectory: function() {return '/current'},
+}
+global.OC = {
+	requestToken: '123',
+	config: {modRewriteWorking: true},
+	MimeType: {getIconUrl: mime => mime},
+	webroot: ''
+}
+
+describe('Image View html source based on md source', () => {
+
+	const factory = attrs => {
+		const propsData = {
+			node: {attrs}
+		}
+		const data = () => ({
+			imageLoaded: true,
+			loaded: true,
+			failed: false,
+		})
+		return shallowMount(ImageView, {propsData, data})
+	}
+
+	test('old style is used as is', () => {
+		const src = '/core/preview?fileId=123#mimetype=image%2Fjpeg'
+		const wrapper = factory({src})
+		expect(wrapper.find('.image__main').attributes('src')).toBe(src)
+	})
+
+	test('old style with index.php is used as is', () => {
+		const src = '/index.php/core/preview?fileId=9&x=1024&y=1024&a=true#mimetype=image%2Fjpeg&hasPreview=true&fileId=9'
+		const wrapper = factory({src})
+		expect(wrapper.find('.image__main').attributes('src')).toBe(src)
+	})
+
+	test('fileId is used for preview url', () => {
+		const wrapper = factory({src: '/Media/photo-1498855592392-af2bf1e0a4c7.jpeg?fileId=7#mimetype=image%2Fjpeg&hasPreview=true'})
+		expect(wrapper.vm.fileId).toBe('7')
+		expect(wrapper.find('.image__main').attributes('src'))
+			.toBe('/core/preview?fileId=7&x=1024&y=1024&a=true')
+	})
+
+	test('without fileId relative path is used in file based preview url', () => {
+		const wrapper = factory({src: 'sub/asdf.jpg'})
+		expect(wrapper.vm.isSupportedImage).toBe(true)
+		expect(wrapper.find('.image__main').attributes('src'))
+			.toBe('/core/preview.png?file=%2Fcurrent%2Fsub%2Fasdf.jpg&x=1024&y=1024&a=true')
+	})
+})