react-native-marked 7.1.0 → 8.0.0

package/src/hooks/useMarkdownWithComponents.tsx

@@ -0,0 +1,89 @@
+import type { ReactNode } from "react";
+import React, { useMemo } from "react";
+import { useReactComponentRegistry } from "../lib/ReactComponentRegistry";
+import type { ReactComponentToken } from "../lib/ReactComponentTokenizer";
+import {
+	isReactComponentToken,
+	ReactComponentTokenizer,
+} from "../lib/ReactComponentTokenizer";
+import Renderer from "../lib/Renderer";
+import type { RendererInterface } from "../lib/types";
+import type { useMarkdownHookOptions } from "./useMarkdown";
+import useMarkdown from "./useMarkdown";
+
+export interface useMarkdownWithComponentsOptions
+	extends Omit<useMarkdownHookOptions, "tokenizer"> {}
+
+interface ComponentData {
+	token: ReactComponentToken;
+	id: string;
+}
+
+export function useMarkdownWithComponents(
+	value: string,
+	options?: useMarkdownWithComponentsOptions,
+): ReactNode[] {
+	const registry = useReactComponentRegistry();
+
+	const { tokenizer, componentMap } = useMemo(() => {
+		const map = new Map<string, ComponentData>();
+
+		const customTokenizer = new ReactComponentTokenizer();
+		const originalHtml = customTokenizer.html.bind(customTokenizer);
+
+		let componentCounter = 0;
+
+		customTokenizer.html = (src: string) => {
+			const token = originalHtml(src);
+			if (token && isReactComponentToken(token)) {
+				const id = `${token.componentName}-${componentCounter++}`;
+				map.set(token.raw, { token, id });
+			}
+			return token;
+		};
+
+		return { tokenizer: customTokenizer, componentMap: map };
+	}, []);
+
+	const baseRenderer = useMemo(
+		() => options?.renderer ?? new Renderer(),
+		[options?.renderer],
+	);
+
+	const renderer = useMemo<RendererInterface>(() => {
+		const wrappedRenderer = Object.create(baseRenderer) as typeof baseRenderer;
+
+		wrappedRenderer.html = (text: string | ReactNode[], styles): ReactNode => {
+			if (typeof text === "string") {
+				const data = componentMap.get(text);
+				if (data) {
+					if (registry?.hasComponent(data.token.componentName)) {
+						const Component = registry.getComponent(data.token.componentName);
+						if (Component) {
+							return (
+								<Component key={data.id} props={data.token.componentProps}>
+									{data.token.componentChildren || undefined}
+								</Component>
+							);
+						}
+					}
+					return null;
+				}
+			}
+
+			return baseRenderer.html(text, styles);
+		};
+
+		return wrappedRenderer;
+	}, [baseRenderer, componentMap, registry]);
+
+	const elements = useMarkdown(value, {
+		...options,
+		tokenizer,
+		renderer,
+	});
+
+	return elements;
+}
+
+export default useMarkdownWithComponents;

package/src/index.ts

@@ -5,7 +5,10 @@ import {
 	marked,
 } from "marked";
 import useMarkdown, { type useMarkdownHookOptions } from "./hooks/useMarkdown";
+import useMarkdownWithComponents from "./hooks/useMarkdownWithComponents";
 import Markdown from "./lib/Markdown";
+import type { ReactComponentRegistry } from "./lib/ReactComponentRegistry";
+import { ReactComponentRegistryProvider } from "./lib/ReactComponentRegistry";
 import Renderer from "./lib/Renderer";
 import type {
 	MarkdownProps,
@@ -24,8 +27,17 @@ export type {
 	useMarkdownHookOptions,
 	Token,
 	Tokens,
+	ReactComponentRegistry,
 };
 
-export { useMarkdown, MarkedLexer, Renderer, MarkedTokenizer, MarkedHooks };
+export {
+	useMarkdown,
+	useMarkdownWithComponents,
+	MarkedLexer,
+	Renderer,
+	MarkedTokenizer,
+	MarkedHooks,
+	ReactComponentRegistryProvider,
+};
 
 export default Markdown;

package/src/lib/Parser.tsx

@@ -82,7 +82,7 @@ class Parser {
 				return this.renderer.hr(this.styles.hr);
 			}
 			case "list": {
-				let startIndex = Number.parseInt(token.start.toString());
+				let startIndex = Number.parseInt(token.start.toString(), 10);
 				if (Number.isNaN(startIndex)) {
 					startIndex = 1;
 				}
@@ -139,17 +139,18 @@ class Parser {
 				const href = getValidURL(this.baseUrl, token.href);
 
 				if (this.hasDuplicateTextChildToken(token)) {
-					return this.renderer.link(token.text, href, linkStyle);
+					return this.renderer.link(token.text, href, linkStyle, token.title);
 				}
 
 				const children = this._parse(token.tokens, linkStyle);
-				return this.renderer.link(children, href, linkStyle);
+				return this.renderer.link(children, href, linkStyle, token.title);
 			}
 			case "image": {
 				return this.renderer.image(
 					token.href,
-					token.text || token.title,
+					token.text,
 					this.styles.image,
+					token.title,
 				);
 			}
 			case "strong": {
@@ -277,6 +278,7 @@ class Parser {
 							imageToken.href,
 							imageToken.text ?? imageToken.title ?? "",
 							this.styles.image,
+							imageToken.title,
 						),
 					);
 				}

package/src/lib/ReactComponentRegistry.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import React, { createContext, useContext, useMemo } from "react";
+import type { ReactComponentProps } from "./ReactComponentTokenizer";
+
+export interface ReactComponentRendererProps {
+	props: ReactComponentProps;
+	children?: ReactNode;
+}
+
+export type ReactComponentRenderer = (
+	props: ReactComponentRendererProps,
+) => ReactNode;
+
+export type ReactComponentRegistry = Record<string, ReactComponentRenderer>;
+
+interface ReactComponentRegistryContextValue {
+	components: ReactComponentRegistry;
+	getComponent: (name: string) => ReactComponentRenderer | undefined;
+	hasComponent: (name: string) => boolean;
+}
+
+const ReactComponentRegistryContext =
+	createContext<ReactComponentRegistryContextValue | null>(null);
+
+interface ReactComponentRegistryProviderProps {
+	components: ReactComponentRegistry;
+	children: ReactNode;
+}
+
+export function ReactComponentRegistryProvider({
+	components,
+	children,
+}: ReactComponentRegistryProviderProps) {
+	const contextValue = useMemo<ReactComponentRegistryContextValue>(
+		() => ({
+			components,
+			getComponent: (name: string) => components[name],
+			hasComponent: (name: string) => name in components,
+		}),
+		[components],
+	);
+
+	return (
+		<ReactComponentRegistryContext.Provider value={contextValue}>
+			{children}
+		</ReactComponentRegistryContext.Provider>
+	);
+}
+
+export function useReactComponentRegistry(): ReactComponentRegistryContextValue | null {
+	return useContext(ReactComponentRegistryContext);
+}

package/src/lib/ReactComponentTokenizer.ts

@@ -0,0 +1,149 @@
+import type { Tokens } from "marked";
+import { Tokenizer } from "marked";
+
+const SELF_CLOSING_REGEX = /^<([A-Z][a-zA-Z0-9]*)([^>]*?)\s*\/>/;
+const OPENING_TAG_REGEX = /^<([A-Z][a-zA-Z0-9]*)([^>]*)>/;
+const PROP_REGEX = /(\w+)(?:=(?:"([^"]*)"|'([^']*)'|\{([^}]*)\}))?/g;
+
+export type ReactComponentProps = Record<string, string | boolean | number>;
+
+export interface ReactComponentToken extends Tokens.HTML {
+	componentName: string;
+	componentProps: ReactComponentProps;
+	componentChildren: string;
+}
+
+function parseProps(propsString: string): ReactComponentProps {
+	const props: ReactComponentProps = {};
+	if (!propsString) return props;
+
+	let match: RegExpExecArray | null;
+
+	match = PROP_REGEX.exec(propsString);
+	while (match !== null) {
+		const [, propName, doubleQuoted, singleQuoted, braced] = match;
+		if (propName) {
+			if (doubleQuoted !== undefined) {
+				props[propName] = doubleQuoted;
+			} else if (singleQuoted !== undefined) {
+				props[propName] = singleQuoted;
+			} else if (braced !== undefined) {
+				const trimmed = braced.trim();
+				if (trimmed === "true") {
+					props[propName] = true;
+				} else if (trimmed === "false") {
+					props[propName] = false;
+				} else if (!Number.isNaN(Number(trimmed))) {
+					props[propName] = Number(trimmed);
+				} else {
+					props[propName] = trimmed;
+				}
+			} else {
+				props[propName] = true;
+			}
+		}
+		match = PROP_REGEX.exec(propsString);
+	}
+
+	PROP_REGEX.lastIndex = 0;
+	return props;
+}
+
+function findClosingTag(
+	src: string,
+	componentName: string,
+	startIndex: number,
+): { endIndex: number; children: string } | null {
+	const openingTag = new RegExp(`<${componentName}(?:\\s[^>]*)?>`, "g");
+	const closingTag = `</${componentName}>`;
+
+	let depth = 1;
+	let currentIndex = startIndex;
+
+	while (depth > 0 && currentIndex < src.length) {
+		const closingIndex = src.indexOf(closingTag, currentIndex);
+		if (closingIndex === -1) return null;
+
+		openingTag.lastIndex = currentIndex;
+		let nestedMatch: RegExpExecArray | null;
+		nestedMatch = openingTag.exec(src);
+		while (nestedMatch !== null && nestedMatch.index < closingIndex) {
+			depth++;
+			nestedMatch = openingTag.exec(src);
+		}
+
+		depth--;
+		if (depth === 0) {
+			return {
+				endIndex: closingIndex + closingTag.length,
+				children: src.slice(startIndex, closingIndex),
+			};
+		}
+		currentIndex = closingIndex + closingTag.length;
+	}
+
+	return null;
+}
+
+export class ReactComponentTokenizer extends Tokenizer {
+	override html(src: string): Tokens.HTML | undefined {
+		const selfClosingMatch = SELF_CLOSING_REGEX.exec(src);
+		if (selfClosingMatch) {
+			const [raw, componentName, propsString] = selfClosingMatch;
+			return this.createReactComponentToken(
+				raw,
+				componentName ?? "",
+				propsString ?? "",
+				"",
+			);
+		}
+
+		const openingMatch = OPENING_TAG_REGEX.exec(src);
+		if (openingMatch) {
+			const [openingTag, componentName, propsString] = openingMatch;
+			const result = findClosingTag(
+				src,
+				componentName ?? "",
+				openingTag?.length ?? 0,
+			);
+
+			if (result) {
+				const raw = src.slice(0, result.endIndex);
+				return this.createReactComponentToken(
+					raw,
+					componentName ?? "",
+					propsString ?? "",
+					result.children,
+				);
+			}
+		}
+
+		return super.html(src);
+	}
+
+	private createReactComponentToken(
+		raw: string,
+		componentName: string,
+		propsString: string,
+		children: string,
+	): ReactComponentToken {
+		return {
+			type: "html",
+			raw,
+			text: raw,
+			block: true,
+			pre: false,
+			componentName,
+			componentProps: parseProps(propsString),
+			componentChildren: children.trim(),
+		};
+	}
+}
+
+export function isReactComponentToken(
+	token: Tokens.HTML,
+): token is ReactComponentToken {
+	return "componentName" in token && typeof token.componentName === "string";
+}
+
+export default ReactComponentTokenizer;

package/src/lib/Renderer.tsx

@@ -97,12 +97,14 @@ class Renderer implements RendererInterface {
 		children: string | ReactNode[],
 		href: string,
 		styles?: TextStyle,
+		title?: string,
 	): ReactNode {
 		return (
 			<Text
 				selectable
 				accessibilityRole="link"
 				accessibilityHint="Opens in a new window"
+				accessibilityLabel={title || "Link"}
 				key={this.getKey()}
 				onPress={onLinkPress(href)}
 				style={styles}
@@ -112,12 +114,17 @@ class Renderer implements RendererInterface {
 		);
 	}
 
-	image(uri: string, alt?: string, style?: ImageStyle): ReactNode {
+	image(
+		uri: string,
+		alt?: string,
+		style?: ImageStyle,
+		title?: string,
+	): ReactNode {
 		const key = this.getKey();
 		if (uri.endsWith(".svg")) {
 			return <MDSvg uri={uri} key={key} />;
 		}
-		return <MDImage key={key} uri={uri} alt={alt} style={style} />;
+		return <MDImage key={key} uri={uri} alt={alt || title} style={style} />;
 	}
 
 	strong(children: string | ReactNode[], styles?: TextStyle): ReactNode {
@@ -153,8 +160,9 @@ class Renderer implements RendererInterface {
 		imageUrl: string,
 		alt?: string,
 		style?: ImageStyle,
+		title?: string,
 	): ReactNode {
-		const imageNode = this.image(imageUrl, alt, style);
+		const imageNode = this.image(imageUrl, alt, style, title);
 		return (
 			<TouchableHighlight
 				accessibilityRole="link"

package/src/lib/types.ts

@@ -55,8 +55,14 @@ export interface RendererInterface {
 		children: string | ReactNode[],
 		href: string,
 		styles?: TextStyle,
+		title?: string,
+	): ReactNode;
+	image(
+		uri: string,
+		alt?: string,
+		style?: ImageStyle,
+		title?: string,
 	): ReactNode;
-	image(uri: string, alt?: string, style?: ImageStyle): ReactNode;
 	strong(children: string | ReactNode[], styles?: TextStyle): ReactNode;
 	em(children: string | ReactNode[], styles?: TextStyle): ReactNode;
 	codespan(text: string, styles?: TextStyle): ReactNode;
@@ -69,6 +75,7 @@ export interface RendererInterface {
 		imageUrl: string,
 		alt?: string,
 		style?: ImageStyle,
+		title?: string | null,
 	): ReactNode;
 	table(
 		header: ReactNode[][],

package/src/utils/svg.ts

@@ -7,8 +7,8 @@ export const getSvgDimensions = (svg: string) => {
 	const rootChild = parsed.children[0] as ElementNode;
 
 	return {
-		width: Number.parseInt(String(rootChild.properties?.width ?? "0")),
-		height: Number.parseInt(String(rootChild.properties?.height ?? "0")),
+		width: Number.parseInt(String(rootChild.properties?.width ?? "0"), 10),
+		height: Number.parseInt(String(rootChild.properties?.height ?? "0"), 10),
 		viewBox: String(rootChild.properties?.viewBox ?? ""),
 	};
 };