Merge pull request #8571 from nextcloud/fix/link_handler

fix(links): allow to pass custom link handler into editor and use it

Author: mejo-

playwright/e2e/conflict.spec.ts

@@ -335,12 +335,14 @@ test('conflict dialog is sticky when scrolling', async ({
 	const pushPromise = page.waitForRequest(/push/)
 	await editor.typeHeading('Long content\n')
 	await pushPromise
-	await setOffline()
 
 	for (let i = 1; i < 8; i++) {
 		await editor.typeHeading(`Section ${i}`)
 		await editor.type('\n\nLorem ipsum dolor sit amet.\n\n')
 	}
+
+	await setOffline()
+	await editor.type('unsaved changes')
 	await close()
 
 	await setOnline()

src/EditorFactory.ts

@@ -45,12 +45,14 @@ const createRichEditor = ({
 	relativePath,
 	isEmbedded = false,
 	mentionSearch = undefined,
+	openLink = undefined,
 }: {
 	extensions?: Extension[]
 	connection?: Connection
 	relativePath?: string
 	isEmbedded?: boolean
 	mentionSearch?: (query: string) => Promise<Record<string, string>>
+	openLink?: (href: string) => void
 } = {}) => {
 	return new Editor({
 		editorProps,
@@ -60,6 +62,7 @@ const createRichEditor = ({
 				relativePath,
 				isEmbedded,
 				mentionSearch,
+				openLink,
 			}),
 			FocusTrap,
 			...extensions,

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,6 +96,7 @@ 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,
@@ -269,14 +270,16 @@ export default defineComponent({
 			Collaboration.configure({ document: ydoc }),
 			CollaborationCaret.configure({ provider: { awareness } }),
 		]
-		const mentionSearch = inject(HOOK_MENTION_SEARCH)
+		const mentionSearch = inject(HOOK_MENTION_SEARCH, undefined)
+		const { openLinkHandler } = useOpenLinkHandler()
 		const editor = isRichEditor
 			? createRichEditor({
 					connection,
 					relativePath: props.relativePath,
 					extensions,
 					isEmbedded: props.isEmbedded,
 					mentionSearch,
+					openLink: openLinkHandler.openLink,
 				})
 			: createPlainEditor({ language, extensions })
 		provideEditor(editor)

src/components/Editor/MarkdownContentEditor.vue

@@ -31,6 +31,7 @@ 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 AttachmentResolver from '../../services/AttachmentResolver.js'
@@ -82,9 +83,11 @@ export default {
 	emits: ['update:content'],
 
 	setup(props) {
+		const { openLinkHandler } = useOpenLinkHandler()
 		const extensions = [
 			RichText.configure({
 				extensions: [UndoRedo],
+				openLink: openLinkHandler.openLink,
 			}),
 			FocusTrap,
 		]

src/components/Editor/PreviewOptions.vue

@@ -72,6 +72,7 @@ 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'
 
 export default {
@@ -104,6 +105,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const { openLinkHandler } = useOpenLinkHandler()
+		return { openLinkHandler }
+	},
+
 	data() {
 		return {
 			open: false,
@@ -126,7 +132,7 @@ export default {
 		},
 		openLink() {
 			if (!this.href) return
-			window.open(this.href, '_blank').focus()
+			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:']
@@ -116,8 +116,6 @@ export default {
 		PencilOutlineIcon,
 	},
 
-	mixins: [useOpenLinkHandler],
-
 	props: {
 		editor: {
 			type: Object,
@@ -129,6 +127,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const { openLinkHandler } = useOpenLinkHandler()
+		return { openLinkHandler }
+	},
+
 	data() {
 		return {
 			isEditable: false,
@@ -191,7 +194,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

src/extensions/LinkBubble.js

@@ -4,7 +4,7 @@
  */
 
 import { Extension } from '@tiptap/core'
-import { hideLinkBubble, linkBubble } from '../plugins/links.js'
+import { hideLinkBubble, linkBubble } from '../plugins/links.ts'
 
 const LinkBubble = Extension.create({
 	name: 'linkViewBubble',