fix(links): Add open button to link bubble

Fixes: #1226

Signed-off-by: Jonas <[email protected]>

Author: mejo-

src/components/Link/LinkBubbleView.vue

@@ -10,6 +10,16 @@
 			<div class="link-view-bubble__title">
 				{{ title }}
 			</div>
+			<!-- open link -->
+			<NcButton
+				:title="t('text', 'Open link')"
+				:aria-label="t('text', 'Open link')"
+				type="tertiary"
+				@click="openLink(href)">
+				<template #icon>
+					<OpenInNewIcon :size="20" />
+				</template>
+			</NcButton>
 			<!-- copy link -->
 			<NcButton :title="copyLinkTooltip"
 				:aria-label="copyLinkTooltip"
@@ -96,9 +106,11 @@ import CheckIcon from 'vue-material-design-icons/Check.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import ContentCopyIcon from 'vue-material-design-icons/ContentCopy.vue'
 import LinkOffIcon from 'vue-material-design-icons/LinkOff.vue'
+import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 import PencilIcon from 'vue-material-design-icons/Pencil.vue'
 
 import CopyToClipboardMixin from '../../mixins/CopyToClipboardMixin.js'
+import { openLink } from '../../helpers/links.js'
 
 const PROTOCOLS_WITH_PREVIEW = ['http:', 'https:']
 
@@ -114,6 +126,7 @@ export default {
 		NcReferenceList,
 		NcTextField,
 		LinkOffIcon,
+		OpenInNewIcon,
 		PencilIcon,
 	},
 
@@ -193,6 +206,7 @@ export default {
 	},
 
 	methods: {
+		openLink,
 		t,
 
 		resetBubble() {

src/helpers/links.js

@@ -56,8 +56,27 @@ const isLinkToSelfWithHash = function(href) {
 	return href?.startsWith('#') || href?.startsWith(locationNoHash + '#')
 }
 
+/**
+ * Open links, to be used as custom click handler
+ *
+ * @param {string} href the link 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')
+}
+
 export {
 	domHref,
 	parseHref,
 	isLinkToSelfWithHash,
+	openLink,
 }

src/plugins/LinkBubblePluginView.js

@@ -109,7 +109,13 @@ class LinkBubblePluginView {
 	}
 
 	updateTooltip(view, { mark, nodeStart }) {
-		let referenceEl = view.nodeDOM(nodeStart)
+		let referenceEl
+		try {
+			referenceEl = view.nodeDOM(nodeStart)
+		} catch (e) {
+			// Prevent throwing error at rerouting in `openLink()`
+			return
+		}
 		if (Object.prototype.toString.call(referenceEl) === '[object Text]') {
 			referenceEl = referenceEl.parentElement
 		}