react-native-marked 6.0.7 → 7.0.0-alpha.0

package/src/components/MDTable.tsx

@@ -0,0 +1,60 @@
+import React, { memo, type FunctionComponent, type ReactNode } from "react";
+import { View, ScrollView, type ViewStyle } from "react-native";
+import { Table, TableWrapper, Cell } 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,11 +1,11 @@
 import { useMemo, type ReactNode } from "react";
-import { type Tokenizer, marked } from "marked";
+import { lexer, type Tokenizer } from "marked";
 import type { MarkedStyles, UserTheme } from "./../theme/types";
 import Parser from "../lib/Parser";
 import Renderer from "../lib/Renderer";
 import getStyles from "./../theme/styles";
 import type { ColorSchemeName } from "react-native";
-import type { CustomToken, RendererInterface } from "../lib/types";
+import type { RendererInterface } from "../lib/types";
 
 export interface useMarkdownHookOptions {
 	colorScheme?: ColorSchemeName;
@@ -13,7 +13,7 @@ export interface useMarkdownHookOptions {
 	theme?: UserTheme;
 	styles?: MarkedStyles;
 	baseUrl?: string;
-	tokenizer?: Tokenizer<CustomToken>;
+	tokenizer?: Tokenizer;
 }
 
 const useMarkdown = (
@@ -36,9 +36,9 @@ const useMarkdown = (
 	);
 
 	const elements = useMemo(() => {
-		const tokens = marked.lexer(value, {
+		const tokens = lexer(value, {
 			gfm: true,
-			tokenizer: options?.tokenizer as Tokenizer<never>,
+			tokenizer: options?.tokenizer,
 		});
 		return parser.parse(tokens);
 	}, [value, parser, options?.tokenizer]);

package/src/index.ts

@@ -1,4 +1,5 @@
-import { Tokenizer, marked } from "marked";
+import { Tokenizer as MarkedTokenizer, marked } from "marked";
+import type { Token, Tokens } from "marked";
 import Markdown from "./lib/Markdown";
 import Renderer from "./lib/Renderer";
 import useMarkdown, { type useMarkdownHookOptions } from "./hooks/useMarkdown";
@@ -6,7 +7,6 @@ import type {
 	MarkdownProps,
 	ParserOptions,
 	RendererInterface,
-	CustomToken,
 } from "./lib/types";
 
 const MarkedLexer = marked.lexer;
@@ -16,8 +16,10 @@ export type {
 	ParserOptions,
 	RendererInterface,
 	useMarkdownHookOptions,
-	CustomToken,
+	Token,
+	Tokens,
 };
 
-export { Renderer, useMarkdown, Tokenizer as MarkedTokenizer, MarkedLexer };
+export { useMarkdown, MarkedLexer, Renderer, MarkedTokenizer };
+
 export default Markdown;

package/src/lib/Parser.tsx

@@ -1,9 +1,9 @@
 import type { ReactNode } from "react";
 import type { TextStyle, ViewStyle, ImageStyle } from "react-native";
-import type { marked } from "marked";
+import type { Token, Tokens } from "marked";
 import { decode } from "html-entities";
 import type { MarkedStyles } from "../theme/types";
-import type { RendererInterface, ParserOptions, Token } from "./types";
+import type { RendererInterface, ParserOptions } from "./types";
 import { getValidURL } from "./../utils/url";
 import { getTableColAlignmentStyle } from "./../utils/table";
 
@@ -27,11 +27,16 @@ class Parser {
 		};
 	}
 
-	parse(tokens: Token[]) {
+	parse(tokens?: Token[]) {
 		return this._parse(tokens);
 	}
 
-	private _parse(tokens: Token[], styles?: ViewStyle | TextStyle | ImageStyle) {
+	private _parse(
+		tokens?: Token[],
+		styles?: ViewStyle | TextStyle | ImageStyle,
+	): ReactNode[] {
+		if (!tokens) return [];
+
 		const elements: ReactNode[] = tokens.map((token) => {
 			return this._parseToken(token, styles);
 		});
@@ -45,7 +50,7 @@ class Parser {
 		switch (token.type) {
 			case "paragraph": {
 				const children = this.getNormalizedSiblingNodesForBlockAndInlineTokens(
-					token.tokens,
+					token.tokens ?? [],
 					this.styles.text,
 				);
 
@@ -81,11 +86,11 @@ class Parser {
 				if (Number.isNaN(startIndex)) {
 					startIndex = 1;
 				}
-				const li = token.items.map((item) => {
+				const li = (token as Tokens.List).items.map((item) => {
 					const children = item.tokens.flatMap((cItem) => {
 						if (cItem.type === "text") {
 							/* getViewNode since tokens could contain a block like elements (i.e. img) */
-							const childTokens = (cItem as marked.Tokens.Text).tokens || [];
+							const childTokens = (cItem as Tokens.Text).tokens || [];
 							const listChildren =
 								this.getNormalizedSiblingNodesForBlockAndInlineTokens(
 									childTokens,
@@ -118,7 +123,7 @@ class Parser {
 			}
 			case "link": {
 				// Don't render anchors without text and children
-				if (token.text.trim.length < 1 && token.tokens.length < 1) {
+				if (token.text.trim().length < 1 || !token.tokens) {
 					return null;
 				}
 
@@ -207,13 +212,13 @@ class Parser {
 				});
 			}
 			case "table": {
-				const header = token.header.map((row, i) =>
+				const header = (token as Tokens.Table).header.map((row, i) =>
 					this._parse(row.tokens, {
 						...getTableColAlignmentStyle(token.align[i]),
 					}),
 				);
 
-				const rows = token.rows.map((cols) =>
+				const rows = (token as Tokens.Table).rows.map((cols) =>
 					cols.map((col, i) =>
 						this._parse(col.tokens, {
 							...getTableColAlignmentStyle(token.align[i]),
@@ -229,15 +234,6 @@ class Parser {
 					this.styles.tableCell,
 				);
 			}
-			case "custom": {
-				const children = this._parse(token.tokens ?? []);
-				return this.renderer.custom(
-					token.identifier,
-					token.raw,
-					children,
-					token.args,
-				);
-			}
 			default: {
 				return null;
 			}
@@ -272,14 +268,14 @@ class Parser {
 				// Render the current block token
 				if (t.type === "image") {
 					siblingNodes.push(this._parseToken(t));
-				} else if (t.type === "link") {
-					const imageToken = t.tokens[0] as marked.Tokens.Image;
+				} else if (t.type === "link" && t.tokens && t.tokens[0]) {
+					const imageToken = t.tokens[0] as Tokens.Image;
 					const href = getValidURL(this.baseUrl, t.href);
 					siblingNodes.push(
 						this.renderer.linkImage(
 							href,
 							imageToken.href,
-							imageToken.text || imageToken.title,
+							imageToken.text ?? imageToken.title ?? "",
 							this.styles.image,
 						),
 					);

package/src/lib/Renderer.tsx

@@ -12,13 +12,13 @@ import {
 import MarkedList from "@jsamr/react-native-li";
 import Disc from "@jsamr/counter-style/presets/disc";
 import Decimal from "@jsamr/counter-style/presets/decimal";
-import { Slugger } from "marked";
-import { Table, Cell, TableWrapper } from "react-native-table-component";
+import Slugger from "github-slugger";
 import MDImage from "./../components/MDImage";
 import { onLinkPress } from "../utils/handlers";
 import type { RendererInterface } from "./types";
 import { getTableWidthArr } from "../utils/table";
 import MDSvg from "./../components/MDSvg";
+import MDTable from "./../components/MDTable";
 
 class Renderer implements RendererInterface {
 	private slugPrefix = "react-native-marked-ele";
@@ -178,53 +178,20 @@ class Renderer implements RendererInterface {
 		cellStyle?: ViewStyle,
 	): React.ReactNode {
 		const widthArr = getTableWidthArr(header.length, this.windowWidth);
-		const { borderWidth, borderColor, ...tableStyleRest } = tableStyle || {};
+		const { borderWidth, borderColor } = tableStyle || {};
 		return (
-			<ScrollView horizontal={true}>
-				<Table
-					borderStyle={{ borderWidth, borderColor }}
-					style={tableStyleRest}
-				>
-					<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>
+			<MDTable
+				header={header}
+				rows={rows}
+				widthArr={widthArr}
+				rowStyle={rowStyle}
+				cellStyle={cellStyle}
+				borderColor={borderColor as string}
+				borderWidth={borderWidth}
+			/>
 		);
 	}
 
-	custom(
-		_identifier: string,
-		_raw: string,
-		_children: ReactNode[],
-		_args: Record<string, unknown>,
-	): ReactNode {
-		return null;
-	}
-
 	getKey(): string {
 		return this.slugger.slug(this.slugPrefix);
 	}

package/src/lib/types.ts

@@ -6,7 +6,7 @@ import type {
 	ImageStyle,
 } from "react-native";
 import type { MarkedStyles, UserTheme } from "./../theme/types";
-import type { Tokenizer as MarkedTokenizer, marked } from "marked";
+import type { Tokenizer } from "marked";
 
 export interface ParserOptions {
 	styles?: MarkedStyles;
@@ -21,7 +21,7 @@ export interface MarkdownProps extends Partial<ParserOptions> {
 		"data" | "renderItem" | "horizontal"
 	>;
 	theme?: UserTheme;
-	tokenizer?: MarkedTokenizer<CustomToken>;
+	tokenizer?: Tokenizer;
 }
 
 export type TableColAlignment = "center" | "left" | "right" | null;
@@ -76,42 +76,4 @@ export interface RendererInterface {
 		rowStyle?: ViewStyle,
 		cellStyle?: ViewStyle,
 	): ReactNode;
-	custom(
-		identifier: string,
-		raw: string,
-		children?: ReactNode[],
-		args?: Record<string, unknown>,
-	): ReactNode;
-}
-
-export interface CustomToken {
-	type: "custom";
-	identifier: string;
-	raw: string;
-	tokens?: Token[];
-	args?: Record<string, unknown>;
 }
-
-export type Token =
-	| marked.Tokens.Space
-	| marked.Tokens.Code
-	| marked.Tokens.Heading
-	| marked.Tokens.Table
-	| marked.Tokens.Hr
-	| marked.Tokens.Blockquote
-	| marked.Tokens.List
-	| marked.Tokens.ListItem
-	| marked.Tokens.Paragraph
-	| marked.Tokens.HTML
-	| marked.Tokens.Text
-	| marked.Tokens.Def
-	| marked.Tokens.Escape
-	| marked.Tokens.Tag
-	| marked.Tokens.Image
-	| marked.Tokens.Link
-	| marked.Tokens.Strong
-	| marked.Tokens.Em
-	| marked.Tokens.Codespan
-	| marked.Tokens.Br
-	| marked.Tokens.Del
-	| CustomToken;

package/src/theme/styles.ts

@@ -51,7 +51,6 @@ const getStyles = (
 		]),
 		text: StyleSheet.flatten([fontStyle.regular, userStyles?.text]),
 		paragraph: StyleSheet.flatten([
-			fontStyle.regular,
 			{
 				paddingVertical: mdSpacing.m,
 			},
@@ -160,6 +159,7 @@ const getStyles = (
 			},
 			userStyles?.hr,
 		]),
+		list: StyleSheet.flatten([userStyles?.list]),
 		li: StyleSheet.flatten([
 			fontStyle.regular,
 			{