Merge pull request #8449 from nextcloud-libraries/fix/8397/nested-links

Author: Antreesy

package-lock.json

@@ -116,7 +116,7 @@
     "ts-md5": "^2.0.1",
     "unified": "^11.0.5",
     "unist-builder": "^4.0.0",
-    "unist-util-visit": "^5.1.0",
+    "unist-util-visit-parents": "^6.0.2",
     "vue": "^3.5.18",
     "vue-router": "^5.0.6"
   },

package.json

@@ -3,11 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import type { Node, Parent } from 'unist'
 import type { Router } from 'vue-router'
 
 import { getBaseUrl, getRootUrl } from '@nextcloud/router'
 import { u } from 'unist-builder'
-import { SKIP, visit } from 'unist-util-visit'
+import { SKIP, visitParents } from 'unist-util-visit-parents'
 import { defineComponent, h } from 'vue'
 import { logger } from '../../utils/logger.ts'
 import { URL_PATTERN_AUTOLINK } from './helpers.js'
@@ -45,13 +46,19 @@ export function remarkAutolink({ autolink, useMarkdown, useExtendedMarkdown }) {
 			return
 		}
 
-		visit(tree, (node) => node.type === 'text', (node, index, parent) => {
-			let parsed = parseUrl(node.value)
-			if (typeof parsed === 'string') {
-				parsed = [u('text', parsed)]
-			} else {
-				parsed = parsed
-					.map((n) => {
+		visitParents(tree, (node) => node.type === 'text', (node, ancestors: Parent[]) => {
+			// Do not autolink text already inside a link node
+			if (ancestors.some((ancestor) => ancestor.type === 'link' || ancestor.type === 'linkReference')) {
+				return
+			}
+
+			const parent = ancestors.at(-1)
+			const index = parent!.children.indexOf(node) ?? 0
+
+			const parsed = parseUrl(node.value)
+			const parsedNodes: Node[] = (typeof parsed === 'string')
+				? [u('text', parsed)]
+				: parsed.map((n) => {
 						if (typeof n === 'string') {
 							return u('text', n)
 						}
@@ -60,12 +67,11 @@ export function remarkAutolink({ autolink, useMarkdown, useExtendedMarkdown }) {
 							url: n.props.href,
 						}, [u('text', n.props.href)])
 					})
-					.filter((x) => x)
-					.flat()
-			}
+						.filter((x) => x)
+						.flat()
 
-			parent.children.splice(index, 1, ...parsed)
-			return [SKIP, (index ?? 0) + parsed.length]
+			parent!.children.splice(index, 1, ...parsedNodes)
+			return [SKIP, index + parsedNodes.length]
 		})
 	}
 }

src/components/NcRichText/autolink.ts

@@ -8,7 +8,7 @@ import type { Node, Parent } from 'unist'
 import type { TextNode } from './helpers.ts'
 
 import { u } from 'unist-builder'
-import { visit } from 'unist-util-visit'
+import { visitParents } from 'unist-util-visit-parents'
 
 /**
  * Check if the given node is a literal and specifically a text node
@@ -21,14 +21,10 @@ function isTextNode(node: Node): node is TextNode {
 
 const transformPlaceholders: Transformer = function(ast: Node) {
 	// Apply the visitor to all text nodes of the AST
-	visit(ast, isTextNode, visitor)
+	visitParents(ast, isTextNode, (node: TextNode, ancestors: Parent[]) => {
+		const parent = ancestors.at(-1)
+		const index = parent!.children.indexOf(node)
 
-	/**
-	 * @param node - The text node
-	 * @param index - The index of the node
-	 * @param parent - The parent node
-	 */
-	function visitor(node: TextNode, index?: number, parent?: Parent) {
 		const placeholders = node.value.split(/(\{[a-z\-_.0-9]+\})/ig)
 			.map((entry: string) => {
 				const matches = entry.match(/^\{([a-z\-_.0-9]+)\}$/i)
@@ -43,7 +39,7 @@ const transformPlaceholders: Transformer = function(ast: Node) {
 			})
 
 		parent!.children.splice(index!, 1, ...placeholders)
-	}
+	})
 }
 
 export const remarkPlaceholder: Plugin = () => transformPlaceholders

src/components/NcRichText/remarkPlaceholder.ts

@@ -7,7 +7,7 @@ import type { Plugin } from 'unified'
 import type { Node, Parent } from 'unist'
 import type { TextNode } from './helpers.ts'
 
-import { SKIP, visit } from 'unist-util-visit'
+import { SKIP, visitParents } from 'unist-util-visit-parents'
 
 /**
  * Check if the given node is a literal and specifically a fenced node (inline code or code block)
@@ -20,7 +20,10 @@ function isCodeNode(node: Node): node is TextNode {
 
 export const remarkStripCode: Plugin = function() {
 	return function(tree: Node) {
-		visit(tree, isCodeNode, (node: TextNode, index?: number, parent?: Parent) => {
+		visitParents(tree, isCodeNode, (node: TextNode, ancestors: Parent[]) => {
+			const parent = ancestors.at(-1)
+			const index = parent!.children.indexOf(node)
+
 			parent!.children.splice(index!, 1, {
 				...node,
 				value: '',

src/components/NcRichText/remarkStripCode.ts

@@ -7,7 +7,7 @@ import type { Plugin } from 'unified'
 import type { Node, Parent } from 'unist'
 import type { TextNode } from './helpers.ts'
 
-import { SKIP, visit } from 'unist-util-visit'
+import { SKIP, visitParents } from 'unist-util-visit-parents'
 
 /**
  * Check if the given node is a literal and specifically a text node
@@ -20,7 +20,10 @@ function isTextNode(node: Node): node is TextNode {
 
 export const remarkUnescape: Plugin = function() {
 	return function(tree: Node) {
-		visit(tree, isTextNode, (node: TextNode, index?: number, parent?: Parent) => {
+		visitParents(tree, isTextNode, (node: TextNode, ancestors: Parent[]) => {
+			const parent = ancestors.at(-1)
+			const index = parent!.children.indexOf(node)
+
 			parent!.children.splice(index!, 1, {
 				...node,
 				value: node.value.replace(/&lt;/gmi, '<').replace(/&gt;/gmi, '>'),

src/components/NcRichText/remarkUnescape.ts

@@ -192,6 +192,37 @@ describe('Foo', () => {
 		expect(wrapper.find('em').text()).toEqual('to')
 	})
 
+	it('does not autolink markdown link text that is already inside a link', async () => {
+		const wrapper = mount(NcRichText, {
+			props: {
+				text: '[https://example-nested.org](https://example.com)',
+				autolink: true,
+				useMarkdown: true,
+			},
+		})
+
+		const links = wrapper.findAll('a')
+		expect(links).toHaveLength(1)
+		expect(links[0].attributes('href')).toEqual('https://example.com')
+		expect(links[0].text()).toEqual('https://example-nested.org')
+	})
+
+	it('does not autolink deeply nested markdown link text that is already inside a link', async () => {
+		const wrapper = mount(NcRichText, {
+			props: {
+				text: '[**https://example-nested.org**](https://example.com)',
+				autolink: true,
+				useMarkdown: true,
+			},
+		})
+
+		const links = wrapper.findAll('a')
+		expect(links).toHaveLength(1)
+		expect(links[0].attributes('href')).toEqual('https://example.com')
+		expect(links[0].text()).toEqual('https://example-nested.org')
+		expect(wrapper.find('strong').text()).toEqual('https://example-nested.org')
+	})
+
 	it('formats markdown is disabled', async () => {
 		const wrapper = mount(NcRichText, {
 			props: {