diff options
author | Azul <azul@riseup.net> | 2020-06-05 16:44:13 +0300 |
---|---|---|
committer | Azul <azul@riseup.net> | 2020-06-09 19:04:12 +0300 |
commit | 1ceb5e4a7d7ffd246e39a70ea76df7c2f263a921 (patch) | |
tree | 401b08edd1f3564bff3894a25294bc947e625e04 /src | |
parent | c85dab9c5c48271dff8c91c5d889da75f0d8b19e (diff) |
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>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/EditorWrapper.vue | 1 | ||||
-rw-r--r-- | src/components/MenuBar.vue | 26 |
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> |