Merge pull request #7173 from nextcloud-libraries/chore/refactor-nc-richtext

refactor(NcRichText): migrate helpers to Typescript

Author: susnux

src/components/NcRichText/NcReferencePicker/utils.js

@@ -0,0 +1,32 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+let timerId: number | undefined
+
+/**
+ * @param callback - The callback to call after the delay
+ * @param ms - The delay in milliseconds
+ */
+export function delay<P extends Array<unknown>, R>(callback: (...args: P) => R, ms: number): (...args: P) => void {
+	return (...args) => {
+		window.clearTimeout(timerId)
+		timerId = window.setTimeout(() => {
+			callback(...args)
+		}, ms)
+	}
+}
+
+/**
+ * Check wether a given string is a valid URL.
+ *
+ * @param str - The potential URL
+ */
+export function isUrl(str: string): boolean {
+	try {
+		return Boolean(new URL(str))
+	} catch (error) {
+		return false
+	}
+}

src/components/NcRichText/NcReferencePicker/utils.ts

@@ -316,10 +316,10 @@ import rehypeExternalLinks from 'rehype-external-links'
 
 import NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'
 import NcReferenceList from './NcReferenceList.vue'
-import { getRoute, remarkAutolink } from './autolink.ts'
-import { remarkPlaceholder, prepareTextNode } from './placeholder.js'
+import { getRoute, parseUrl, remarkAutolink } from './autolink.ts'
 import { remarkUnescape } from './remarkUnescape.js'
 import { createElementId } from '../../utils/createElementId.ts'
+import { remarkPlaceholder } from './remarkPlaceholder.ts'
 
 /**
  * Protocols allowed in links.
@@ -407,7 +407,7 @@ export default {
 				const matches = entry.match(/^\{([a-z\-_.0-9]+)\}$/i)
 				// just return plain string nodes as text
 				if (!matches) {
-					return prepareTextNode({ h, context: this }, entry)
+					return this.prepareTextNode(entry)
 				}
 				// return component instance if argument is an object
 				const argumentId = matches[1]
@@ -492,6 +492,33 @@ export default {
 					: null,
 			])
 		},
+
+		/**
+		 * Render plain text nodes
+		 *
+		 * @param {string} text - Content of the node
+		 */
+		prepareTextNode(text) {
+			if (this.autolink) {
+				text = parseUrl(text)
+			}
+
+			if (Array.isArray(text)) {
+				return text.map((entry) => {
+					if (typeof entry === 'string') {
+						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,
+					})
+				})
+			}
+			return text
+		},
 		createElement(type, props, key) {
 			// Modified code from vue/jsx-runtime
 			if (key) {

src/components/NcRichText/NcRichText.vue

@@ -1,18 +1,23 @@
-/**
+/*!
  * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import type { Literal } from 'unist'
+
+/**
+ * Unist literal node with string value like code blocks or text nodes
+ */
+export interface TextNode extends Literal {
+	value: string
+}
+
 /**
  * Regex pattern to match links to be resolved by the link-reference provider
- *
- * @type {RegExp}
  */
 export const URL_PATTERN = /(\s|^)(https?:\/\/)([-A-Z0-9+_.]+(?::[0-9]+)?(?:\/[-A-Z0-9+&@#%?=~_|!:,.;()]*)*)(\s|$)/ig
 
 /**
  * Regex pattern to identify strings as links and then making them clickable
- *
- * @type {RegExp}
  */
 export const URL_PATTERN_AUTOLINK = /(\s|\(|^)((https?:\/\/)([-A-Z0-9+_.]+[-A-Z0-9]+(?::[0-9]+)?(?:\/[-A-Z0-9+&@#%?=~_|!:,.;()]*)*))(?=\s|\)|$)/ig

src/components/NcRichText/helpers.js renamed to src/components/NcRichText/helpers.ts

@@ -0,0 +1,48 @@
+/*!
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Plugin, Transformer } from 'unified'
+import type { Node, Parent } from 'unist'
+import type { TextNode } from './helpers.ts'
+
+import { u } from 'unist-builder'
+import { visit } from 'unist-util-visit'
+
+/**
+ * Check if the given node is a literal and specifically a text node
+ * @param node - A Unist node
+ */
+function isTextNode(node: Node): node is TextNode {
+	return node.type === 'text'
+}
+
+const transformPlaceholders: Transformer = function(ast: Node) {
+	// Apply the visitor to all text nodes of the AST
+	visit(ast, isTextNode, visitor)
+
+	/**
+	 * @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)
+				if (!matches) {
+					return u('text', entry)
+				}
+				const [, component] = matches
+				return u('element', {
+					tagName: `#${component}`,
+					children: [],
+				})
+			})
+
+		parent!.children.splice(index!, 1, ...placeholders)
+	}
+}
+
+export const remarkPlaceholder: Plugin = () => transformPlaceholders

src/components/NcRichText/index.js renamed to src/components/NcRichText/index.ts

@@ -0,0 +1,30 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Plugin } from 'unified'
+import type { Node, Parent } from 'unist'
+import type { TextNode } from './helpers.ts'
+
+import { visit, SKIP } from 'unist-util-visit'
+
+/**
+ * Check if the given node is a literal and specifically a text node
+ * @param node - A Unist node
+ */
+function isTextNode(node: Node): node is TextNode {
+	return ['text', 'code', 'inlineCode'].includes(node.type)
+}
+
+export const remarkUnescape: Plugin = function() {
+	return function(tree: Node) {
+		visit(tree, isTextNode, (node: TextNode, index?: number, parent?: Parent) => {
+			parent!.children.splice(index!, 1, {
+				...node,
+				value: node.value.replace(/&lt;/gmi, '<').replace(/&gt;/gmi, '>'),
+			} as TextNode)
+			return [SKIP, index! + 1]
+		})
+	}
+}