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

The return of the link handler 👻

Required as we want to pass a link handler from Collectives to be used
for the "Open link" button and when opening a link via Ctrl-click.

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

Author: mejo-

src/EditorFactory.js

@@ -52,6 +52,7 @@ const createRichEditor = ({
 				relativePath,
 				isEmbedded,
 				mentionSearch,
+				openLink,
 			}),
 			FocusTrap,
 			...extensions,

src/components/Editor.vue

@@ -96,6 +96,7 @@ import {
 	FILE,
 	HOOK_MENTION_SEARCH,
 	IS_MOBILE,
+	OPEN_LINK_HANDLER,
 } from './Editor.provider.ts'
 import ReadonlyBar from './Menu/ReadonlyBar.vue'
 
@@ -121,6 +122,7 @@ import {
 	serializePlainText,
 } from './../EditorFactory.js'
 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'
@@ -245,13 +247,17 @@ export default defineComponent({
 			CollaborationCaret.configure({ provider: { awareness } }),
 		]
 		const mentionSearch = inject(HOOK_MENTION_SEARCH)
+		const openLinkHandler = inject(OPEN_LINK_HANDLER, {
+			openLink: defaultOpenLink,
+		})
 		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

@@ -25,16 +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 { provide, watch } from 'vue'
+import { inject, 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 { 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 } from '../Editor.provider.ts'
+import { ATTACHMENT_RESOLVER, OPEN_LINK_HANDLER } from '../Editor.provider.ts'
 import ReadonlyBar from '../Menu/ReadonlyBar.vue'
 import ContentContainer from './ContentContainer.vue'
 
@@ -82,9 +83,13 @@ export default {
 	emits: ['update:content'],
 
 	setup(props) {
+		const openLinkHandler = inject(OPEN_LINK_HANDLER, {
+			openLink: defaultOpenLink,
+		})
 		const extensions = [
 			RichText.configure({
 				extensions: [UndoRedo],
+				openLink: openLinkHandler.openLink,
 			}),
 			FocusTrap,
 		]

src/components/Editor/PreviewOptions.vue

@@ -73,6 +73,7 @@ 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 CopyToClipboardMixin from '../../mixins/CopyToClipboardMixin.js'
+import { useOpenLinkHandler } from '../Editor.provider.ts'
 
 export default {
 	name: 'PreviewOptions',
@@ -91,7 +92,7 @@ export default {
 		OpenIcon,
 	},
 
-	mixins: [CopyToClipboardMixin],
+	mixins: [CopyToClipboardMixin, useOpenLinkHandler],
 
 	props: {
 		type: {
@@ -126,7 +127,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/extensions/RichText.js

@@ -61,6 +61,7 @@ export default Extension.create({
 			relativePath: null,
 			isEmbedded: false,
 			mentionSearch: undefined,
+			openLink: undefined,
 		}
 	},
 
@@ -122,6 +123,7 @@ export default Extension.create({
 				openOnClick: true,
 				shouldAutoLink: (href) => /^https?:\/\//.test(href),
 				relativePath: this.options.relativePath,
+				openLink: this.options.openLink,
 			}),
 			LinkBubble,
 			this.options.editing

src/helpers/links.js

@@ -64,19 +64,7 @@ const isLinkToSelfWithHash = function (href) {
  */
 const openLink = function (href) {
 	const linkUrl = new URL(href, window.location.href)
-	// Consider rerouting links to Collectives if already inside Collectives app
-	const collectivesUrlBase = '/apps/collectives'
-	if (
-		window.OCA.Collectives?.vueRouter
-		&& linkUrl.pathname.toString().startsWith(generateUrl(collectivesUrlBase))
-	) {
-		const collectivesUrl = linkUrl.href.substring(
-			linkUrl.href.indexOf(collectivesUrlBase) + collectivesUrlBase.length,
-		)
-		window.OCA.Collectives.vueRouter.push(collectivesUrl)
-		return
-	}
-	window.open(linkUrl, '_blank')
+	window.open(linkUrl.href, '_blank')
 }
 
 export { domHref, isLinkToSelfWithHash, openLink, parseHref }

src/plugins/links.ts

@@ -137,8 +137,14 @@ export const linkClickingKey = new PluginKey('textHandleClickLink')
  * - Open link in new tab on middle click rather than pasting.
  * - Only open link on ctrl/cmd + left click.
  *   We use the link bubble otherwise.
+ *
+ * @param openLink - the openLink callback function
  */
-export function linkClicking() {
+export function linkClicking(
+	openLink: (href: string) => void = (href) => {
+		window.open(href, '_blank')
+	},
+) {
 	return new Plugin({
 		key: linkClickingKey,
 		props: {
@@ -155,6 +161,7 @@ export function linkClicking() {
 					) {
 						event.preventDefault()
 						event.stopImmediatePropagation()
+						// Open link in new tab on middle click (ignore custom link handler on purpose)
 						window.open(linkEl.href, '_blank')
 					}
 				},
@@ -187,8 +194,8 @@ export function linkClicking() {
 							// Open anchor links directly
 							location.href = linkEl.href
 						} else if (event.ctrlKey || event.metaKey) {
-							// Open link in new tab on Ctrl/Cmd + left click
-							window.open(linkEl.href, '_blank')
+							// Open link directly on Ctrl/Cmd + left click
+							openLink(linkEl.href)
 						}
 					}
 				},