react-native-marked 1.6.14 → 2.0.0-rc.0

package/src/lib/Parser.tsx

@@ -1,20 +1,20 @@
 import type { ReactNode } from "react";
 import type { TextStyle, ViewStyle, ImageStyle } from "react-native";
 import type { marked } from "marked";
-import Renderer from "./Renderer";
 import type { MarkedStyles } from "../theme/types";
-import type { ParserOptions } from "./types";
+import type { RendererInterface, ParserOptions } from "./types";
 import { getValidURL } from "./../utils/url";
 
 class Parser {
-	private renderer;
+	private renderer: RendererInterface;
 	private styles: MarkedStyles;
 	private headingStylesMap: Record<number, TextStyle | undefined>;
 	private baseUrl: string;
+
 	constructor(options: ParserOptions) {
 		this.styles = { ...options.styles };
 		this.baseUrl = options.baseUrl ?? "";
-		this.renderer = new Renderer();
+		this.renderer = options.renderer;
 		this.headingStylesMap = {
 			1: this.styles.h1,
 			2: this.styles.h2,
@@ -48,43 +48,36 @@ class Parser {
 				return null;
 			}
 			case "paragraph": {
-				const paragraphChildren =
-					this.getNormalizedSiblingNodesForBlockAndInlineTokens(
-						token.tokens,
-						this.styles.text,
-					);
-
-				return this.renderer.getViewNode(
-					paragraphChildren,
-					this.styles.paragraph,
+				const children = this.getNormalizedSiblingNodesForBlockAndInlineTokens(
+					token.tokens,
+					this.styles.text,
 				);
+
+				return this.renderer.paragraph(children, this.styles.paragraph);
 			}
 			case "blockquote": {
-				return this.renderer.getBlockquoteNode(
-					this._parse(token.tokens),
-					this.styles.blockquote,
-				);
+				const children = this.parse(token.tokens);
+				return this.renderer.blockquote(children, this.styles.blockquote);
 			}
 			case "heading": {
 				const styles = this.headingStylesMap[token.depth];
-				return this.renderer.getTextNode(
-					this._parse(token.tokens, styles),
-					styles,
-				);
+				const children = this._parse(token.tokens, styles);
+				return this.renderer.heading(children, styles);
 			}
 			case "code": {
-				return this.renderer.getCodeBlockNode(
+				return this.renderer.code(
 					token.text,
+					token.lang,
 					this.styles.code,
 					this.styles.em,
 				);
 			}
 			case "hr": {
-				return this.renderer.getViewNode(null, this.styles.hr);
+				return this.renderer.hr(this.styles.hr);
 			}
 			case "list": {
 				const li = token.items.map((item) => {
-					const children = item.tokens.map((cItem) => {
+					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 || [];
@@ -93,15 +86,18 @@ class Parser {
 									childTokens,
 									this.styles.li,
 								);
-							return this.renderer.getViewNode(listChildren, this.styles.li);
+							// return this.renderer.listItem(listChildren, this.styles.li);
+							return listChildren;
 						}
 
 						/* Parse the nested token */
 						return this._parseToken(cItem);
 					});
-					return this.renderer.getViewNode(children, this.styles.li);
+
+					return this.renderer.listItem(children, this.styles.li);
 				});
-				return this.renderer.getListNode(
+
+				return this.renderer.list(
 					token.ordered,
 					li,
 					this.styles.list,
@@ -109,7 +105,7 @@ class Parser {
 				);
 			}
 			case "escape": {
-				return this.renderer.getTextNode(token.text, {
+				return this.renderer.escape(token.text, {
 					...this.styles.text,
 					...styles,
 				});
@@ -122,14 +118,11 @@ class Parser {
 					...this.styles.link, // To override color property
 				};
 				const href = getValidURL(this.baseUrl, token.href);
-				return this.renderer.getTextLinkNode(
-					this._parse(token.tokens, linkStyle),
-					href,
-					linkStyle,
-				);
+				const children = this._parse(token.tokens, linkStyle);
+				return this.renderer.link(children, href, linkStyle);
 			}
 			case "image": {
-				return this.renderer.getImageNode(
+				return this.renderer.image(
 					token.href,
 					token.text || token.title,
 					this.styles.image,
@@ -140,49 +133,44 @@ class Parser {
 					...this.styles.strong,
 					...styles,
 				};
-				return this.renderer.getTextNode(
-					this._parse(token.tokens, boldStyle),
-					boldStyle,
-				);
+				const children = this._parse(token.tokens, boldStyle);
+				return this.renderer.strong(children, boldStyle);
 			}
 			case "em": {
 				const italicStyle = {
 					...this.styles.em,
 					...styles,
 				};
-				return this.renderer.getTextNode(
-					this._parse(token.tokens, italicStyle),
-					italicStyle,
-				);
+				const children = this._parse(token.tokens, italicStyle);
+				return this.renderer.em(children, italicStyle);
 			}
 			case "codespan": {
-				return this.renderer.getTextNode(token.text, {
+				return this.renderer.codespan(token.text, {
 					...this.styles.codespan,
 					...styles,
 				});
 			}
 			case "br": {
-				return this.renderer.getTextNode("\n", {});
+				return this.renderer.br();
 			}
 			case "del": {
 				const strikethroughStyle = {
 					...this.styles.strikethrough,
 					...styles,
 				};
-				return this.renderer.getTextNode(
-					this._parse(token.tokens, strikethroughStyle),
-					strikethroughStyle,
-				);
+				const children = this._parse(token.tokens, strikethroughStyle);
+				return this.renderer.del(children, strikethroughStyle);
 			}
 			case "text":
+				return this.renderer.text(token.raw, {
+					...this.styles.text,
+					...styles,
+				});
 			case "html": {
-				if (token.type === "html") {
-					console.warn(
-						"react-native-marked: rendering html from markdown is not supported",
-					);
-				}
-
-				return this.renderer.getTextNode(token.raw, {
+				console.warn(
+					"react-native-marked: rendering html from markdown is not supported",
+				);
+				return this.renderer.html(token.raw, {
 					...this.styles.text,
 					...styles,
 				});
@@ -196,10 +184,10 @@ class Parser {
 		}
 	}
 
-	private getNormalizedSiblingNodesForBlockAndInlineTokens = (
+	private getNormalizedSiblingNodesForBlockAndInlineTokens(
 		tokens: marked.Token[],
 		textStyle?: TextStyle,
-	): ReactNode[] => {
+	): ReactNode[] {
 		let tokenRenderQueue: marked.Token[] = [];
 		const siblingNodes: ReactNode[] = [];
 		tokens.forEach((t) => {
@@ -216,9 +204,9 @@ class Parser {
 					t.tokens[0].type === "image")
 			) {
 				// Render existing inline tokens in the queue
-				const parsed = this._parse(tokenRenderQueue);
+				const parsed = this.parse(tokenRenderQueue);
 				if (parsed.length > 0) {
-					siblingNodes.push(this.renderer.getTextNode(parsed, textStyle));
+					siblingNodes.push(this.renderer.text(parsed, textStyle));
 				}
 
 				// Render the current block token
@@ -228,7 +216,7 @@ class Parser {
 					const imageToken = t.tokens[0] as marked.Tokens.Image;
 					const href = getValidURL(this.baseUrl, t.href);
 					siblingNodes.push(
-						this.renderer.getImageLinkNode(
+						this.renderer.linkImage(
 							href,
 							imageToken.href,
 							imageToken.text || imageToken.title,
@@ -245,13 +233,11 @@ class Parser {
 
 		/* Remaining temp tokens if any */
 		if (tokenRenderQueue.length > 0) {
-			siblingNodes.push(
-				this.renderer.getTextNode(this._parse(tokenRenderQueue), {}),
-			);
+			siblingNodes.push(this.renderer.text(this.parse(tokenRenderQueue), {}));
 		}
 
 		return siblingNodes;
-	};
+	}
 }
 
 export default Parser;

package/src/lib/Renderer.tsx

@@ -11,110 +11,185 @@ 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 MDImage from "./../components/MDImage";
-import { generateRandomString } from "../utils/string";
 import { onLinkPress } from "../utils/handlers";
+import type { RendererInterface } from "./types";
 
-class Renderer {
-	getTextNode = (children: string | ReactNode[], styles?: TextStyle) => {
+class Renderer implements RendererInterface {
+	private slugPrefix = "react-native-marked-ele";
+	private slugger: Slugger;
+	constructor() {
+		this.slugger = new Slugger();
+	}
+
+	paragraph(children: ReactNode[], styles?: ViewStyle): ReactNode {
+		return this.getViewNode(children, styles);
+	}
+
+	blockquote(children: ReactNode[], styles?: ViewStyle): ReactNode {
+		return this.getBlockquoteNode(children, styles);
+	}
+
+	heading(text: string | ReactNode[], styles?: TextStyle): ReactNode {
+		return this.getTextNode(text, styles);
+	}
+
+	code(
+		text: string,
+		_language?: string,
+		containerStyle?: ViewStyle,
+		textStyle?: TextStyle,
+	): ReactNode {
 		return (
-			<Text key={generateRandomString()} style={styles}>
-				{children}
-			</Text>
+			<ScrollView
+				horizontal
+				key={this.getKey()}
+				contentContainerStyle={containerStyle}
+			>
+				<Text style={textStyle}>{text}</Text>
+			</ScrollView>
+		);
+	}
+
+	hr(styles?: ViewStyle): ReactNode {
+		return this.getViewNode(null, styles);
+	}
+
+	listItem(children: ReactNode[], styles?: ViewStyle): ReactNode {
+		return this.getViewNode(children, styles);
+	}
+
+	list(
+		ordered: boolean,
+		li: ReactNode[],
+		listStyle?: ViewStyle,
+		textStyle?: TextStyle,
+	): ReactNode {
+		return (
+			<MarkedList
+				counterRenderer={ordered ? Decimal : Disc}
+				markerTextStyle={textStyle}
+				markerBoxStyle={listStyle}
+				key={this.getKey()}
+			>
+				{li.map((node) => node)}
+			</MarkedList>
 		);
-	};
+	}
+
+	escape(text: string, styles?: TextStyle): ReactNode {
+		return this.getTextNode(text, styles);
+	}
 
-	getTextLinkNode = (
+	link(
 		children: string | ReactNode[],
 		href: string,
 		styles?: TextStyle,
-	) => {
+	): ReactNode {
 		return (
 			<Text
 				accessibilityRole="link"
 				accessibilityHint="Opens in a new window"
-				key={generateRandomString()}
+				key={this.getKey()}
 				onPress={onLinkPress(href)}
 				style={styles}
 			>
 				{children}
 			</Text>
 		);
-	};
+	}
+
+	image(uri: string, alt?: string, style?: ImageStyle): ReactNode {
+		return <MDImage key={this.getKey()} uri={uri} alt={alt} style={style} />;
+	}
+
+	strong(children: ReactNode[], styles?: TextStyle): ReactNode {
+		return this.getTextNode(children, styles);
+	}
 
-	getImageLinkNode = (
+	em(children: ReactNode[], styles?: TextStyle): ReactNode {
+		return this.getTextNode(children, styles);
+	}
+
+	codespan(text: string, styles?: TextStyle): ReactNode {
+		return this.getTextNode(text, styles);
+	}
+
+	br(): ReactNode {
+		return this.getTextNode("\n", {});
+	}
+
+	del(children: ReactNode[], styles?: TextStyle): ReactNode {
+		return this.getTextNode(children, styles);
+	}
+
+	text(text: string | ReactNode[], styles?: TextStyle): ReactNode {
+		return this.getTextNode(text, styles);
+	}
+
+	html(text: string | ReactNode[], styles?: TextStyle): ReactNode {
+		return this.getTextNode(text, styles);
+	}
+
+	linkImage(
 		href: string,
 		imageUrl: string,
 		alt?: string,
 		style?: ImageStyle,
-	) => {
-		const imageNode = this.getImageNode(imageUrl, alt, style);
+	): ReactNode {
+		const imageNode = this.image(imageUrl, alt, style);
 		return (
 			<TouchableHighlight
 				accessibilityRole="link"
 				accessibilityHint="Opens in a new window"
 				onPress={onLinkPress(href)}
-				key={generateRandomString()}
+				key={this.getKey()}
 			>
 				{imageNode}
 			</TouchableHighlight>
 		);
-	};
-
-	getViewNode(children: ReactNode[] | null, styles?: ViewStyle) {
-		return (
-			<View key={generateRandomString()} style={styles}>
-				{children}
-			</View>
-		);
 	}
 
-	getCodeBlockNode(
-		text: string,
-		containerStyle?: ViewStyle,
-		textStyle?: TextStyle,
-	) {
-		return (
-			<ScrollView
-				horizontal
-				key={generateRandomString()}
-				contentContainerStyle={containerStyle}
-			>
-				<Text style={textStyle}>{text}</Text>
-			</ScrollView>
-		);
+	getKey(): string {
+		return this.slugger.slug(this.slugPrefix);
 	}
 
-	getBlockquoteNode(children: ReactNode[], styles?: ViewStyle) {
+	private getTextNode(
+		children: string | ReactNode[],
+		styles?: TextStyle,
+	): ReactNode {
 		return (
-			<View key={generateRandomString()} style={styles}>
+			<Text key={this.getKey()} style={styles}>
 				{children}
-			</View>
+			</Text>
 		);
 	}
 
-	getImageNode(uri: string, alt?: string, style?: ImageStyle) {
-		return (
-			<MDImage key={generateRandomString()} uri={uri} alt={alt} style={style} />
-		);
+	private getViewNode(
+		children: ReactNode[] | null,
+		styles?: ViewStyle,
+	): ReactNode {
+		{
+			return (
+				<View key={this.getKey()} style={styles}>
+					{children}
+				</View>
+			);
+		}
 	}
 
-	getListNode(
-		ordered: boolean,
-		li: ReactNode[],
-		listStyle?: ViewStyle,
-		textStyle?: TextStyle,
-	) {
-		return (
-			<MarkedList
-				counterRenderer={ordered ? Decimal : Disc}
-				markerTextStyle={textStyle}
-				markerBoxStyle={listStyle}
-				key={generateRandomString()}
-			>
-				{li.map((node) => node)}
-			</MarkedList>
-		);
+	private getBlockquoteNode(
+		children: ReactNode[],
+		styles?: ViewStyle,
+	): ReactNode {
+		{
+			return (
+				<View key={this.getKey()} style={styles}>
+					{children}
+				</View>
+			);
+		}
 	}
 }
 

package/src/lib/__perf__/Markdown.perf-test.tsx

@@ -0,0 +1,186 @@
+import React from "react";
+import { screen } from "@testing-library/react-native";
+import { measurePerformance } from "reassure";
+import Markdown from "../Markdown";
+
+const mdString = `Markdown Quick Reference
+========================
+
+This guide is a very brief overview, with examples, of the syntax that [Markdown] supports. It is itself written in Markdown and you can copy the samples over to the left-hand pane for experimentation. It's shown as *text* and not *rendered HTML*.
+
+[Markdown]: http://daringfireball.net/projects/markdown/
+
+
+Simple Text Formatting
+======================
+
+First thing is first. You can use *stars* or _underscores_ for italics. **Double stars** and __double underscores__ for bold. ***Three together*** for ___both___.
+
+Paragraphs are pretty easy too. Just have a blank line between chunks of text.
+
+> This chunk of text is in a block quote. Its multiple lines will all be
+> indented a bit from the rest of the text.
+>
+> > Multiple levels of block quotes also work.
+
+Sometimes you want to include code, such as when you are explaining how \`<h1>\` HTML tags work, or maybe you are a programmer and you are discussing \`someMethod()\`.
+
+If you want to include code and have new
+lines preserved, indent the line with a tab
+or at least four spaces:
+
+    Extra spaces work here too.
+    This is also called preformatted text and it is useful for showing examples.
+    The text will stay as text, so any *markdown* or <u>HTML</u> you add will
+    not show up formatted. This way you can show markdown examples in a
+    markdown document.
+
+>     You can also use preformatted text with your blockquotes
+>     as long as you add at least five spaces.
+
+
+Headings
+========
+
+There are a couple of ways to make headings. Using three or more equals signs on a line under a heading makes it into an "h1" style. Three or more hyphens under a line makes it "h2" (slightly smaller). You can also use multiple pound symbols (\`#\`) before and after a heading. Pounds after the title are ignored. Here are some examples:
+
+This is H1
+==========
+
+This is H2
+----------
+
+# This is H1
+## This is H2
+### This is H3 with some extra pounds ###
+#### You get the idea ####
+##### I don't need extra pounds at the end
+###### H6 is the max
+
+
+Links
+=====
+
+Let's link to a few sites. First, let's use the bare URL, like <https://www.github.com>. Great for text, but ugly for HTML.
+Next is an inline link to [Google](https://www.google.com). A little nicer.
+This is a reference-style link to [Wikipedia] [1].
+Lastly, here's a pretty link to [Yahoo]. The reference-style and pretty links both automatically use the links defined below, but they could be defined *anywhere* in the markdown and are removed from the HTML. The names are also case insensitive, so you can use [YaHoO] and have it link properly.
+
+[1]: https://www.wikipedia.org
+[Yahoo]: https://www.yahoo.com
+
+Title attributes may be added to links by adding text after a link.
+This is the [inline link](https://www.bing.com "Bing") with a "Bing" title.
+You can also go to [W3C] [2] and maybe visit a [friend].
+
+[2]: https://w3c.org (The W3C puts out specs for web-based things)
+[Friend]: https://facebook.com "Facebook!"
+
+Email addresses in plain text are not linked: test@example.com.
+Email addresses wrapped in angle brackets are linked: <test@example.com>.
+They are also obfuscated so that email harvesting spam robots hopefully won't get them.
+
+
+Lists
+=====
+
+* This is a bulleted list
+* Great for shopping lists
+- You can also use hyphens
++ Or plus symbols
+
+The above is an "unordered" list. Now, on for a bit of order.
+
+1. Numbered lists are also easy
+2. Just start with a number
+3738762. However, the actual number doesn't matter when converted to HTML.
+1. This will still show up as 4.
+
+You might want a few advanced lists:
+
+- This top-level list is wrapped in paragraph tags
+- This generates an extra space between each top-level item.
+
+- You do it by adding a blank line
+
+- This nested list also has blank lines between the list items.
+
+- How to create nested lists
+  1. Start your regular list
+  2. Indent nested lists with two spaces
+  3. Further nesting means you should indent with two more spaces
+    * This line is indented with four spaces.
+
+- List items can be quite lengthy. You can keep typing and either continue
+them on the next line with no indentation.
+
+- Alternately, if that looks ugly, you can also
+  indent the next line a bit for a prettier look.
+
+- You can put large blocks of text in your list by just indenting with two spaces.
+
+  This is formatted the same as code, but you can inspect the HTML and find that it's just wrapped in a \`<p>\` tag and *won't* be shown as preformatted text.
+
+  You can keep adding more and more paragraphs to a single list item by adding the traditional blank line and then keep on indenting the paragraphs with two spaces.
+
+  You really only need to indent the first line,
+but that looks ugly.
+
+- Lists support blockquotes
+
+  > Just like this example here. By the way, you can
+  > nest lists inside blockquotes!
+  > - Fantastic!
+
+- Lists support preformatted text
+
+      You just need to indent an additional four spaces.
+
+
+Even More
+=========
+
+Horizontal Rule
+---------------
+
+If you need a horizontal rule you just need to put at least three hyphens, asterisks, or underscores on a line by themselves. You can also even put spaces between the characters.
+
+---
+****************************
+_ _ _ _ _ _ _
+
+Those three all produced horizontal lines. Keep in mind that three hyphens under any text turns that text into a heading, so add a blank like if you use hyphens.
+
+Images
+------
+
+Images work exactly like links, but they have exclamation points in front. They work with references and titles too.
+
+![Google Logo](https://www.google.com/images/errors/logo_sm.gif) and ![Happy].
+
+[Happy]: https://wpclipart.com/smiley/happy/simple_colors/smiley_face_simple_green_small.png ("Smiley face")
+
+
+Inline HTML
+-----------
+
+If markdown is too limiting, you can just insert your own <strike>crazy</strike> HTML. Span-level HTML <u>can *still* use markdown</u>. Block level elements must be separated from text by a blank line and must not have any spaces before the opening and closing HTML.
+
+<div style='font-family: "Comic Sans MS", "Comic Sans", cursive;'>
+It is a pity, but markdown does **not** work in here for most markdown parsers.
+[Marked] handles it pretty well.
+</div>
+`;
+
+describe("Perf test", () => {
+	it("Renders markdown", async () => {
+		const scenario = async () => {
+			await screen.queryByText("Markdown Quick Reference");
+			await screen.queryByText("Inline HTML");
+			await screen.queryByText(
+				"If markdown is too limiting, you can just insert your own <strike>crazy</strike> HTML. Span-level HTML <u>can *still* use markdown</u>. Block level elements must be separated from text by a blank line and must not have any spaces before the opening and closing HTML.",
+			);
+		};
+		measurePerformance(<Markdown value={mdString} />, { scenario });
+	});
+});