chore(editor): add composable for injecting the link handler

Signed-off-by: Jonas <jonas@freesources.org>

Author: mejo-

src/components/Editor.provider.ts

@@ -3,15 +3,13 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { openLink } from '../helpers/links.js'
 import { logger } from '../helpers/logger.js'
 
 export const ATTACHMENT_RESOLVER = Symbol('attachment:resolver')
 export const IS_MOBILE = Symbol('editor:is-mobile')
 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 = {
@@ -55,13 +53,3 @@ export const useMentionHook = {
 		},
 	},
 }
-export const useOpenLinkHandler = {
-	inject: {
-		$openLinkHandler: {
-			from: OPEN_LINK_HANDLER,
-			default: {
-				openLink,
-			},
-		},
-	},
-}

src/components/Editor.vue

@@ -96,11 +96,11 @@ import Autofocus from '../extensions/Autofocus.js'
 
 import { provideEditor } from '../composables/useEditor.ts'
 import { provideEditorFlags } from '../composables/useEditorFlags.ts'
+import { useOpenLinkHandler } from '../composables/useOpenLinkHandler.ts'
 import {
 	ATTACHMENT_RESOLVER,
 	HOOK_MENTION_SEARCH,
 	IS_MOBILE,
-	OPEN_LINK_HANDLER,
 } from './Editor.provider.ts'
 import ReadonlyBar from './Menu/ReadonlyBar.vue'
 
@@ -129,7 +129,6 @@ import {
 	serializePlainText,
 } from './../EditorFactory.ts'
 import { createMarkdownSerializer } from './../extensions/Markdown.js'
-import { openLink as defaultOpenLink } from './../helpers/links.js'
 import markdownit from './../markdownit/index.js'
 import isMobile from './../mixins/isMobile.js'
 import AttachmentResolver from './../services/AttachmentResolver.js'
@@ -272,9 +271,7 @@ export default defineComponent({
 			CollaborationCaret.configure({ provider: { awareness } }),
 		]
 		const mentionSearch = inject(HOOK_MENTION_SEARCH)
-		const openLinkHandler = inject(OPEN_LINK_HANDLER, {
-			openLink: defaultOpenLink,
-		})
+		const { openLinkHandler } = useOpenLinkHandler()
 		const editor = isRichEditor
 			? createRichEditor({
 					connection,

src/components/Editor/MarkdownContentEditor.vue

@@ -25,17 +25,17 @@ import Wrapper from './Wrapper.vue'
 /* eslint-disable import/no-named-as-default */
 import { getCurrentUser } from '@nextcloud/auth'
 import { UndoRedo } from '@tiptap/extensions'
-import { inject, provide, watch } from 'vue'
+import { provide, watch } from 'vue'
 import { provideEditor } from '../../composables/useEditor.ts'
 import { editorFlagsKey } from '../../composables/useEditorFlags.ts'
 import { provideEditorHeadings } from '../../composables/useEditorHeadings.ts'
 import { useEditorMethods } from '../../composables/useEditorMethods.ts'
 import { provideEditorWidth } from '../../composables/useEditorWidth.ts'
+import { useOpenLinkHandler } from '../../composables/useOpenLinkHandler.ts'
 import { FocusTrap, RichText } from '../../extensions/index.js'
 import { createMarkdownSerializer } from '../../extensions/Markdown.js'
-import { openLink as defaultOpenLink } from '../../helpers/links.js'
 import AttachmentResolver from '../../services/AttachmentResolver.js'
-import { ATTACHMENT_RESOLVER, OPEN_LINK_HANDLER } from '../Editor.provider.ts'
+import { ATTACHMENT_RESOLVER } from '../Editor.provider.ts'
 import ReadonlyBar from '../Menu/ReadonlyBar.vue'
 import ContentContainer from './ContentContainer.vue'
 
@@ -83,9 +83,7 @@ export default {
 	emits: ['update:content'],
 
 	setup(props) {
-		const openLinkHandler = inject(OPEN_LINK_HANDLER, {
-			openLink: defaultOpenLink,
-		})
+		const { openLinkHandler } = useOpenLinkHandler()
 		const extensions = [
 			RichText.configure({
 				extensions: [UndoRedo],

src/components/Editor/PreviewOptions.vue

@@ -72,8 +72,8 @@ import ContentCopyIcon from 'vue-material-design-icons/ContentCopy.vue'
 import DotsVerticalIcon from 'vue-material-design-icons/DotsVertical.vue'
 import OpenIcon from 'vue-material-design-icons/OpenInNew.vue'
 import DeleteOutlineIcon from 'vue-material-design-icons/TrashCanOutline.vue'
+import { useOpenLinkHandler } from '../../composables/useOpenLinkHandler.ts'
 import CopyToClipboardMixin from '../../mixins/CopyToClipboardMixin.js'
-import { useOpenLinkHandler } from '../Editor.provider.ts'
 
 export default {
 	name: 'PreviewOptions',
@@ -92,7 +92,7 @@ export default {
 		OpenIcon,
 	},
 
-	mixins: [CopyToClipboardMixin, useOpenLinkHandler],
+	mixins: [CopyToClipboardMixin],
 
 	props: {
 		type: {
@@ -105,6 +105,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const { openLinkHandler } = useOpenLinkHandler()
+		return { openLinkHandler }
+	},
+
 	data() {
 		return {
 			open: false,
@@ -127,7 +132,7 @@ export default {
 		},
 		openLink() {
 			if (!this.href) return
-			this.$openLinkHandler.openLink(this.href)
+			this.openLinkHandler.openLink(this.href)
 		},
 		async copyLink() {
 			await this.copyToClipboard(this.href)

src/components/Link/LinkBubbleView.vue

@@ -97,7 +97,7 @@ import CloseIcon from 'vue-material-design-icons/Close.vue'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 import PencilOutlineIcon from 'vue-material-design-icons/PencilOutline.vue'
 
-import { useOpenLinkHandler } from '../Editor.provider.ts'
+import { useOpenLinkHandler } from '../../composables/useOpenLinkHandler.ts'
 import PreviewOptions from '../Editor/PreviewOptions.vue'
 
 const PROTOCOLS_WITH_PREVIEW = ['http:', 'https:']
@@ -129,6 +129,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const { openLinkHandler } = useOpenLinkHandler()
+		return { openLinkHandler }
+	},
+
 	data() {
 		return {
 			isEditable: false,
@@ -191,7 +196,7 @@ export default {
 		},
 
 		openLink(href) {
-			this.$openLinkHandler.openLink(href)
+			this.openLinkHandler.openLink(href)
 		},
 
 		onReferenceListLoaded() {

src/composables/useOpenLinkHandler.ts

@@ -0,0 +1,17 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { inject } from 'vue'
+import { openLink } from '../helpers/links.js'
+
+export const OPEN_LINK_HANDLER = Symbol('editor:open-link-handler')
+
+/**
+ * Inject provided link handler
+ */
+export function useOpenLinkHandler() {
+	const openLinkHandler = inject(OPEN_LINK_HANDLER, { openLink })
+	return { openLinkHandler }
+}

src/editor.js

@@ -11,9 +11,9 @@ import {
 	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'
+import { OPEN_LINK_HANDLER } from './composables/useOpenLinkHandler.ts'
 import { encodeAttachmentFilename } from './helpers/attachmentFilename.ts'
 import { openLink } from './helpers/links.js'
 // eslint-disable-next-line import/no-unresolved, n/no-missing-import