Merge pull request #8368 from nextcloud/fix/link_menu_custom_action

fix(menubar): Allow to inject custom link action

Author: mejo-

src/components/Editor.provider.ts

@@ -12,6 +12,7 @@ export const EDITOR_UPLOAD = Symbol('editor:upload')
 export const HOOK_MENTION_SEARCH = Symbol('hook:mention-search')
 export const HOOK_MENTION_INSERT = Symbol('hook:mention-insert')
 export const OPEN_LINK_HANDLER = Symbol('editor:open-link-handler')
+export const HOOK_MENUBAR_LINK_CUSTOM_ACTION = Symbol('menubar:link-custom-action')
 
 export const useIsMobileMixin = {
 	inject: {

src/components/Menu/ActionInsertLink.vue

@@ -33,6 +33,12 @@
 			</template>
 			{{ t('text', 'Remove link') }}
 		</NcActionButton>
+		<NcActionButton v-if="hasMenubarLinkCustomAction" @click="linkCustomAction">
+			<template #icon>
+				<component :is="menubarLinkCustomAction.icon" />
+			</template>
+			{{ menubarLinkCustomAction.label }}
+		</NcActionButton>
 		<NcActionButton
 			v-if="!isUsingDirectEditing"
 			ref="buttonFile"
@@ -92,6 +98,7 @@ import { t } from '@nextcloud/l10n'
 import { useFileProps } from '../../composables/useFileProps.ts'
 import { useLinkFile } from '../../composables/useLinkFile.ts'
 import { useNetworkState } from '../../composables/useNetworkState.ts'
+import { HOOK_MENUBAR_LINK_CUSTOM_ACTION } from '../Editor.provider.ts'
 import { Document, LinkOff, Loading, Shape, Web } from '../icons.js'
 import { BaseActionEntry } from './BaseActionEntry.js'
 import { useMenuIDMixin } from './MenuBar.provider.js'
@@ -110,6 +117,12 @@ export default {
 	},
 	extends: BaseActionEntry,
 	mixins: [useMenuIDMixin],
+	inject: {
+		menubarLinkCustomAction: {
+			from: HOOK_MENUBAR_LINK_CUSTOM_ACTION,
+			default: null,
+		},
+	},
 	setup() {
 		const base = BaseActionEntry.setup()
 		const { networkOnline } = useNetworkState()
@@ -135,6 +148,12 @@ export default {
 		activeClass() {
 			return this.state.active ? 'is-active' : ''
 		},
+		hasMenubarLinkCustomAction() {
+			return (
+				typeof this.menubarLinkCustomAction?.action === 'function'
+				&& this.menubarLinkCustomAction?.icon
+			)
+		},
 	},
 	methods: {
 		/**
@@ -207,17 +226,33 @@ export default {
 		linkPicker() {
 			getLinkWithPicker(null, true)
 				.then((link) => {
-					const chain = this.editor?.chain()
-					if (this.editor?.view.state?.selection.empty) {
-						chain.focus().insertPreview(link).run()
-					} else {
-						chain.setLink({ href: link }).focus().run()
-					}
+					this.insertLink(link)
 				})
 				.catch((error) => {
 					console.error('Smart picker promise rejected', error)
 				})
 		},
+		linkCustomAction() {
+			this.menubarLinkCustomAction
+				.action()
+				.then((link) => {
+					this.insertLink(link)
+				})
+				.catch((error) => {
+					console.error('Custom link action promise rejected', error)
+				})
+		},
+		insertLink(link) {
+			if (!link) {
+				return
+			}
+			const chain = this.editor?.chain()
+			if (this.editor?.view.state?.selection.empty) {
+				chain.focus().insertPreview(link).run()
+			} else {
+				chain.setLink({ href: link }).focus().run()
+			}
+		},
 		t,
 	},
 }

src/editor.js

@@ -10,6 +10,7 @@ import {
 	EDITOR_UPLOAD,
 	HOOK_MENTION_INSERT,
 	HOOK_MENTION_SEARCH,
+	HOOK_MENUBAR_LINK_CUSTOM_ACTION,
 	OPEN_LINK_HANDLER,
 } from './components/Editor.provider.ts'
 import { ACTION_ATTACHMENT_PROMPT } from './components/Editor/MediaHandler.provider.js'
@@ -249,6 +250,7 @@ window.OCA.Text.createEditor = async function ({
 		component: null,
 		props: null,
 	},
+	menubarLinkCustomAction = undefined,
 
 	onCreate = ({ markdown }) => {},
 	onLoaded = () => {},
@@ -296,6 +298,7 @@ window.OCA.Text.createEditor = async function ({
 						]
 					},
 				},
+				[HOOK_MENUBAR_LINK_CUSTOM_ACTION]: menubarLinkCustomAction,
 			}
 		},
 		data() {