Merge pull request #8397 from nextcloud-libraries/fix/noid/external-links

Author: Antreesy

src/components/NcRichText/NcRichText.vue

@@ -320,6 +320,7 @@ import { RouterLink } from 'vue-router'
 import NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'
 import NcReferenceList from './NcReferenceList.vue'
 import NcRichTextCopyButton from './NcRichTextCopyButton.vue'
+import NcRichTextExternalLink from './NcRichTextExternalLink.vue'
 import { createElementId } from '../../utils/createElementId.ts'
 import { getRoute, parseUrl, remarkAutolink } from './autolink.ts'
 import { remarkPlaceholder } from './remarkPlaceholder.ts'
@@ -532,11 +533,9 @@ export default {
 						return entry
 					}
 					const { component, props } = entry
-					// do not override class of NcLink
-					const componentClass = component.name === 'NcLink' ? undefined : 'rich-text--component'
 					return h(component, {
 						...props,
-						class: componentClass,
+						class: 'rich-text--component',
 					})
 				})
 			}
@@ -632,6 +631,7 @@ export default {
 				if (String(type) === 'a') {
 					const route = getRoute(this.$router, props.href)
 					if (route) {
+						// Resolved link to this app; render RouterLink
 						delete props.href
 						delete props.target
 
@@ -640,6 +640,18 @@ export default {
 							to: route,
 						}, { default: () => children })
 					}
+
+					const isAllowedScheme = /^(https?:\/\/|tel:|mailto:)/.test(props.href)
+					if (isAllowedScheme) {
+						// External link; render normally, open in the new tab
+						props.href = props.href.trim()
+						return h(NcRichTextExternalLink, props, children)
+					} else {
+						// Unresolved relative link that does not belong to this app; render only children
+						delete props.href
+						delete props.target
+						return h('span', props, children)
+					}
 				}
 				return h(type, props, children)
 			}
@@ -684,13 +696,6 @@ export default {
 	.rich-text--fallback, .rich-text-component {
 		display: inline;
 	}
-
-	.rich-text--external-link {
-		text-decoration: underline;
-		&:after {
-			content: ' ↗';
-		}
-	}
 }
 
 /* Markdown styles */

src/components/NcRichText/NcRichTextExternalLink.vue

@@ -0,0 +1,41 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+const { href, decorateExternal = false } = defineProps<{
+	/** Link attribute to render */
+	href: string
+	/** Whether to add the appended arrow decoration */
+	decorateExternal?: boolean
+}>()
+</script>
+
+<template>
+	<a
+		:href="href"
+		rel="noopener noreferrer"
+		target="_blank"
+		:class="[$style.externalLink, {
+			[$style.externalLink_decorated]: decorateExternal,
+		}]">
+		<slot name="default">
+			{{ href }}
+		</slot>
+	</a>
+</template>
+
+<style module lang="scss">
+.externalLink {
+	text-decoration: underline;
+}
+
+.externalLink_decorated::after {
+	content: ' ↗';
+}
+</style>
+
+<docs>
+An internal component
+</docs>

src/components/NcRichText/autolink.ts

@@ -9,28 +9,10 @@ import type { Router } from 'vue-router'
 import { getBaseUrl, getRootUrl } from '@nextcloud/router'
 import { u } from 'unist-builder'
 import { SKIP, visitParents } from 'unist-util-visit-parents'
-import { defineComponent, h } from 'vue'
+import NcRichTextExternalLink from './NcRichTextExternalLink.vue'
 import { logger } from '../../utils/logger.ts'
 import { URL_PATTERN_AUTOLINK } from './helpers.js'
 
-const NcLink = defineComponent({
-	name: 'NcLink',
-	props: {
-		href: {
-			type: String,
-			required: true,
-		},
-	},
-	render() {
-		return h('a', {
-			href: this.href,
-			rel: 'noopener noreferrer',
-			target: '_blank',
-			class: 'rich-text--external-link',
-		}, [this.href.trim()])
-	},
-})
-
 /**
  *
  * @param root0
@@ -99,7 +81,7 @@ export function parseUrl(text: string) {
 			textAfter = lastChar
 		}
 		list.push(textBefore)
-		list.push({ component: NcLink, props: { href } })
+		list.push({ component: NcRichTextExternalLink, props: { href: href.trim(), decorateExternal: true } })
 		if (textAfter) {
 			list.push(textAfter)
 		}

tests/component/components/NcRichText/markown-rendering.spec.ts

@@ -420,33 +420,50 @@ test.describe('inline code', () => {
 })
 
 test.describe('links', () => {
+	const TestRouteComponent = {
+		template: '<div />',
+	}
+
 	const testLink = (key: string, { text, href = text, name = text }) => {
 		test(key, async ({ mount }) => {
 			const component = await mount(NcRichText, {
 				props: {
 					text,
 					useExtendedMarkdown: true,
 				},
+				hooksConfig: {
+					routes: [{ path: '/world', component: TestRouteComponent }],
+				},
 			})
 			await expect(component.getByRole('link', { name }))
 				.toHaveAttribute('href', href)
 		})
 	}
 	testLink('autolink', { text: 'https://autolink.me' })
-	testLink('relative link', { text: '[hello](world)', href: 'world', name: 'hello' })
+	testLink('relative link', { text: '[hello](/world)', href: '/world', name: 'hello' })
 	testLink('absolute link', { text: '[hello](https://nextcloud.com)', href: 'https://nextcloud.com', name: 'hello' })
 	testLink('tel link', { text: '[hello](tel:+49123456789)', href: 'tel:+49123456789', name: 'hello' })
+	testLink('mailto link', { text: '[hello](mailto:+49123456789)', href: 'mailto:+49123456789', name: 'hello' })
 
-	test('no link to unknown protocols', async ({ mount }) => {
-		const component = await mount(NcRichText, {
-			props: {
-				text: '[link](other:proto)',
-				useExtendedMarkdown: true,
-			},
+	const testNoLink = (key: string, { text, name = text }) => {
+		test(key, async ({ mount }) => {
+			const component = await mount(NcRichText, {
+				props: {
+					text,
+					useExtendedMarkdown: true,
+				},
+				hooksConfig: {
+					routes: [{ path: '/world', component: TestRouteComponent }],
+				},
+			})
+			await expect(component).toContainText(name)
+			await expect(component.getByText(name)).not.toHaveRole('link')
 		})
-		await expect(component).toContainText('link')
-		await expect(component.getByText('link')).not.toHaveRole('link')
-	})
+	}
+	testNoLink('no link to unknown protocols', { text: '[hello](other:proto)', name: 'hello' })
+	testNoLink('no link to unresolved relative link (by router)', { text: '[hello](world)', name: 'hello' })
+	testNoLink('no link to relative parameters', { text: '[hello](?parameters=1)', name: 'hello' })
+	testNoLink('no link to relative anchor', { text: '[hello](#anchor)', name: 'hello' })
 })
 
 test.describe('multiline code', () => {