initial take on linking to other files

Tries both approaches: from the menu bubble and the menu bar

Menu bubble works quite well so far.
Only uses absolute paths.

Menu bar uses relative paths.

Pass filepath to Menu bubble so it cat
* start there
* calculate relative paths

Move the logic for relative paths to helper.

Make all strings translateable.

Render relative links properly.
The way we do this for img tags serves as an example.

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

2 files changed, 53 insertions, 0 deletions

diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index 3011369df..fd7c4a987 100644
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -158,6 +158,14 @@ export default {
 				action: (commands) => {
 					this.showImagePrompt(commands.image)
 				},
+			}, {
+				label: t('text', 'Insert link'),
+				class: 'icon-link',
+				isActive: () => {
+				},
+				action: (commands) => {
+					this.showLinkPrompt(commands.link)
+				},
 			}]
 		},
 		childPopoverMenu() {
@@ -199,6 +207,10 @@ export default {
 			return this.lastImagePath
 				|| this.filePath.split('/').slice(0, -1).join('/')
 		},
+		linkPath() {
+			return this.lastLinkPath
+				|| this.filePath.split('/').slice(0, -1).join('/')
+		},
 	},
 	mounted() {
 		window.addEventListener('resize', this.getWindowWidth)
@@ -266,6 +278,26 @@ export default {
 				})
 			}, false, [], true, undefined, this.imagePath)
 		},
+		showLinkPrompt(command) {
+			const currentUser = OC.getCurrentUser()
+			if (!currentUser) {
+				return
+			}
+			const _command = command
+			OC.dialogs.filepicker('Insert a link', (file) => {
+				const client = OC.Files.getClient()
+				client.getFileInfo(file).then((_status, fileInfo) => {
+					this.lastLinkPath = fileInfo.path
+					const path = this.optimalPathTo(`${fileInfo.path}/${fileInfo.name}`)
+					const encodedPath = path.split('/').map(encodeURIComponent).join('/')
+					const href = `${encodedPath}?fileId=${fileInfo.id}`
+
+					_command({
+						href,
+					})
+				})
+			}, false, [], true, undefined, this.linkPath)
+		},
 		optimalPathTo(targetFile) {
 			const absolutePath = targetFile.split('/')
 			const relativePath = this.relativePathTo(targetFile).split('/')
diff --git a/src/components/MenuBubble.vue b/src/components/MenuBubble.vue
index 8f8505f1c..6df4f4ee9 100644
--- a/src/components/MenuBubble.vue
+++ b/src/components/MenuBubble.vue
@@ -27,6 +27,9 @@
 		@hide="hideLinkMenu">
 		<div class="menububble" :class="{ 'is-active': menu.isActive }" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`">
 			<form v-if="linkMenuIsActive" class="menububble__form" @submit.prevent="setLinkUrl(commands.link, linkUrl)">
+				<button
+					class="icon-file"
+					@click="selectFile(commands.link)" />
 				<input ref="linkInput"
 					v-model="linkUrl"
 					class="menububble__input"
@@ -87,6 +90,24 @@ export default {
 			this.linkMenuIsActive = false
 		},
 
+		selectFile(command) {
+			const currentUser = OC.getCurrentUser()
+			if (!currentUser) {
+				return
+			}
+			OC.dialogs.filepicker('Select file to link to', (file) => {
+				const client = OC.Files.getClient()
+				client.getFileInfo(file).then((_status, fileInfo) => {
+					// todo: use optimal path
+					const path = (`${fileInfo.path}/${fileInfo.name}`)
+					const encodedPath = path.split('/').map(encodeURIComponent).join('/')
+					const href = `${encodedPath}?fileId=${fileInfo.id}`
+
+					this.setLinkUrl(command, href)
+				})
+			}, false, [], true)
+			// todo: ,  undefined, this.linkPath)
+		},
 		setLinkUrl(command, url) {
 			if (url && !url.match(/^[a-zA-Z]+:\/\//) && !url.match(/^\//)) {
 				url = 'https://' + url