image: use relative path in src if shorter than absolute

* hand the path of the file that is currently edited to the menubar
  as a prop
* calculate the relative path when inserting an image
* compare the number of path separators in the relative and absolute path
* use relative path if it has fewer separators

Also escape the paths and filename in the src
so filenames and paths with spaces work.
Do not escape the slashes
that separate the path components
- slashes are fine in urls and easier to read.

The algorithm will pick
/some/common/and/different/paths/file.jpg
over
../../../and/different/paths/file.jpg

On the other hand it will pick
../../and/different/paths/file.jpg
over
/some/common/and/different/paths/file.jpg

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

2 files changed, 26 insertions, 1 deletions

diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
index 39e428b7d..a51031bd9 100644
--- a/src/components/EditorWrapper.vue
+++ b/src/components/EditorWrapper.vue
@@ -35,6 +35,7 @@
 				<MenuBar v-if="!syncError && !readOnly"
 					ref="menubar"
 					:editor="tiptap"
+					:filePath="relativePath"
 					:is-rich-editor="isRichEditor"
 					:is-public="isPublic"
 					:autohide="autohide">
diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index 6ca4727a7..cc4ada96b 100644
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -112,6 +112,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		filePath: {
+			type: String,
+			required: false,
+			default: '',
+		},
 	},
 	data: () => {
 		return {
@@ -243,8 +248,10 @@ export default {
 						mimetype: fileInfo.mimetype,
 						hasPreview: fileInfo.hasPreview,
 					}
+					const path = this.optimalPathTo(`${fileInfo.path}/${fileInfo.name}`)
+					const encodedPath = path.split('/').map(encodeURIComponent).join('/')
 					const meta = Object.entries(appendMeta).map(([key, val]) => `${key}=${encodeURIComponent(val)}`).join('&')
-					const src = `${fileInfo.path}/${fileInfo.name}?fileId=${fileInfo.id}#${meta}`
+					const src = `${encodedPath}?fileId=${fileInfo.id}#${meta}`
 
 					_command({
 						src: src,
@@ -253,6 +260,23 @@ export default {
 				})
 			}, false, [], true)
 		},
+		optimalPathTo(targetFile) {
+			const absolutePath = targetFile.split('/')
+			const relativePath = this.relativePathTo(targetFile).split('/')
+			return relativePath.length < absolutePath.length
+				? relativePath.join('/')
+				: targetFile
+		},
+		relativePathTo(targetFile) {
+			const current = this.filePath.split('/')
+			const target = targetFile.split('/')
+			current.pop() // ignore filename
+			while (current[0] === target[0]) {
+				current.shift()
+				target.shift()
+			}
+			return current.fill('..').concat(target).join('/')
+		},
 	},
 }
 </script>