4210173070

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/gmsgowtham/react-native-marked/commit/<a class=hub.com/gmsgowtham/react-native-marked/commit/e1d425758de1abb960f8ee4ecb5862be491bef94">e1d425758<a href="https://github.com/gmsgowtham/react-native-marked/commit/e1d425758de1abb960f8ee4ecb5862be491bef94">">Merge </a><a class="double-link" href="https://github.com/gmsgowtham/react-native-marked/commit/<a class="double-link" href="https://github.com/gmsgowtham/react-native-marked/commit/3bc3979eabe18e4ab7107d2fd1ec21613214177b">3bc3979ea</a>">3bc3979ea</a><a href="https://github.com/gmsgowtham/react-native-marked/commit/e1d425758de1abb960f8ee4ecb5862be491bef94"> into ac3019a9f">ac3019a9f</a>

Pull Request Pull Request #193: refactor parse fns

Run Details

55 of 59 branches covered (93.22%)

Branch coverage included in aggregate %.

42 of 42 new or added lines in 2 files covered. (100.0%)

117 of 119 relevant lines covered (98.32%)

275.96 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

94.5

/src/lib/Parser.tsx

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 { getValidURL } from "./../utils/url";

class Parser {
        private renderer;
        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.headingStylesMap = {
                        1: this.styles.h1,
                        2: this.styles.h2,
                        3: this.styles.h3,
                        4: this.styles.h4,
                        5: this.styles.h5,
                        6: this.styles.h6,
                };
        }

        parse(tokens: marked.Token[]) {
                return this._parse(tokens);
        }

        private _parse(
                tokens: marked.Token[],
                styles?: ViewStyle | TextStyle | ImageStyle,
        ) {
                const elements: ReactNode[] = tokens.map((token) => {
                        return this._parseToken(token, styles);
                });
                return elements.filter((element) => element !== null);
        }

        private _parseToken(
                token: marked.Token,
                styles?: ViewStyle | TextStyle | ImageStyle,
        ): ReactNode {
                switch (token.type) {
                        case "space": {
                                return null;
                        }
                        case "paragraph": {
                                const paragraphChildren =
                                        this.getNormalizedSiblingNodesForBlockAndInlineTokens(
                                                token.tokens,
                                                this.styles.text,
                                        );

                                return this.renderer.getViewNode(
                                        paragraphChildren,
                                        this.styles.paragraph,
                                );
                        }
                        case "blockquote": {
                                return this.renderer.getBlockquoteNode(
                                        this._parse(token.tokens),
                                        this.styles.blockquote,
                                );
                        }
                        case "heading": {
                                const styles = this.headingStylesMap[token.depth];
                                return this.renderer.getTextNode(
                                        this._parse(token.tokens, styles),
                                        styles,
                                );
                        }
                        case "code": {
                                return this.renderer.getCodeBlockNode(
                                        token.text,
                                        this.styles.code,
                                        this.styles.em,
                                );
                        }
                        case "hr": {
                                return this.renderer.getViewNode(null, this.styles.hr);
                        }
                        case "list": {
                                const li = token.items.map((item) => {
                                        const children = item.tokens.map((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 listChildren =
                                                                this.getNormalizedSiblingNodesForBlockAndInlineTokens(
                                                                        childTokens,
                                                                        this.styles.li,
                                                                );
                                                        return this.renderer.getViewNode(listChildren, this.styles.li);
                                                }

                                                /* Parse the nested token */
                                                return this._parseToken(cItem);
                                        });
                                        return this.renderer.getViewNode(children, this.styles.li);
                                });
                                return this.renderer.getListNode(
                                        token.ordered,
                                        li,
                                        this.styles.list,
                                        this.styles.li,
                                );
                        }
                        case "escape": {
                                return this.renderer.getTextNode(token.text, {
                                        ...this.styles.text,
                                        ...styles,
                                });
                        }
                        case "link": {
                                // Note: Linking Images (https://www.markdownguide.org/basic-syntax/#linking-images) are wrapped
                                // in paragraph token, so will be handled via `getNormalizedSiblingNodesForBlockAndInlineTokens`
                                const linkStyle = {
                                        ...styles,
                                        ...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,
                                );
                        }
                        case "image": {
                                return this.renderer.getImageNode(
                                        token.href,
                                        token.text || token.title,
                                        this.styles.image,
                                );
                        }
                        case "strong": {
                                const boldStyle = {
                                        ...this.styles.strong,
                                        ...styles,
                                };
                                return this.renderer.getTextNode(
                                        this._parse(token.tokens, boldStyle),
                                        boldStyle,
                                );
                        }
                        case "em": {
                                const italicStyle = {
                                        ...this.styles.em,
                                        ...styles,
                                };
                                return this.renderer.getTextNode(
                                        this._parse(token.tokens, italicStyle),
                                        italicStyle,
                                );
                        }
                        case "codespan": {
                                return this.renderer.getTextNode(token.text, {
                                        ...this.styles.codespan,
                                        ...styles,
                                });
                        }
                        case "br": {
                                return this.renderer.getTextNode("\n", {});
                        }
                        case "del": {
                                const strikethroughStyle = {
                                        ...this.styles.strikethrough,
                                        ...styles,
                                };
                                return this.renderer.getTextNode(
                                        this._parse(token.tokens, strikethroughStyle),
                                        strikethroughStyle,
                                );
                        }
                        case "text":
                        case "html": {
                                if (token.type === "html") {
                                        console.warn(
                                                "react-native-marked: rendering html from markdown is not supported",
                                        );
                                }

                                return this.renderer.getTextNode(token.raw, {
                                        ...this.styles.text,
                                        ...styles,
                                });
                        }
                        default: {
                                console.warn(
                                        `react-native-marked: token with '${token.type}' type was not found.`,
                                );
                                return null;
                        }
                }
        }

        private getNormalizedSiblingNodesForBlockAndInlineTokens = (
                tokens: marked.Token[],
                textStyle?: TextStyle,
        ): ReactNode[] => {
                let tokenRenderQueue: marked.Token[] = [];
                const siblingNodes: ReactNode[] = [];
                tokens.forEach((t) => {
                        /**
                         * To avoid inlining images
                         * Currently supports images, link images
                         * Note: to be extend for other token types
                         */
                        if (
                                t.type === "image" ||
                                (t.type === "link" &&
                                        t.tokens &&
                                        t.tokens[0] &&
                                        t.tokens[0].type === "image")
                        ) {
                                // Render existing inline tokens in the queue
                                const parsed = this._parse(tokenRenderQueue);
                                if (parsed.length > 0) {
                                        siblingNodes.push(this.renderer.getTextNode(parsed, textStyle));
                                }

                                // 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;
                                        const href = getValidURL(this.baseUrl, t.href);
                                        siblingNodes.push(
                                                this.renderer.getImageLinkNode(
                                                        href,
                                                        imageToken.href,
                                                        imageToken.text || imageToken.title,
                                                        this.styles.image,
                                                ),
                                        );
                                }

                                tokenRenderQueue = [];
                                return;
                        }
                        tokenRenderQueue = [...tokenRenderQueue, t];
                });

                /* Remaining temp tokens if any */
                if (tokenRenderQueue.length > 0) {
                        siblingNodes.push(
                                this.renderer.getTextNode(this._parse(tokenRenderQueue), {}),
                        );
                }

                return siblingNodes;
        };
}

export default Parser;

1	import type { ReactNode } from "react";
2	import type { TextStyle, ViewStyle, ImageStyle } from "react-native";
3	import type { marked } from "marked";
4	import Renderer from "./Renderer";
5	import type { MarkedStyles } from "../theme/types";
6	import type { ParserOptions } from "./types";
7	import { getValidURL } from "./../utils/url";
8
9	class Parser {
10	private renderer;
11	private styles: MarkedStyles;
12	private headingStylesMap: Record<number, TextStyle \| undefined>;
13	private baseUrl: string;
14	constructor(options: ParserOptions) {
15	this.styles = { ...options.styles };	54✔
16	this.baseUrl = options.baseUrl ?? "";	54✔
17	this.renderer = new Renderer();	54✔
18	this.headingStylesMap = {	54✔
19	1: this.styles.h1,
20	2: this.styles.h2,
21	3: this.styles.h3,
22	4: this.styles.h4,
23	5: this.styles.h5,
24	6: this.styles.h6,
25	};
26	}
27
28	parse(tokens: marked.Token[]) {
29	return this._parse(tokens);	54✔
30	}
31
32	private _parse(
33	tokens: marked.Token[],
34	styles?: ViewStyle \| TextStyle \| ImageStyle,
35	) {
36	const elements: ReactNode[] = tokens.map((token) => {	1,176✔
37	return this._parseToken(token, styles);	2,643✔
38	});
39	return elements.filter((element) => element !== null);	2,643✔
40	}
41
42	private _parseToken(
43	token: marked.Token,
44	styles?: ViewStyle \| TextStyle \| ImageStyle,
45	): ReactNode {
46	switch (token.type) {	2,776!
47	case "space": {
48	return null;	308✔
49	}
50	case "paragraph": {
51	const paragraphChildren =
52	this.getNormalizedSiblingNodesForBlockAndInlineTokens(	251✔
53	token.tokens,
54	this.styles.text,
55	);
56
57	return this.renderer.getViewNode(	251✔
58	paragraphChildren,
59	this.styles.paragraph,
60	);
61	}
62	case "blockquote": {
63	return this.renderer.getBlockquoteNode(	51✔
64	this._parse(token.tokens),
65	this.styles.blockquote,
66	);
67	}
68	case "heading": {
69	const styles = this.headingStylesMap[token.depth];	197✔
70	return this.renderer.getTextNode(	197✔
71	this._parse(token.tokens, styles),
72	styles,
73	);
74	}
75	case "code": {
76	return this.renderer.getCodeBlockNode(	35✔
77	token.text,
78	this.styles.code,
79	this.styles.em,
80	);
81	}
82	case "hr": {
83	return this.renderer.getViewNode(null, this.styles.hr);	37✔
84	}
85	case "list": {
86	const li = token.items.map((item) => {	110✔
87	const children = item.tokens.map((cItem) => {	285✔
88	if (cItem.type === "text") {	428✔
89	/* getViewNode since tokens could contain a block like elements (i.e. img) */
90	const childTokens = (cItem as marked.Tokens.Text).tokens \|\| [];	320!
91	const listChildren =
92	this.getNormalizedSiblingNodesForBlockAndInlineTokens(	320✔
93	childTokens,
94	this.styles.li,
95	);
96	return this.renderer.getViewNode(listChildren, this.styles.li);	320✔
97	}
98
99	/* Parse the nested token */
100	return this._parseToken(cItem);	108✔
101	});
102	return this.renderer.getViewNode(children, this.styles.li);	285✔
103	});
104	return this.renderer.getListNode(	110✔
105	token.ordered,
106	li,
107	this.styles.list,
108	this.styles.li,
109	);
110	}
111	case "escape": {
112	return this.renderer.getTextNode(token.text, {	1✔
113	...this.styles.text,
114	...styles,
115	});
116	}
117	case "link": {
118	// Note: Linking Images (https://www.markdownguide.org/basic-syntax/#linking-images) are wrapped
119	// in paragraph token, so will be handled via `getNormalizedSiblingNodesForBlockAndInlineTokens`
120	const linkStyle = {	128✔
121	...styles,
122	...this.styles.link, // To override color property
123	};
124	const href = getValidURL(this.baseUrl, token.href);	128✔
125	return this.renderer.getTextLinkNode(	128✔
126	this._parse(token.tokens, linkStyle),
127	href,
128	linkStyle,
129	);
130	}
131	case "image": {
132	return this.renderer.getImageNode(	25✔
133	token.href,
134	token.text \|\| token.title,	26✔
135	this.styles.image,
136	);
137	}
138	case "strong": {
139	const boldStyle = {	49✔
140	...this.styles.strong,
141	...styles,
142	};
143	return this.renderer.getTextNode(	49✔
144	this._parse(token.tokens, boldStyle),
145	boldStyle,
146	);
147	}
148	case "em": {
149	const italicStyle = {	103✔
150	...this.styles.em,
151	...styles,
152	};
153	return this.renderer.getTextNode(	103✔
154	this._parse(token.tokens, italicStyle),
155	italicStyle,
156	);
157	}
158	case "codespan": {
159	return this.renderer.getTextNode(token.text, {	47✔
160	...this.styles.codespan,
161	...styles,
162	});
163	}
164	case "br": {
165	return this.renderer.getTextNode("\n", {});	1✔
166	}
167	case "del": {
168	const strikethroughStyle = {	1✔
169	...this.styles.strikethrough,
170	...styles,
171	};
172	return this.renderer.getTextNode(	1✔
173	this._parse(token.tokens, strikethroughStyle),
174	strikethroughStyle,
175	);
176	}
177	case "text":
178	case "html": {
179	if (token.type === "html") {	1,432✔
180	console.warn(	57✔
181	"react-native-marked: rendering html from markdown is not supported",
182	);
183	}
184
185	return this.renderer.getTextNode(token.raw, {	1,432✔
186	...this.styles.text,
187	...styles,
188	});
189	}
190	default: {
191	console.warn(	×
192	`react-native-marked: token with '${token.type}' type was not found.`,
193	);
194	return null;	×
195	}
196	}
197	}
198
199	private getNormalizedSiblingNodesForBlockAndInlineTokens = (	54✔
200	tokens: marked.Token[],
201	textStyle?: TextStyle,
202	): ReactNode[] => {
203	let tokenRenderQueue: marked.Token[] = [];	571✔
204	const siblingNodes: ReactNode[] = [];	571✔
205	tokens.forEach((t) => {	571✔
206	/**
207	* To avoid inlining images
208	* Currently supports images, link images
209	* Note: to be extend for other token types
210	*/
211	if (	1,299✔
212	t.type === "image" \|\|	2,954✔
213	(t.type === "link" &&
214	t.tokens &&
215	t.tokens[0] &&
216	t.tokens[0].type === "image")
217	) {
218	// Render existing inline tokens in the queue
219	const parsed = this._parse(tokenRenderQueue);	26✔
220	if (parsed.length > 0) {	26✔
221	siblingNodes.push(this.renderer.getTextNode(parsed, textStyle));	13✔
222	}
223
224	// Render the current block token
225	if (t.type === "image") {	26✔
226	siblingNodes.push(this._parseToken(t));	25✔
227	} else if (t.type === "link") {	1!
228	const imageToken = t.tokens[0] as marked.Tokens.Image;	1✔
229	const href = getValidURL(this.baseUrl, t.href);	1✔
230	siblingNodes.push(	1✔
231	this.renderer.getImageLinkNode(
232	href,
233	imageToken.href,
234	imageToken.text \|\| imageToken.title,	1!
235	this.styles.image,
236	),
237	);
238	}
239
240	tokenRenderQueue = [];	26✔
241	return;	26✔
242	}
243	tokenRenderQueue = [...tokenRenderQueue, t];	1,273✔
244	});
245
246	/* Remaining temp tokens if any */
247	if (tokenRenderQueue.length > 0) {	571✔
248	siblingNodes.push(	567✔
249	this.renderer.getTextNode(this._parse(tokenRenderQueue), {}),
250	);
251	}
252
253	return siblingNodes;	571✔
254	};
255	}
256
257	export default Parser;

gmsgowtham / react-native-marked / 4210173070

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous