react-native-marked 8.1.1 → 8.2.0

package/src/hooks/useMarkdown.ts

@@ -1,51 +1,51 @@
-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;
+	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;

package/src/hooks/useMarkdownWithComponents.tsx

@@ -1,89 +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;
+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

@@ -1,43 +1,43 @@
-import type { Token, Tokens } from "marked";
-import {
-	Hooks as MarkedHooks,
-	Tokenizer as MarkedTokenizer,
-	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,
-	ParserOptions,
-	RendererInterface,
-} from "./lib/types";
-import type { MarkedStyles } from "./theme/types";
-
-const MarkedLexer = marked.lexer;
-
-export type {
-	MarkdownProps,
-	MarkedStyles,
-	ParserOptions,
-	ReactComponentRegistry,
-	RendererInterface,
-	Token,
-	Tokens,
-	useMarkdownHookOptions,
-};
-
-export {
-	MarkedHooks,
-	MarkedLexer,
-	MarkedTokenizer,
-	ReactComponentRegistryProvider,
-	Renderer,
-	useMarkdown,
-	useMarkdownWithComponents,
-};
-
-export default Markdown;
+import type { Token, Tokens } from "marked";
+import {
+	Hooks as MarkedHooks,
+	Tokenizer as MarkedTokenizer,
+	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,
+	ParserOptions,
+	RendererInterface,
+} from "./lib/types";
+import type { MarkedStyles } from "./theme/types";
+
+const MarkedLexer = marked.lexer;
+
+export type {
+	MarkdownProps,
+	MarkedStyles,
+	ParserOptions,
+	ReactComponentRegistry,
+	RendererInterface,
+	Token,
+	Tokens,
+	useMarkdownHookOptions,
+};
+
+export {
+	MarkedHooks,
+	MarkedLexer,
+	MarkedTokenizer,
+	ReactComponentRegistryProvider,
+	Renderer,
+	useMarkdown,
+	useMarkdownWithComponents,
+};
+
+export default Markdown;

package/src/lib/Markdown.tsx

@@ -1,53 +1,53 @@
-import React, { type ReactElement, type ReactNode, useCallback } from "react";
-import { FlatList, useColorScheme } from "react-native";
-import useMarkdown from "../hooks/useMarkdown";
-import type { MarkdownProps } from "./types";
-
-const Markdown = ({
-	value,
-	flatListProps,
-	theme,
-	baseUrl,
-	renderer,
-	styles,
-	tokenizer,
-	hooks,
-}: MarkdownProps) => {
-	const colorScheme = useColorScheme();
-
-	const rnElements = useMarkdown(value, {
-		theme,
-		baseUrl,
-		renderer,
-		colorScheme,
-		styles,
-		tokenizer,
-		hooks,
-	});
-
-	const renderItem = useCallback(({ item }: { item: ReactNode }) => {
-		return item as ReactElement;
-	}, []);
-
-	const keyExtractor = useCallback(
-		(_: ReactNode, index: number) => index.toString(),
-		[],
-	);
-
-	return (
-		<FlatList
-			removeClippedSubviews={false}
-			keyExtractor={keyExtractor}
-			maxToRenderPerBatch={8}
-			initialNumToRender={8}
-			style={{
-				backgroundColor: colorScheme === "light" ? "#ffffff" : "#000000",
-			}}
-			{...flatListProps}
-			data={rnElements}
-			renderItem={renderItem}
-		/>
-	);
-};
-
-export default Markdown;
+import React, { type ReactElement, type ReactNode, useCallback } from "react";
+import { FlatList, useColorScheme } from "react-native";
+import useMarkdown from "../hooks/useMarkdown";
+import type { MarkdownProps } from "./types";
+
+const Markdown = ({
+	value,
+	flatListProps,
+	theme,
+	baseUrl,
+	renderer,
+	styles,
+	tokenizer,
+	hooks,
+}: MarkdownProps) => {
+	const colorScheme = useColorScheme();
+
+	const rnElements = useMarkdown(value, {
+		theme,
+		baseUrl,
+		renderer,
+		colorScheme,
+		styles,
+		tokenizer,
+		hooks,
+	});
+
+	const renderItem = useCallback(({ item }: { item: ReactNode }) => {
+		return item as ReactElement;
+	}, []);
+
+	const keyExtractor = useCallback(
+		(_: ReactNode, index: number) => index.toString(),
+		[],
+	);
+
+	return (
+		<FlatList
+			removeClippedSubviews={false}
+			keyExtractor={keyExtractor}
+			maxToRenderPerBatch={8}
+			initialNumToRender={8}
+			style={{
+				backgroundColor: colorScheme === "light" ? "#ffffff" : "#000000",
+			}}
+			{...flatListProps}
+			data={rnElements}
+			renderItem={renderItem}
+		/>
+	);
+};
+
+export default Markdown;