fix: open non-image attachment

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

src/components/Editor/MediaHandler.vue

@@ -194,7 +194,7 @@ export default {
 				? this.$editor.chain().focus(position)
 				: this.$editor.chain()
 
-			chain.setImage({ src, alt }).run()
+			chain.setImage({ src, alt, fileId, mimeType }).run()
 
 			const selection = this.$editor.view.state.selection
 			if (!selection.empty) {

src/nodes/Image.js

@@ -25,6 +25,9 @@ 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({
 
@@ -100,6 +103,40 @@ 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,23 +141,6 @@ 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) {
@@ -224,16 +207,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
+			return typeof this.mimeType === 'undefined'
+				|| IMAGE_MIMES.indexOf(this.mimeType) !== -1
 		},
 		internalLinkOrImage() {
-			if (this.imageFileId) {
-				return generateUrl('/f/' + this.imageFileId)
+			if (this.fileId) {
+				return generateUrl('/apps/files/f/' + this.fileId)
 			}
 			return this.src
 		},
@@ -257,6 +237,12 @@ export default {
 				})
 			},
 		},
+		fileId() {
+			return this.node.attrs.fileId || null
+		},
+		mimeType() {
+			return this.node.attrs.mimeType || null
+		},
 		t() {
 			return (a, s) => window.t(a, s)
 		},