refactor: inject $imageResolver in EditorWrapper

Signed-off-by: Max <max@nextcloud.com>

5 files changed, 66 insertions, 26 deletions

diff --git a/src/components/EditorWrapper.provider.js b/src/components/EditorWrapper.provider.js
index c66cc9cb6..b791075c5 100644
--- a/src/components/EditorWrapper.provider.js
+++ b/src/components/EditorWrapper.provider.js
@@ -22,6 +22,7 @@
 
 export const EDITOR = Symbol('tiptap:editor')
 export const FILE = Symbol('editor:file')
+export const IMAGE_RESOLVER = Symbol('image:resolver')
 export const IS_MOBILE = Symbol('editor:is-mobile')
 export const IS_PUBLIC = Symbol('editor:is-public')
 export const IS_RICH_EDITOR = Symbol('editor:is-rich-editor')
@@ -76,3 +77,17 @@ export const useFileMixin = {
 		},
 	},
 }
+
+export const useImageResolver = {
+	inject: {
+		$imageResolver: {
+			from: IMAGE_RESOLVER,
+			default: {
+				resolve(src) {
+					console.warn('No image resolver provided. Some image sources cannot be resolved.')
+					return [src]
+				},
+			},
+		},
+	},
+}
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
index 3b63558f9..c75d6897b 100644
--- a/src/components/EditorWrapper.vue
+++ b/src/components/EditorWrapper.vue
@@ -94,10 +94,12 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import { EditorContent } from '@tiptap/vue-2'
 import { getVersion, receiveTransaction } from 'prosemirror-collab'
 import { Step } from 'prosemirror-transform'
+import { getCurrentUser } from '@nextcloud/auth'
 
 import {
 	EDITOR,
 	FILE,
+	IMAGE_RESOLVER,
 	IS_MOBILE,
 	IS_PUBLIC,
 	IS_RICH_EDITOR,
@@ -106,6 +108,7 @@ import {
 } from './EditorWrapper.provider.js'
 
 import { SyncService, ERROR_TYPE, IDLE_TIMEOUT } from './../services/SyncService.js'
+import ImageResolver from './../services/ImageResolver.js'
 import { getRandomGuestName } from './../helpers/index.js'
 import { extensionHighlight } from '../helpers/mappings.js'
 import { createEditor, serializePlainText, loadSyntaxHighlight } from './../EditorFactory.js'
@@ -158,6 +161,9 @@ export default {
 			[FILE]: {
 				get: () => this.fileData,
 			},
+			[IMAGE_RESOLVER]: {
+				get: () => this.$imageResolver,
+			},
 			[IS_PUBLIC]: {
 				get: () => this.isPublic,
 			},
@@ -335,6 +341,7 @@ export default {
 	created() {
 		this.$editor = null
 		this.$syncService = null
+		this.$imageResolver = null
 		this.saveStatusPolling = setInterval(() => {
 			this.updateLastSavedStatus()
 		}, 2000)
@@ -483,6 +490,12 @@ export default {
 			this.lock = this.$syncService.lock
 			localStorage.setItem('nick', this.currentSession.guestName)
 			this.$store.dispatch('setCurrentSession', this.currentSession)
+			this.$imageResolver = new ImageResolver({
+				session: this.currentSession,
+				user: getCurrentUser(),
+				shareToken: this.shareToken,
+				currentDirectory: this.relativePath,
+			})
 		},
 
 		onLoaded({ documentSource }) {
diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue
index 86035bba0..8466d7760 100644
--- a/src/nodes/ImageView.vue
+++ b/src/nodes/ImageView.vue
@@ -75,14 +75,12 @@
 </template>
 
 <script>
-import path from 'path'
-import { generateUrl, generateRemoteUrl } from '@nextcloud/router'
-import { getCurrentUser } from '@nextcloud/auth'
+import { generateUrl } from '@nextcloud/router'
 import { NodeViewWrapper } from '@tiptap/vue-2'
 import ClickOutside from 'vue-click-outside'
 import TrashCanIcon from 'vue-material-design-icons/TrashCan.vue'
-import ImageResolver from './ImageResolver.js'
 import store from './../mixins/store.js'
+import { useImageResolver } from './../components/EditorWrapper.provider.js'
 
 const imageMimes = [
 	'image/png',
@@ -124,6 +122,7 @@ export default {
 	},
 	mixins: [
 		store,
+		useImageResolver,
 	],
 	props: ['editor', 'node', 'extension', 'updateAttributes', 'deleteNode'], // eslint-disable-line
 	data() {
@@ -192,13 +191,7 @@ export default {
 	},
 	methods: {
 		async init() {
-			const imageResolver = new ImageResolver({
-				currentDirectory: this.extension.options.currentDirectory,
-				user: getCurrentUser(),
-				session: this.$store.state.currentSession,
-				shareToken: this.token,
-			})
-			const [url, fallback] = imageResolver.resolve(this.src)
+			const [url, fallback] = this.$imageResolver.resolve(this.src)
 			this.loadImage(url).catch((e) => {
 				if (fallback) {
 					this.loadImage(fallback)
diff --git a/src/nodes/ImageResolver.js b/src/services/ImageResolver.js
index 056a128a4..539c0819c 100644
--- a/src/nodes/ImageResolver.js
+++ b/src/services/ImageResolver.js
@@ -24,7 +24,8 @@ import { generateUrl, generateRemoteUrl } from '@nextcloud/router'
 import path from 'path'
 
 export default class ImageResolver {
-	constructor({session, user, shareToken, currentDirectory}) {
+
+	constructor({ session, user, shareToken, currentDirectory }) {
 		this.session = session
 		this.user = user
 		this.shareToken = shareToken
@@ -110,26 +111,29 @@ export default class ImageResolver {
 		return path.normalize(f)
 	}
 
-	davUrl(src){
+	davUrl(src) {
 		if (this.user) {
 			const uid = this.user.uid
 			const encoded = encodeURI(this.filePath(src))
 			return generateRemoteUrl(`dav/files/${uid}${encoded}`)
 		} else {
-			return generateUrl('/s/{token}/download?path={dirname}&files={basename}',
-				{
-					token: this.shareToken,
-					dirname: this.currentDirectory,
-					basename: basename(src),
-				})
-			}
+			return generateUrl('/s/{token}/download?path={dirname}&files={basename}', {
+				token: this.shareToken,
+				dirname: this.currentDirectory,
+				basename: basename(src),
+			})
 		}
+	}
+
 }
 
-/* Urls that can be loaded directy:
- * * remote urls
- * * data urls
- * * preview urls
+/**
+ * Check if a url can be loaded directly - i.e. is one of
+ * - remote url
+ * - data url
+ * - preview url
+ *
+ * @param {string} src - the url to check
  */
 function isDirectUrl(src) {
 	return src.startsWith('http://')
@@ -139,14 +143,30 @@ function isDirectUrl(src) {
 		|| src.match(/^(\/index.php)?\/apps\/files_sharing\/publicpreview\//)
 }
 
+/**
+ * Check if the given url has a preview
+ *
+ * @param {string} src - the url to check
+ */
 function hasPreview(src) {
 	return getQueryVariable(src, 'hasPreview') === 'true'
 }
 
+/**
+ * Return the relative path as specified in the url
+ *
+ * @param {string} src - the url to extract path from
+ */
 function basename(src) {
 	return decodeURI(src.split('?')[0])
 }
 
+/**
+ * Extract the value of a query variable from the given url
+ *
+ * @param {string} src - the url to extract query variable from
+ * @param {string} variable - name of the variable to read out
+ */
 function getQueryVariable(src, variable) {
 	const query = src.split('?')[1]
 	if (typeof query === 'undefined') {
@@ -163,4 +183,3 @@ function getQueryVariable(src, variable) {
 		}
 	}
 }
-
diff --git a/src/tests/nodes/ImageResolver.spec.js b/src/tests/services/ImageResolver.spec.js
index 4feff4f9e..4475a47df 100644
--- a/src/tests/nodes/ImageResolver.spec.js
+++ b/src/tests/services/ImageResolver.spec.js
@@ -1,4 +1,4 @@
-import ImageResolver from './../../nodes/ImageResolver.js'
+import ImageResolver from './../../services/ImageResolver.js'
 
 describe('Image resolver', () => {