add menu action to open link picker

Signed-off-by: Julien Veyssier <[email protected]>
nextcloud · Jan 27, 2023 · 2517b7c · 2517b7c
1 parent e7e4711
commit 2517b7c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/src/components/Menu/ActionInsertLink.vue b/src/components/Menu/ActionInsertLink.vue
@@ -67,16 +67,25 @@
 			</template>
 			{{ state.active ? t('text', 'Update link') : t('text', 'Link to website') }}
 		</NcActionButton>
+		<NcActionButton
+			:data-text-action-entry="`${actionEntry.key}-picker`"
+			@click="linkPicker">
+			<template #icon>
+				<LinkVariantPlus />
+			</template>
+			{{ t('text', 'Open link picker') }}
+		</NcActionButton>
 	</NcActions>
 </template>
 
 <script>
 import { NcActions, NcActionButton, NcActionInput } from '@nextcloud/vue'
+import { getLinkWithPicker } from '@nextcloud/vue-richtext'
 import { FilePicker, FilePickerType } from '@nextcloud/dialogs'
 
 import { getMarkAttributes, isActive } from '@tiptap/core'
 
-import { Document, Loading, LinkOff, Web } from '../icons.js'
+import { Document, Loading, LinkOff, Web, LinkVariantPlus } from '../icons.js'
 import { BaseActionEntry } from './BaseActionEntry.js'
 import { optimalPath } from '../../helpers/files.js'
 import { useFileMixin } from '../Editor.provider.js'
@@ -92,6 +101,7 @@ export default {
 		Loading,
 		LinkOff,
 		Web,
+		LinkVariantPlus,
 	},
 	extends: BaseActionEntry,
 	mixins: [
@@ -214,6 +224,19 @@ export default {
 		removeLink() {
 			this.$editor.chain().unsetLink().focus().run()
 		},
+		linkPicker() {
+			getLinkWithPicker()
+				.then(link => {
+					this.$editor
+						.chain()
+						.focus()
+						.insertContent(link + ' ')
+						.run()
+				})
+				.catch(error => {
+					console.error('Link picker promise rejected:', error)
+				})
+		},
 	},
 }
 </script>

diff --git a/src/components/icons.js b/src/components/icons.js
@@ -55,6 +55,7 @@ import MDI_Images from 'vue-material-design-icons/ImageMultipleOutline.vue'
 import MDI_Info from 'vue-material-design-icons/Information.vue'
 import MDI_Link from 'vue-material-design-icons/Link.vue'
 import MDI_LinkOff from 'vue-material-design-icons/LinkOff.vue'
+import MDI_LinkVariantPlus from 'vue-material-design-icons/LinkVariantPlus.vue'
 import MDI_Loading from 'vue-material-design-icons/Loading.vue'
 import MDI_Lock from 'vue-material-design-icons/Lock.vue'
 import MDI_Positive from 'vue-material-design-icons/CheckboxMarkedCircle.vue'
@@ -130,6 +131,7 @@ export const Images = makeIcon(MDI_Images)
 export const Info = makeIcon(MDI_Info)
 export const LinkIcon = makeIcon(MDI_Link)
 export const LinkOff = makeIcon(MDI_LinkOff)
+export const LinkVariantPlus = makeIcon(MDI_LinkVariantPlus)
 export const Lock = makeIcon(MDI_Lock)
 export const Positive = makeIcon(MDI_Positive)
 export const Redo = makeIcon(MDI_Redo)