fix: open non-image attachment

Signed-off-by: Luka Trovic <[email protected]>

src/components/Editor/MediaHandler.vue

@@ -185,7 +185,7 @@ export default {
 			const src = dirname + '/'
 				+ encodeURIComponent(name).replace(/[!'()*]/g, (c) => {
 					return '%' + c.charCodeAt(0).toString(16).toUpperCase()
-				})
+				}) + '?fileId=' + fileId + '&mimeType=' + encodeURIComponent(mimeType)
 			// 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, '')
@@ -194,7 +194,7 @@ export default {
 				? this.$editor.chain().focus(position)
 				: this.$editor.chain()
 
-			chain.setImage({ src, alt, fileId, mimeType }).run()
+			chain.setImage({ src, alt }).run()
 
 			const selection = this.$editor.view.state.selection
 			if (!selection.empty) {

src/nodes/Image.js

@@ -25,9 +25,6 @@ import { Plugin } from '@tiptap/pm/state'
 import ImageView from './ImageView.vue'
 import { VueNodeViewRenderer } from '@tiptap/vue-2'
 import { defaultMarkdownSerializer } from '@tiptap/pm/markdown'
-import { nodeInputRule } from '@tiptap/core'
-
-const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
 
 const Image = TiptapImage.extend({
 
@@ -103,40 +100,6 @@ const Image = TiptapImage.extend({
 		defaultMarkdownSerializer.nodes.image(state, node, parent, index)
 		state.closeBlock(node)
 	},
-
-	addAttributes() {
-		return {
-			src: {
-				default: null,
-			},
-			alt: {
-				default: null,
-			},
-			title: {
-				default: null,
-			},
-			fileId: {
-				default: null,
-			},
-			mimeType: {
-				default: null,
-			},
-		}
-	},
-
-	addInputRules() {
-		return [
-			nodeInputRule({
-				find: inputRegex,
-				type: this.type,
-				getAttributes: match => {
-					const [,, alt, src, title, fileId, mimeType] = match
-
-					return { src, alt, title, fileId, mimeType }
-				},
-			}),
-		]
-	},
 })
 
 export default Image

src/nodes/ImageView.vue

@@ -141,6 +141,23 @@ import { NodeViewWrapper } from '@tiptap/vue-2'
 import { logger } from '../helpers/logger.js'
 import { Image as ImageIcon, Delete as DeleteIcon } from '../components/icons.js'
 
+const getQueryVariable = (src, variable) => {
+	const query = src.split('?')[1]
+	if (typeof query === 'undefined') {
+		return
+	}
+	const vars = query.split(/[&#]/)
+	if (typeof vars === 'undefined') {
+		return
+	}
+	for (let i = 0; i < vars.length; i++) {
+		const pair = vars[i].split('=')
+		if (decodeURIComponent(pair[0]) === variable) {
+			return decodeURIComponent(pair[1])
+		}
+	}
+}
+
 class LoadImageError extends Error {
 
 	constructor(reason, imageUrl) {
@@ -238,10 +255,10 @@ export default {
 			},
 		},
 		fileId() {
-			return this.node.attrs.fileId || null
+			return getQueryVariable(this.src, 'fileId')
 		},
 		mimeType() {
-			return this.node.attrs.mimeType || null
+			return getQueryVariable(this.src, 'mimeType')
 		},
 		t() {
 			return (a, s) => window.t(a, s)