Merge pull request #2672 from nextcloud/fix/stable24/link_handling

Backport link fixes to stable24
nextcloud · Jul 6, 2022 · 0ca9864 · 0ca9864
2 parents e1f374f + 0a5c403
commit 0ca9864
Show file tree

Hide file tree

Showing 13 changed files with 90 additions and 68 deletions.
diff --git a/js/editor.js b/js/editor.js
diff --git a/js/editor.js.map b/js/editor.js.map
diff --git a/js/text-files.js b/js/text-files.js
diff --git a/js/text-files.js.map b/js/text-files.js.map
diff --git a/js/text-public.js b/js/text-public.js
diff --git a/js/text-public.js.map b/js/text-public.js.map
diff --git a/js/text-text.js b/js/text-text.js
diff --git a/js/text-text.js.map b/js/text-text.js.map
diff --git a/js/text-viewer.js b/js/text-viewer.js
diff --git a/js/text-viewer.js.map b/js/text-viewer.js.map
diff --git a/src/helpers/links.js b/src/helpers/links.js
@@ -21,6 +21,7 @@
  */
 
 import { generateUrl } from '@nextcloud/router'
+import markdownit from './../markdownit/index.js'
 
 const absolutePath = function(base, rel) {
 	if (!rel) {
@@ -77,7 +78,38 @@ const parseHref = function(dom) {
 	return ref
 }
 
+const openLink = function(event, _attrs) {
+	const linkElement = event.target.closest('a')
+	const htmlHref = linkElement.href
+	const query = OC.parseQueryString(htmlHref)
+	const fragment = OC.parseQueryString(htmlHref.split('#').pop())
+	if (query.dir && fragment.relPath) {
+		const filename = fragment.relPath.split('/').pop()
+		const path = `${query.dir}/${filename}`
+		document.title = `${filename} - ${OC.theme.title}`
+		if (window.location.pathname.match(/apps\/files\/$/)) {
+			// The files app still lacks a popState handler
+			// to allow for using the back button
+			// OC.Util.History.pushState('', htmlHref)
+		}
+		OCA.Viewer.open({ path })
+		return
+	}
+	if (query.fileId) {
+		// open the direct file link
+		window.open(generateUrl(`/f/${query.fileId}`))
+		return
+	}
+	if (!markdownit.validateLink(htmlHref)) {
+		console.error('Invalid link', htmlHref)
+		return false
+	}
+	window.open(htmlHref)
+	return true
+}
+
 export {
 	domHref,
 	parseHref,
+	openLink,
 }
diff --git a/src/marks/Link.js b/src/marks/Link.js
@@ -21,20 +21,29 @@
  */
 
 import TipTapLink from '@tiptap/extension-link'
-import { domHref, parseHref } from './../helpers/links.js'
+import { domHref, parseHref, openLink } from './../helpers/links.js'
 import { clickHandler } from '../plugins/link.js'
 
 const Link = TipTapLink.extend({
 
-	attrs: {
-		href: {
-			default: null,
-		},
+	addOptions() {
+		return {
+			...this.parent?.(),
+			onClick: openLink,
+		}
+	},
+
+	addAttributes() {
+		return {
+			href: {
+				default: null,
+			},
+		}
 	},
 
 	inclusive: false,
 
-	parseDOM: [
+	parseHTML: [
 		{
 			tag: 'a[href]',
 			getAttrs: dom => ({
@@ -43,10 +52,10 @@ const Link = TipTapLink.extend({
 		},
 	],
 
-	toDOM: node => ['a', {
-		...node.attrs,
-		href: domHref(node),
-		title: node.attrs.href,
+	renderHTML: ({ mark, HTMLAttributes }) => ['a', {
+		...mark.attrs,
+		href: domHref(mark),
+		title: mark.attrs.href,
 		rel: 'noopener noreferrer nofollow',
 	}, 0],
 
@@ -62,7 +71,14 @@ const Link = TipTapLink.extend({
 		}
 
 		// add custom click handler
-		return [...plugins, clickHandler({ editor: this.editor, type: this.type })]
+		return [
+			...plugins,
+			clickHandler({
+				editor: this.editor,
+				type: this.type,
+				onClick: this.options.onClick,
+			}),
+		]
 	},
 })
 

diff --git a/src/plugins/link.js b/src/plugins/link.js
@@ -1,51 +1,25 @@
-import { generateUrl } from '@nextcloud/router'
-import { Plugin } from 'prosemirror-state'
-import markdownit from './../markdownit/index.js'
+import { Plugin, PluginKey } from 'prosemirror-state'
 
-const clickHandler = ({ editor }) => {
+const clickHandler = ({ editor, type, onClick }) => {
 	return new Plugin({
 		props: {
+			key: new PluginKey('textLink'),
 			handleClick: (view, pos, event) => {
-				const linkElement = event.target.parentElement instanceof HTMLAnchorElement
-					? event.target.parentElement
-					: event.target
-
-				const isLink = linkElement && linkElement instanceof HTMLAnchorElement
-
-				const htmlHref = linkElement?.href
+				const $clicked = view.state.doc.resolve(pos)
+				const link = $clicked.marks().find(m => m.type.name === type.name)
+				if (!link) {
+					return false
+				}
+				if (!link.attrs.href) {
+					console.warn('Could not determine href of link.')
+					console.debug(link)
+					return false
+				}
 
-				// is handleable link
-				if (htmlHref && isLink) {
+				// We use custom onClick handler only for left clicks
+				if (event.button === 0 && !event.ctrlKey) {
 					event.stopPropagation()
-
-					if (event.button === 0 && !event.ctrlKey && htmlHref.startsWith(window.location.origin)) {
-						const query = OC.parseQueryString(htmlHref)
-						const fragment = OC.parseQueryString(htmlHref.split('#').pop())
-						if (query.dir && fragment.relPath) {
-							const filename = fragment.relPath.split('/').pop()
-							const path = `${query.dir}/${filename}`
-							document.title = `${filename} - ${OC.theme.title}`
-							if (window.location.pathname.match(/apps\/files\/$/)) {
-								// The files app still lacks a popState handler
-								// to allow for using the back button
-								// OC.Util.History.pushState('', htmlHref)
-							}
-							OCA.Viewer.open({ path })
-							return
-						}
-						if (query.fileId) {
-							// open the direct file link
-							window.open(generateUrl(`/f/${query.fileId}`))
-							return
-						}
-					}
-
-					if (!markdownit.validateLink(htmlHref)) {
-						console.error('Invalid link', htmlHref)
-						return
-					}
-
-					window.open(htmlHref)
+					return onClick?.(event, link.attrs)
 				}
 			},
 		},