react-native-marked 8.2.0 → 8.3.1

package/src/components/MDSvg.tsx

@@ -1,108 +1,108 @@
-import React, {
-	type FunctionComponent,
-	memo,
-	useEffect,
-	useRef,
-	useState,
-} from "react";
-import { ActivityIndicator, type LayoutChangeEvent, View } from "react-native";
-import { SvgFromXml } from "react-native-svg";
-import { getSvgDimensions } from "./../utils/svg";
-
-type MDSvgProps = {
-	uri: string;
-	alt?: string;
-};
-
-type MdSvgState = {
-	viewBox: string;
-	width: number;
-	height: number;
-	svg: string;
-	isLoading: boolean;
-	error: boolean;
-	aspectRatio?: number;
-};
-
-const MDSvg: FunctionComponent<MDSvgProps> = ({ uri, alt = "image" }) => {
-	const isFirstLoad = useRef<boolean>(false);
-	const [layoutWidth, setLayoutWidth] = useState<number>(0);
-	const [svgState, setSvgState] = useState<MdSvgState>({
-		viewBox: "",
-		width: 0,
-		height: 0,
-		svg: "",
-		isLoading: true,
-		error: false,
-		aspectRatio: undefined,
-	});
-	useEffect(() => {
-		const fetchSvg = async () => {
-			try {
-				const res = await fetch(uri);
-				const text = await res.text();
-				if (res.status !== 200) {
-					throw new Error("Status is not 200");
-				}
-				const { viewBox, width, height } = getSvgDimensions(text);
-
-				setSvgState({
-					width,
-					height,
-					viewBox,
-					svg: text,
-					isLoading: false,
-					error: false,
-					aspectRatio: width / height,
-				});
-			} catch (_e) {
-				setSvgState((state) => ({
-					...state,
-					error: true,
-					isLoading: false,
-				}));
-			}
-		};
-
-		fetchSvg();
-	}, [uri]);
-
-	const onLayout = (event: LayoutChangeEvent) => {
-		if (!isFirstLoad.current) {
-			setLayoutWidth(event.nativeEvent.layout.width ?? 0);
-			isFirstLoad.current = true;
-		}
-	};
-
-	const getWidth = () => {
-		if (layoutWidth && svgState.width) {
-			return Math.min(layoutWidth, svgState.width);
-		}
-		return "100%";
-	};
-
-	return (
-		<View
-			style={{ width: getWidth(), aspectRatio: svgState.aspectRatio }}
-			onLayout={onLayout}
-		>
-			{svgState.isLoading ? (
-				<ActivityIndicator size={"small"} />
-			) : (
-				<SvgFromXml
-					xml={svgState.svg}
-					width={"100%"}
-					height={"100%"}
-					viewBox={svgState.viewBox}
-					aria-label={alt}
-					accessibilityRole="image"
-					accessibilityLabel={alt}
-					accessibilityHint={undefined}
-					testID="react-native-marked-md-svg"
-				/>
-			)}
-		</View>
-	);
-};
-
-export default memo(MDSvg);
+import React, {
+	type FunctionComponent,
+	memo,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+import { ActivityIndicator, type LayoutChangeEvent, View } from "react-native";
+import { SvgFromXml } from "react-native-svg";
+import { getSvgDimensions } from "./../utils/svg";
+
+type MDSvgProps = {
+	uri: string;
+	alt?: string;
+};
+
+type MdSvgState = {
+	viewBox: string;
+	width: number;
+	height: number;
+	svg: string;
+	isLoading: boolean;
+	error: boolean;
+	aspectRatio?: number;
+};
+
+const MDSvg: FunctionComponent<MDSvgProps> = ({ uri, alt = "image" }) => {
+	const isFirstLoad = useRef<boolean>(false);
+	const [layoutWidth, setLayoutWidth] = useState<number>(0);
+	const [svgState, setSvgState] = useState<MdSvgState>({
+		viewBox: "",
+		width: 0,
+		height: 0,
+		svg: "",
+		isLoading: true,
+		error: false,
+		aspectRatio: undefined,
+	});
+	useEffect(() => {
+		const fetchSvg = async () => {
+			try {
+				const res = await fetch(uri);
+				const text = await res.text();
+				if (res.status !== 200) {
+					throw new Error("Status is not 200");
+				}
+				const { viewBox, width, height } = getSvgDimensions(text);
+
+				setSvgState({
+					width,
+					height,
+					viewBox,
+					svg: text,
+					isLoading: false,
+					error: false,
+					aspectRatio: width / height,
+				});
+			} catch (_e) {
+				setSvgState((state) => ({
+					...state,
+					error: true,
+					isLoading: false,
+				}));
+			}
+		};
+
+		fetchSvg();
+	}, [uri]);
+
+	const onLayout = (event: LayoutChangeEvent) => {
+		if (!isFirstLoad.current) {
+			setLayoutWidth(event.nativeEvent.layout.width ?? 0);
+			isFirstLoad.current = true;
+		}
+	};
+
+	const getWidth = () => {
+		if (layoutWidth && svgState.width) {
+			return Math.min(layoutWidth, svgState.width);
+		}
+		return "100%";
+	};
+
+	return (
+		<View
+			style={{ width: getWidth(), aspectRatio: svgState.aspectRatio }}
+			onLayout={onLayout}
+		>
+			{svgState.isLoading ? (
+				<ActivityIndicator size={"small"} />
+			) : (
+				<SvgFromXml
+					xml={svgState.svg}
+					width={"100%"}
+					height={"100%"}
+					viewBox={svgState.viewBox}
+					aria-label={alt}
+					accessibilityRole="image"
+					accessibilityLabel={alt}
+					accessibilityHint={undefined}
+					testID="react-native-marked-md-svg"
+				/>
+			)}
+		</View>
+	);
+};
+
+export default memo(MDSvg);

package/src/components/MDTable.tsx

@@ -1,60 +1,60 @@
-import React, { type FunctionComponent, memo, type ReactNode } from "react";
-import { ScrollView, View, type ViewStyle } from "react-native";
-import { Cell, Table, TableWrapper } from "react-native-reanimated-table";
-
-type MDTableProps = {
-	header: ReactNode[][];
-	rows: ReactNode[][][];
-	widthArr: number[];
-	rowStyle?: ViewStyle;
-	cellStyle?: ViewStyle;
-	borderColor?: string;
-	borderWidth?: number;
-	tableStyle?: ViewStyle;
-};
-
-const MDTable: FunctionComponent<MDTableProps> = ({
-	header,
-	rows,
-	widthArr,
-	cellStyle,
-	rowStyle,
-	tableStyle,
-	borderColor,
-	borderWidth,
-}) => {
-	return (
-		<ScrollView horizontal={true}>
-			<Table borderStyle={{ borderColor, borderWidth }} style={tableStyle}>
-				<TableWrapper style={rowStyle}>
-					{header.map((headerCol, index) => {
-						return (
-							<Cell
-								width={widthArr[index]}
-								key={`${index}`}
-								data={<View style={cellStyle}>{headerCol}</View>}
-							/>
-						);
-					})}
-				</TableWrapper>
-				{rows.map((rowData, index) => {
-					return (
-						<TableWrapper key={`${index}`} style={rowStyle}>
-							{rowData.map((cellData, cellIndex) => {
-								return (
-									<Cell
-										width={widthArr[cellIndex]}
-										key={`${cellIndex}`}
-										data={<View style={cellStyle}>{cellData}</View>}
-									/>
-								);
-							})}
-						</TableWrapper>
-					);
-				})}
-			</Table>
-		</ScrollView>
-	);
-};
-
-export default memo(MDTable);
+import React, { type FunctionComponent, memo, type ReactNode } from "react";
+import { ScrollView, View, type ViewStyle } from "react-native";
+import { Cell, Table, TableWrapper } from "react-native-reanimated-table";
+
+type MDTableProps = {
+	header: ReactNode[][];
+	rows: ReactNode[][][];
+	widthArr: number[];
+	rowStyle?: ViewStyle;
+	cellStyle?: ViewStyle;
+	borderColor?: string;
+	borderWidth?: number;
+	tableStyle?: ViewStyle;
+};
+
+const MDTable: FunctionComponent<MDTableProps> = ({
+	header,
+	rows,
+	widthArr,
+	cellStyle,
+	rowStyle,
+	tableStyle,
+	borderColor,
+	borderWidth,
+}) => {
+	return (
+		<ScrollView horizontal={true}>
+			<Table borderStyle={{ borderColor, borderWidth }} style={tableStyle}>
+				<TableWrapper style={rowStyle}>
+					{header.map((headerCol, index) => {
+						return (
+							<Cell
+								width={widthArr[index]}
+								key={`${index}`}
+								data={<View style={cellStyle}>{headerCol}</View>}
+							/>
+						);
+					})}
+				</TableWrapper>
+				{rows.map((rowData, index) => {
+					return (
+						<TableWrapper key={`${index}`} style={rowStyle}>
+							{rowData.map((cellData, cellIndex) => {
+								return (
+									<Cell
+										width={widthArr[cellIndex]}
+										key={`${cellIndex}`}
+										data={<View style={cellStyle}>{cellData}</View>}
+									/>
+								);
+							})}
+						</TableWrapper>
+					);
+				})}
+			</Table>
+		</ScrollView>
+	);
+};
+
+export default memo(MDTable);

package/src/hooks/useMarkdown.ts

@@ -1,51 +1,56 @@
-import { type Hooks, lexer, type Tokenizer } from "marked";
-import { type ReactNode, useMemo } from "react";
-import type { ColorSchemeName } from "react-native";
-import Parser from "../lib/Parser";
-import Renderer from "../lib/Renderer";
-import type { RendererInterface } from "../lib/types";
-import getStyles from "./../theme/styles";
-import type { MarkedStyles, UserTheme } from "./../theme/types";
-
-export interface useMarkdownHookOptions {
-	colorScheme?: ColorSchemeName;
-	renderer?: RendererInterface;
-	theme?: UserTheme;
-	styles?: MarkedStyles;
-	baseUrl?: string;
-	tokenizer?: Tokenizer;
-	hooks?: Hooks;
-}
-
-const useMarkdown = (
-	value: string,
-	options?: useMarkdownHookOptions,
-): ReactNode[] => {
-	const styles = useMemo(
-		() => getStyles(options?.styles, options?.colorScheme, options?.theme),
-		[options?.styles, options?.theme, options?.colorScheme],
-	);
-
-	const parser = useMemo(
-		() =>
-			new Parser({
-				styles: styles,
-				baseUrl: options?.baseUrl,
-				renderer: options?.renderer ?? new Renderer(),
-			}),
-		[options?.renderer, options?.baseUrl, styles],
-	);
-
-	const elements = useMemo(() => {
-		const tokens = lexer(value, {
-			gfm: true,
-			tokenizer: options?.tokenizer,
-			hooks: options?.hooks,
-		});
-		return parser.parse(tokens);
-	}, [value, parser, options?.tokenizer, options?.hooks]);
-
-	return elements;
-};
-
-export default useMarkdown;
+import { type Hooks, lexer, type Tokenizer } from "marked";
+import { type ReactNode, useMemo } from "react";
+import type { ColorSchemeName } from "react-native";
+import Parser from "../lib/Parser";
+import Renderer from "../lib/Renderer";
+import type { RendererInterface } from "../lib/types";
+import getStyles from "./../theme/styles";
+import type { MarkedStyles, UserTheme } from "./../theme/types";
+
+export interface useMarkdownHookOptions {
+	colorScheme?: ColorSchemeName;
+	/** Custom renderer. When provided, `selectable` is ignored — configure via `new Renderer({ selectable })`. */
+	renderer?: RendererInterface;
+	theme?: UserTheme;
+	styles?: MarkedStyles;
+	baseUrl?: string;
+	tokenizer?: Tokenizer;
+	hooks?: Hooks;
+	/** Whether Text elements are selectable. Defaults to `true`. Ignored when `renderer` is provided. */
+	selectable?: boolean;
+}
+
+const useMarkdown = (
+	value: string,
+	options?: useMarkdownHookOptions,
+): ReactNode[] => {
+	const styles = useMemo(
+		() => getStyles(options?.styles, options?.colorScheme, options?.theme),
+		[options?.styles, options?.theme, options?.colorScheme],
+	);
+
+	const parser = useMemo(
+		() =>
+			new Parser({
+				styles: styles,
+				baseUrl: options?.baseUrl,
+				renderer:
+					options?.renderer ??
+					new Renderer({ selectable: options?.selectable }),
+			}),
+		[options?.renderer, options?.baseUrl, styles, options?.selectable],
+	);
+
+	const elements = useMemo(() => {
+		const tokens = lexer(value, {
+			gfm: true,
+			tokenizer: options?.tokenizer,
+			hooks: options?.hooks,
+		});
+		return parser.parse(tokens);
+	}, [value, parser, options?.tokenizer, options?.hooks]);
+
+	return elements;
+};
+
+export default useMarkdown;

package/src/hooks/useMarkdownWithComponents.tsx

@@ -1,89 +1,94 @@
-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;
+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({ selectable: options?.selectable }),
+		[options?.renderer, options?.selectable],
+	);
+
+	const renderer = useMemo<RendererInterface>(() => {
+		// Use prototype delegation so all Renderer methods (text, link, getTextNode -> selectable,
+		// getKey -> slugger) resolve via baseRenderer's prototype. Only `html` is overridden here
+		// for component registry handling. Avoids copying private fields and keeps `this` binding
+		// consistent. If Renderer ever uses #private fields this pattern will need revisiting.
+		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;