fix(NcRichText)!: do not render non-resolved relative links

- still works: external links, internal absolute links, and internal relative links, that do have a router match for current app
- internal relative links without match (also ?query and #anchor) only render an inner text
- allow tel: and mail: to reduce breaking changes

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

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'
@@ -630,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
 
@@ -638,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)
 			}

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', () => {