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.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.vue

@@ -100,6 +100,7 @@ import {
 	ATTACHMENT_RESOLVER,
 	HOOK_MENTION_SEARCH,
 	IS_MOBILE,
+	OPEN_LINK_HANDLER,
 } from './Editor.provider.ts'
 import ReadonlyBar from './Menu/ReadonlyBar.vue'
 
@@ -128,6 +129,7 @@ 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'
@@ -270,13 +272,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

@@ -69,6 +69,7 @@ export default Extension.create({
 			relativePath: null,
 			isEmbedded: false,
 			mentionSearch: undefined,
+			openLink: undefined,
 		}
 	},
 
@@ -131,6 +132,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/marks/Link.ts

@@ -30,6 +30,7 @@ const extractHrefFromMarkdownLink = (match: ExtendedRegExpMatchArray) => {
 
 export interface RelativePathLinkOptions extends LinkOptions {
 	relativePath?: string
+	openLink?: (href: string) => void
 }
 
 const parentDefaults: LinkOptions = {
@@ -95,6 +96,7 @@ const Link = TipTapLink.extend<RelativePathLinkOptions>({
 		return {
 			...this.parent?.(),
 			relativePath: undefined,
+			openLink: undefined,
 			...parentDefaults,
 		}
 	},
@@ -237,7 +239,7 @@ const Link = TipTapLink.extend<RelativePathLinkOptions>({
 			.filter((plugin) => !plugin.props.handleClick)
 
 		// Add our own click handler plugin
-		return [...plugins, linkClicking()]
+		return [...plugins, linkClicking(this.options.openLink)]
 	},
 })
 

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)
 						}
 					}
 				},