Improvements on images/attachments

2 files changed, 35 insertions, 25 deletions

diff --git a/src/components/EditorEasyMDE.vue b/src/components/EditorEasyMDE.vue
index 33f42acb..63e76b2e 100644
--- a/src/components/EditorEasyMDE.vue
+++ b/src/components/EditorEasyMDE.vue
@@ -9,14 +9,14 @@
 				<ActionButton
 					icon="icon-upload"
 					:close-after-click="true"
-					@click="onClickUpload"
+					@click="onClickUploadImage"
 				>
 					{{ t('notes', 'Upload image') }}
 				</ActionButton>
 				<ActionButton
 					icon="icon-picture"
 					:close-after-click="true"
-					@click="onClickSelect"
+					@click="onClickInsertImage"
 				>
 					{{ t('notes', 'Insert image') }}
 				</ActionButton>
@@ -171,7 +171,7 @@ export default {
 			}
 		},
 
-		async onClickSelect() {
+		async onClickInsertImage() {
 			const apppath = '/' + store.state.app.settings.notesPath + '/'
 			const currentNotePath = apppath + this.notecategory
 
@@ -190,7 +190,8 @@ export default {
 					}
 					const label = basename(path)
 					const relativePath = relative(currentNotePath, path)
-					doc.replaceRange('![' + label + '](' + relativePath + ')\n', { line: cursor.line })
+					const encodedPath = relativePath.split('/').map(encodeURIComponent).join('/')
+					doc.replaceRange('![' + label + '](' + encodedPath + ')\n', { line: cursor.line })
 					this.mde.codemirror.focus()
 				},
 				false,
@@ -201,7 +202,7 @@ export default {
 			)
 		},
 
-		async onClickUpload() {
+		async onClickUploadImage() {
 			const cm = this.mde.codemirror
 			const doc = this.mde.codemirror.getDoc()
 			const cursor = this.mde.codemirror.getCursor()
diff --git a/src/components/EditorMarkdownIt.vue b/src/components/EditorMarkdownIt.vue
index 16687736..340fac7d 100644
--- a/src/components/EditorMarkdownIt.vue
+++ b/src/components/EditorMarkdownIt.vue
@@ -63,25 +63,38 @@ export default {
 				// If you are sure other plugins can't add `target` - drop check below
 				const token = tokens[idx]
 				const aIndex = token.attrIndex('src')
+				let download = false
 				let path = token.attrs[aIndex][1]
 
-				if (!path.startsWith('http')) {
-					path = generateUrl('apps/notes/notes/{id}/attachment?path={path}', { id, path })
+				if (!path.startsWith('http://')
+					&& !path.startsWith('https://')
+					&& !path.startsWith('data:')
+				) {
+					path = path.split('?').shift()
+					const lowecasePath = path.toLowerCase()
+					path = generateUrl(
+						'apps/notes/notes/{id}/attachment?path={path}',
+						{ id, path: decodeURIComponent(path) },
+					)
+					token.attrs[aIndex][1] = path
+
+					if (!lowecasePath.endsWith('.jpg')
+						&& !lowecasePath.endsWith('.jpeg')
+						&& !lowecasePath.endsWith('.bmp')
+						&& !lowecasePath.endsWith('.webp')
+						&& !lowecasePath.endsWith('.gif')
+						&& !lowecasePath.endsWith('.png')
+					) {
+						download = true
+					}
 				}
 
-				token.attrs[aIndex][1] = path
-				const lowecasePath = path.toLowerCase()
-				// pass token to default renderer.
-				if (lowecasePath.endsWith('jpg')
-					|| lowecasePath.endsWith('jpeg')
-					|| lowecasePath.endsWith('bmp')
-					|| lowecasePath.endsWith('webp')
-					|| lowecasePath.endsWith('gif')
-					|| lowecasePath.endsWith('png')) {
-					return defaultRender(tokens, idx, options, env, self)
-				} else {
+				if (download) {
 					const dlimgpath = generateUrl('svg/core/actions/download?color=ffffff')
 					return '<div class="download-file"><a href="' + path.replace(/"/g, '&quot;') + '"><div class="download-icon"><img class="download-icon-inner" src="' + dlimgpath + '">' + token.content + '</div></a></div>'
+				} else {
+					// pass token to default renderer.
+					return defaultRender(tokens, idx, options, env, self)
 				}
 			}
 		},
@@ -189,23 +202,17 @@ export default {
 
 	& img {
 		width: 75%;
-		margin-left: auto;
-		margin-right: auto;
 		display: block;
 	}
 
 	.download-file {
 		width: 75%;
-		margin-left: auto;
-		margin-right: auto;
 		display: block;
 		text-align: center;
 	}
 
 	.download-icon {
 		padding: 15px;
-		margin-left: auto;
-		margin-right: auto;
 		width: 75%;
 		border-radius: 10px;
 		background-color: var(--color-background-dark);
@@ -213,12 +220,14 @@ export default {
 	}
 
 	.download-icon:hover {
-		border: 1px var(--color-primary-element) solid;
+		border-color: var(--color-primary-element);
 	}
 
 	.download-icon-inner {
 		height: 3em;
 		width: auto;
+		margin-left: auto;
+		margin-right: auto;
 		margin-bottom: 5px;
 	}