Merge pull request #8467 from nextcloud-libraries/backport/8397/stable8

Author: Antreesy

cypress/component/richtext.cy.ts

@@ -7,6 +7,8 @@
 // Reference tests: https://github.com/nextcloud-deps/CDMarkdownKit/tree/master/CDMarkdownKitTests
 
 import { mount } from 'cypress/vue2'
+import Vue from 'vue'
+import VueRouter from 'vue-router'
 import NcRichText from '../../src/components/NcRichText/NcRichText.vue'
 
 describe('NcRichText', () => {
@@ -402,34 +404,56 @@ describe('NcRichText', () => {
 		})
 
 		describe('links', () => {
+			const TestRouteComponent = {
+				template: '<div />',
+			}
+
+			const mountRichText = (text: string) => {
+				Vue.use(VueRouter)
+				const routes = [{ path: '/world', component: TestRouteComponent }]
+				const router = new VueRouter({
+					mode: 'history',
+					routes,
+				})
+
+				mount(NcRichText, {
+					propsData: {
+						text,
+						useMarkdown: true,
+					},
+					extensions: {
+						plugins: [router],
+					},
+					router,
+				})
+			}
+
 			const testLink = (key: string, { text, href = text, name = text }) => {
 				it(key, () => {
-					mount(NcRichText, {
-						propsData: {
-							text,
-							useMarkdown: true,
-						},
-					})
+					mountRichText(text)
 					cy.get('a').should('have.text', name)
 					cy.get('a').invoke('attr', 'href').should('eq', 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' })
 
-			it('no link to unknown protocols', () => {
-				mount(NcRichText, {
-					propsData: {
-						text: '[link](other:proto)',
-						useMarkdown: true,
-					},
+			const testNoLink = (key: string, { text, name = text }) => {
+				it(key, () => {
+					mountRichText(text)
+
+					cy.get('body').should('contain', name)
+					cy.get('a').should('not.exist')
 				})
-				cy.get('body').should('contain', name)
-				cy.get('a').should('not.exist')
-			})
+			}
+			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' })
 		})
 
 		describe('multiline code', () => {

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 GenRandomId from '../../utils/GenRandomId.js'
 import { getRoute, remarkAutolink } from './autolink.js'
 import { prepareTextNode, remarkPlaceholder } from './placeholder.js'
@@ -556,6 +557,7 @@ export default {
 							if (tag === 'a') {
 								const route = getRoute(this.$router, attrs.attrs.href)
 								if (route) {
+									// Resolved link to this app; render RouterLink
 									delete attrs.attrs.href
 									delete attrs.attrs.target
 
@@ -566,6 +568,18 @@ export default {
 										},
 									}, children)
 								}
+
+								const isAllowedScheme = /^(https?:\/\/|tel:|mailto:)/.test(attrs.attrs.href)
+								if (isAllowedScheme) {
+									// External link; render normally, open in the new tab
+									attrs.attrs.href = attrs.attrs.href.trim()
+									return h(NcRichTextExternalLink, attrs, children)
+								} else {
+									// Unresolved relative link that does not belong to this app; render only children
+									delete attrs.attrs.href
+									delete attrs.attrs.target
+									return h('span', attrs, children)
+								}
 							}
 
 							return h(tag, attrs, children)

src/components/NcRichText/NcRichTextExternalLink.vue

@@ -0,0 +1,39 @@
+<!--
+  - 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.js

@@ -6,29 +6,10 @@
 import { getBaseUrl, getRootUrl } from '@nextcloud/router'
 import { u } from 'unist-builder'
 import { SKIP, visitParents } from 'unist-util-visit-parents'
+import NcRichTextExternalLink from './NcRichTextExternalLink.vue'
 import { logger } from '../../utils/logger.ts'
 import { URL_PATTERN_AUTOLINK } from './helpers.js'
 
-const NcLink = {
-	name: 'NcLink',
-	props: {
-		href: {
-			type: String,
-			required: true,
-		},
-	},
-	render(h) {
-		return h('a', {
-			attrs: {
-				href: this.href,
-				rel: 'noopener noreferrer',
-				target: '_blank',
-				class: 'rich-text--external-link',
-			},
-		}, [this.href.trim()])
-	},
-}
-
 /**
  * Remark plugin for autolink parsing
  *
@@ -95,7 +76,7 @@ export function parseUrl(text) {
 			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)
 		}

src/components/NcRichText/placeholder.js

@@ -17,7 +17,7 @@ export function remarkPlaceholder() {
 		/**
 		 *
 		 * @param {object} node The node
-		 * @param {array} ancestors The parent nodes
+		 * @param {Array} ancestors The parent nodes
 		 */
 		function visitor(node, ancestors) {
 			const parent = ancestors.at(-1)
@@ -59,11 +59,9 @@ export function prepareTextNode({ h, context }, text) {
 				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',
 			})
 		})
 	}

src/components/NcRichText/richtext.scss

@@ -14,13 +14,6 @@
 	.rich-text--fallback, .rich-text-component {
 		display: inline;
 	}
-
-	.rich-text--external-link {
-		text-decoration: underline;
-		&:after {
-			content: ' ↗';
-		}
-	}
 }
 
 /* Markdown styles */