fix(files): add "Link to file or folder" and "Upload" buttons

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

src/components/SuggestionsBar.vue

@@ -1,22 +1,22 @@
 <template>
 	<div class="container-suggestions">
-		<NcButton type="tertiary"
+		<NcButton ref="linkFileOrFolder"
+			type="tertiary"
 			size="normal"
-			@click="$callChooseLocalAttachment">
+			@click="linkFile">
 			<template #icon>
 				<Document :size="20" />
 			</template>
-			{{ t('text', 'Add image') }}
+			{{ t('text', 'Link to file or folder') }}
 		</NcButton>
 
-		<NcButton ref="suggestButtonFile"
-			type="tertiary"
+		<NcButton type="tertiary"
 			size="normal"
 			@click="$callChooseLocalAttachment">
 			<template #icon>
 				<Document :size="20" />
 			</template>
-			{{ t('text', 'Link to file') }}
+			{{ t('text', 'Upload') }}
 		</NcButton>
 
 		<NcButton type="tertiary"
@@ -44,7 +44,9 @@ import { NcButton } from '@nextcloud/vue'
 import { Document, Table, Shape } from './icons.js'
 import { useActionChooseLocalAttachmentMixin } from './Editor/MediaHandler.provider.js'
 import { getLinkWithPicker } from '@nextcloud/vue/dist/Components/NcRichText.js'
-import { useEditorMixin } from './Editor.provider.js'
+import { useEditorMixin, useFileMixin } from './Editor.provider.js'
+import { FilePickerType, getFilePickerBuilder } from '@nextcloud/dialogs'
+import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'SuggestionsBar',
@@ -57,9 +59,26 @@ export default {
 	mixins: [
 		useActionChooseLocalAttachmentMixin,
 		useEditorMixin,
+		useFileMixin,
 	],
 
+	data: () => {
+		return {
+			startPath: null,
+		}
+	},
+
+	computed: {
+		relativePath() {
+			return this.$file?.relativePath ?? '/'
+		},
+	},
+
 	methods: {
+		/**
+		 * Open smart picker dialog
+		 * Triggered by the "Smart Picker" button
+		 */
 		linkPicker() {
 			getLinkWithPicker(null, true)
 				.then(link => {
@@ -74,9 +93,90 @@ export default {
 					console.error('Smart picker promise rejected', error)
 				})
 		},
+
+		/**
+		 * Insert table
+		 * Triggered by the "Insert table" button
+		 */
 		insertTable() {
 			this.$editor.chain().focus().insertTable()?.run()
 		},
+
+		/**
+		 * Open dialog and ask user which file to link to
+		 * Triggered by the "link to file or folder" button
+		 */
+		linkFile() {
+			if (this.startPath === null) {
+				this.startPath = this.relativePath.split('/').slice(0, -1).join('/')
+			}
+
+			const filePicker = getFilePickerBuilder(t('text', 'Select file or folder to link to'))
+				.startAt(this.startPath)
+				.allowDirectories(true)
+				.setMultiSelect(false)
+				.setType(FilePickerType.Choose)
+				.build()
+
+			filePicker.pick()
+				.then((file) => {
+					const client = OC.Files.getClient()
+					client.getFileInfo(file).then((_status, fileInfo) => {
+						const url = new URL(generateUrl(`/f/${fileInfo.id}`), window.origin)
+						this.setLink(url.href, fileInfo.name)
+						this.startPath = fileInfo.path + (fileInfo.type === 'dir' ? `/${fileInfo.name}/` : '')
+					})
+				})
+				.catch(() => {
+					// do not close menu but keep focus
+					this.$refs.linkFileOrFolder.$el.focus()
+				})
+		},
+
+		/**
+		 * Save user entered URL as a link markup
+		 * Triggered when the user submits the ActionInput
+		 *
+		 * @param {string} url href attribute of the link
+		 * @param {string} text Text part of the link
+		 */
+		setLink(url, text) {
+			// Heuristics for determining if we need a https:// prefix.
+			const noPrefixes = [
+				/^[a-zA-Z]+:/, // url with protocol ("mailTo:email@domain.tld")
+				/^\//, // absolute path
+				/\?fileId=/, // relative link with fileId
+				/^\.\.?\//, // relative link starting with ./ or ../
+				/^[^.]*[/$]/, // no dots before first '/' - not a domain name
+				/^#/, // url fragment
+			]
+			if (url && !noPrefixes.find(regex => url.match(regex))) {
+				url = 'https://' + url
+			}
+
+			// Avoid issues when parsing urls later on in markdown that might be entered in an invalid format (e.g. "mailto: example@example.com")
+			const href = url.replaceAll(' ', '%20')
+			const chain = this.$editor.chain()
+			// Check if any text is selected, if not insert the link using the given text property
+			if (this.$editor.view.state?.selection.empty) {
+				chain.insertContent({
+					type: 'paragraph',
+					content: [{
+						type: 'text',
+						marks: [{
+							type: 'link',
+							attrs: {
+								href,
+							},
+						}],
+						text,
+					}],
+				})
+			} else {
+				chain.setLink({ href })
+			}
+			chain.focus().run()
+		},
 	},
 
 }