react-native-nitro-markdown 0.5.3 → 0.5.5

package/src/markdown.tsx

@@ -18,7 +18,6 @@ import {
   type ListRenderItemInfo,
   type FlatListProps,
   type StyleProp,
-  type TextStyle,
   type ViewStyle,
 } from "react-native";
 import {
@@ -101,9 +100,15 @@ function safeOnError<P extends string>(
 }
 
 const baseStylesCache = new WeakMap<MarkdownTheme, BaseStyles>();
-const parseAstCache = new Map<string, MarkdownNode>();
+type ParseAstCacheEntry = {
+  text: string;
+  ast: MarkdownNode;
+};
+
+const parseAstCache = new Map<string, ParseAstCacheEntry>();
 const MAX_PARSE_CACHE_ENTRIES = 32;
 const MAX_CACHEABLE_TEXT_LENGTH = 24_000;
+const EMPTY_RENDERERS: CustomRenderers = {};
 
 export type AstTransform = (ast: MarkdownNode) => MarkdownNode;
 export type MarkdownVirtualizationOptions = Pick<
@@ -166,12 +171,14 @@ const cloneMarkdownNode = (node: MarkdownNode): MarkdownNode => {
 };
 
 const getParserOptionsKey = (options?: ParserOptions): string => {
-  if (!options) return "gfm:default|math:default";
+  if (!options) return "gfm:default|math:default|html:default";
 
   const gfm = options.gfm === undefined ? "default" : options.gfm ? "1" : "0";
   const math =
     options.math === undefined ? "default" : options.math ? "1" : "0";
-  return `gfm:${gfm}|math:${math}`;
+  const html =
+    options.html === undefined ? "default" : options.html ? "1" : "0";
+  return `gfm:${gfm}|math:${math}|html:${html}`;
 };
 
 const normalizeParserOptions = (
@@ -181,14 +188,16 @@ const normalizeParserOptions = (
 
   const gfm = options.gfm;
   const math = options.math;
+  const html = options.html;
 
-  if (gfm === undefined && math === undefined) {
+  if (gfm === undefined && math === undefined && html === undefined) {
     return undefined;
   }
 
   return {
     gfm,
     math,
+    html,
   };
 };
 
@@ -211,15 +220,18 @@ const getCachedParsedAst = (
   }
 
   const cacheKey = `${getParserOptionsKey(options)}|${text.length}|${hashString(text)}`;
-  const cachedNode = parseAstCache.get(cacheKey);
-  if (cachedNode) {
+  const cachedEntry = parseAstCache.get(cacheKey);
+  if (cachedEntry?.text === text) {
     parseAstCache.delete(cacheKey);
-    parseAstCache.set(cacheKey, cachedNode);
-    return cloneMarkdownNode(cachedNode);
+    parseAstCache.set(cacheKey, cachedEntry);
+    return cloneMarkdownNode(cachedEntry.ast);
   }
 
   const parsedNode = parseWithNativeParser(text, options);
-  parseAstCache.set(cacheKey, parsedNode);
+  parseAstCache.set(cacheKey, {
+    text,
+    ast: parsedNode,
+  });
   if (parseAstCache.size > MAX_PARSE_CACHE_ENTRIES) {
     const oldestCacheKey = parseAstCache.keys().next().value;
     if (typeof oldestCacheKey === "string") {
@@ -230,20 +242,27 @@ const getCachedParsedAst = (
   return cloneMarkdownNode(parsedNode);
 };
 
+const sortPluginsByPriority = (
+  plugins?: MarkdownPlugin[],
+): MarkdownPlugin[] | undefined => {
+  if (!plugins || plugins.length === 0) {
+    return undefined;
+  }
+
+  return [...plugins].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+};
+
 const applyBeforeParsePlugins = (
   markdown: string,
-  plugins?: MarkdownPlugin[],
+  sortedPlugins?: MarkdownPlugin[],
   onError?: (error: Error, phase: "before-plugin", pluginName?: string) => void,
 ): string => {
-  if (!plugins || plugins.length === 0) {
+  if (!sortedPlugins || sortedPlugins.length === 0) {
     return markdown;
   }
 
-  const sorted = [...plugins].sort(
-    (a, b) => (b.priority ?? 0) - (a.priority ?? 0),
-  );
   let nextMarkdown = markdown;
-  for (const plugin of sorted) {
+  for (const plugin of sortedPlugins) {
     if (!plugin.beforeParse) continue;
 
     try {
@@ -266,18 +285,15 @@ const applyBeforeParsePlugins = (
 
 const applyAfterParsePlugins = (
   ast: MarkdownNode,
-  plugins?: MarkdownPlugin[],
+  sortedPlugins?: MarkdownPlugin[],
   onError?: (error: Error, phase: "after-plugin", pluginName?: string) => void,
 ): MarkdownNode => {
-  if (!plugins || plugins.length === 0) {
+  if (!sortedPlugins || sortedPlugins.length === 0) {
     return ast;
   }
 
-  const sorted = [...plugins].sort(
-    (a, b) => (b.priority ?? 0) - (a.priority ?? 0),
-  );
   let nextAst = ast;
-  for (const plugin of sorted) {
+  for (const plugin of sortedPlugins) {
     if (!plugin.afterParse) continue;
 
     try {
@@ -304,7 +320,7 @@ export type MarkdownProps = {
    */
   children: string;
   /**
-   * Parser options to enable GFM or Math support.
+   * Parser options to enable GFM, math, or raw HTML AST support.
    */
   options?: ParserOptions;
   /**
@@ -316,6 +332,12 @@ export type MarkdownProps = {
    * When provided, native parse is skipped and this tree is rendered instead.
    */
   sourceAst?: MarkdownNode;
+  /**
+   * Enables internal parse AST cache keyed by parser options and markdown.
+   * Disable to force native parse on each parse cycle.
+   * @default true
+   */
+  parseCache?: boolean;
   /**
    * Optional transform applied after parsing and before rendering.
    * The transformed AST is also returned in `onParseComplete`.
@@ -420,8 +442,9 @@ export const Markdown: FC<MarkdownProps> = ({
   options,
   plugins,
   sourceAst,
+  parseCache = true,
   astTransform,
-  renderers = {},
+  renderers = EMPTY_RENDERERS,
   theme: userTheme,
   styles: nodeStyles,
   stylingStrategy = "opinionated",
@@ -438,31 +461,31 @@ export const Markdown: FC<MarkdownProps> = ({
 }) => {
   const parserOptionGfm = options?.gfm;
   const parserOptionMath = options?.math;
+  const parserOptionHtml = options?.html;
 
   /* eslint-disable react-hooks/refs -- Refs updated/read intentionally to avoid re-parsing on callback identity changes */
   const onErrorRef = useRef(onError);
   onErrorRef.current = onError;
 
-  const pluginsRef = useRef(plugins);
-  pluginsRef.current = plugins;
-
   const parseResult = useMemo(() => {
     try {
-      const markdownToParse = applyBeforeParsePlugins(
-        children,
-        pluginsRef.current,
-        onErrorRef.current,
-      );
+      const sortedPlugins = sortPluginsByPriority(plugins);
+      const markdownToParse = sourceAst
+        ? children
+        : applyBeforeParsePlugins(children, sortedPlugins, onErrorRef.current);
       const parserOptions = normalizeParserOptions({
         gfm: parserOptionGfm,
         math: parserOptionMath,
+        html: parserOptionHtml,
       });
       let parsedAst = sourceAst
         ? cloneMarkdownNode(sourceAst)
-        : getCachedParsedAst(markdownToParse, parserOptions);
+        : parseCache
+          ? getCachedParsedAst(markdownToParse, parserOptions)
+          : parseWithNativeParser(markdownToParse, parserOptions);
       parsedAst = applyAfterParsePlugins(
         parsedAst,
-        pluginsRef.current,
+        sortedPlugins,
         onErrorRef.current,
       );
 
@@ -491,12 +514,27 @@ export const Markdown: FC<MarkdownProps> = ({
         ast: null,
       };
     }
-  }, [children, parserOptionGfm, parserOptionMath, sourceAst, astTransform]);
+  }, [
+    children,
+    parserOptionGfm,
+    parserOptionMath,
+    parserOptionHtml,
+    sourceAst,
+    parseCache,
+    astTransform,
+    plugins,
+  ]);
   /* eslint-enable react-hooks/refs */
 
   useEffect(() => {
     onParsingInProgress?.();
-  }, [children, parserOptionGfm, parserOptionMath, onParsingInProgress]);
+  }, [
+    children,
+    parserOptionGfm,
+    parserOptionMath,
+    parserOptionHtml,
+    onParsingInProgress,
+  ]);
 
   useEffect(() => {
     if (!parseResult.ast || !onParseComplete) return;
@@ -749,28 +787,24 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
     }
   }
 
-  const nodeStyleOverride = nodeStyles?.[node.type] as
-    | (ViewStyle & TextStyle)
-    | undefined;
-
   switch (node.type) {
     case "document":
       return (
-        <View style={[baseStyles.document, nodeStyleOverride]}>
+        <View style={[baseStyles.document, nodeStyles?.document]}>
           {renderChildren(node.children, false, false)}
         </View>
       );
 
     case "heading":
       return (
-        <Heading level={node.level ?? 1} style={nodeStyleOverride}>
+        <Heading level={node.level ?? 1} style={nodeStyles?.heading}>
           {renderChildren(node.children, inListItem, true)}
         </Heading>
       );
 
     case "paragraph":
       return (
-        <Paragraph inListItem={inListItem} style={nodeStyleOverride}>
+        <Paragraph inListItem={inListItem} style={nodeStyles?.paragraph}>
           {renderChildren(node.children, inListItem, false)}
         </Paragraph>
       );
@@ -780,33 +814,33 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
         return <Text>{node.content}</Text>;
       }
       return (
-        <Text style={[baseStyles.text, nodeStyleOverride]}>{node.content}</Text>
+        <Text style={[baseStyles.text, nodeStyles?.text]}>{node.content}</Text>
       );
 
     case "bold":
       return (
-        <Text style={[baseStyles.bold, nodeStyleOverride]}>
+        <Text style={[baseStyles.bold, nodeStyles?.bold]}>
           {renderChildren(node.children, inListItem, true)}
         </Text>
       );
 
     case "italic":
       return (
-        <Text style={[baseStyles.italic, nodeStyleOverride]}>
+        <Text style={[baseStyles.italic, nodeStyles?.italic]}>
           {renderChildren(node.children, inListItem, true)}
         </Text>
       );
 
     case "strikethrough":
       return (
-        <Text style={[baseStyles.strikethrough, nodeStyleOverride]}>
+        <Text style={[baseStyles.strikethrough, nodeStyles?.strikethrough]}>
           {renderChildren(node.children, inListItem, true)}
         </Text>
       );
 
     case "link":
       return (
-        <Link href={node.href ?? ""} style={nodeStyleOverride}>
+        <Link href={node.href ?? ""} style={nodeStyles?.link}>
           {renderChildren(node.children, inListItem, true)}
         </Link>
       );
@@ -818,31 +852,33 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
           title={node.title}
           alt={node.alt}
           Renderer={NodeRenderer}
-          style={nodeStyleOverride}
+          style={nodeStyles?.image}
         />
       );
 
     case "code_inline":
-      return <InlineCode style={nodeStyleOverride}>{node.content}</InlineCode>;
+      return (
+        <InlineCode style={nodeStyles?.code_inline}>{node.content}</InlineCode>
+      );
 
     case "code_block":
       return (
         <CodeBlock
           language={node.language}
           content={getTextContent(node)}
-          style={nodeStyleOverride}
+          style={nodeStyles?.code_block}
         />
       );
 
     case "blockquote":
       return (
-        <Blockquote style={nodeStyleOverride}>
+        <Blockquote style={nodeStyles?.blockquote}>
           {renderChildren(node.children, inListItem, false)}
         </Blockquote>
       );
 
     case "horizontal_rule":
-      return <HorizontalRule style={nodeStyleOverride} />;
+      return <HorizontalRule style={nodeStyles?.horizontal_rule} />;
 
     case "line_break":
       return <Text>{"\n"}</Text>;
@@ -854,12 +890,17 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
       let mathContent = getTextContent(node);
       if (!mathContent) return null;
       mathContent = mathContent.replace(/^\$+|\$+$/g, "").trim();
-      return <MathInline content={mathContent} style={nodeStyleOverride} />;
+      return (
+        <MathInline content={mathContent} style={nodeStyles?.math_inline} />
+      );
     }
 
     case "math_block":
       return (
-        <MathBlock content={getTextContent(node)} style={nodeStyleOverride} />
+        <MathBlock
+          content={getTextContent(node)}
+          style={nodeStyles?.math_block}
+        />
       );
 
     case "list":
@@ -868,7 +909,7 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
           ordered={node.ordered ?? false}
           start={node.start}
           depth={depth}
-          style={nodeStyleOverride}
+          style={nodeStyles?.list}
         >
           {node.children?.map((child, index) => {
             if (child.type === "task_list_item") {
@@ -906,7 +947,10 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
 
     case "task_list_item":
       return (
-        <TaskListItem checked={node.checked ?? false} style={nodeStyleOverride}>
+        <TaskListItem
+          checked={node.checked ?? false}
+          style={nodeStyles?.task_list_item}
+        >
           {renderChildren(node.children, true, false)}
         </TaskListItem>
       );
@@ -916,7 +960,7 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
         <TableRenderer
           node={node}
           Renderer={NodeRenderer}
-          style={nodeStyleOverride}
+          style={nodeStyles?.table}
         />
       );
 

package/src/renderers/blockquote.tsx

@@ -1,6 +1,8 @@
-import { useMemo, type FC, type ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import { View, StyleSheet, type ViewStyle } from "react-native";
+import { getCachedStyles } from "./style-cache";
 import { useMarkdownContext } from "../MarkdownContext";
+import type { MarkdownTheme } from "../theme";
 
 type BlockquoteProps = {
   children: ReactNode;
@@ -9,22 +11,25 @@ type BlockquoteProps = {
 
 export const Blockquote: FC<BlockquoteProps> = ({ children, style }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        blockquote: {
-          borderLeftWidth: 4,
-          borderLeftColor: theme.colors.blockquote,
-          paddingLeft: theme.spacing.l,
-          marginVertical: theme.spacing.m,
-          backgroundColor: theme.colors.surfaceLight,
-          paddingVertical: theme.spacing.m,
-          paddingRight: theme.spacing.m,
-          borderRadius: theme.borderRadius.s,
-        },
-      }),
-    [theme],
-  );
+  const styles = getCachedStyles(stylesCache, theme, createStyles);
 
   return <View style={[styles.blockquote, style]}>{children}</View>;
 };
+
+type BlockquoteStyles = ReturnType<typeof createStyles>;
+
+const stylesCache = new WeakMap<MarkdownTheme, BlockquoteStyles>();
+
+const createStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    blockquote: {
+      borderLeftWidth: 4,
+      borderLeftColor: theme.colors.blockquote,
+      paddingLeft: theme.spacing.l,
+      marginVertical: theme.spacing.m,
+      backgroundColor: theme.colors.surfaceLight,
+      paddingVertical: theme.spacing.m,
+      paddingRight: theme.spacing.m,
+      borderRadius: theme.borderRadius.s,
+    },
+  });

package/src/renderers/code.tsx

@@ -8,6 +8,7 @@ import {
   type ViewStyle,
   type TextStyle,
 } from "react-native";
+import { getCachedStyles } from "./style-cache";
 import { getTextContent } from "../headless";
 import { useMarkdownContext } from "../MarkdownContext";
 import {
@@ -15,6 +16,7 @@ import {
   type HighlightedToken,
 } from "../utils/code-highlight";
 import type { MarkdownNode } from "../headless";
+import type { MarkdownTheme } from "../theme";
 
 type CodeBlockProps = {
   language?: string;
@@ -40,41 +42,14 @@ export const CodeBlock: FC<CodeBlockProps> = ({
         : null;
 
   const displayContent = content ?? (node ? getTextContent(node) : "");
-
-  const styles = useMemo(
+  const highlightedTokens = useMemo(
     () =>
-      StyleSheet.create({
-        codeBlock: {
-          backgroundColor: theme.colors.codeBackground,
-          borderRadius: theme.borderRadius.m,
-          padding: theme.spacing.l,
-          marginVertical: theme.spacing.m,
-          borderWidth: 1,
-          borderColor: theme.colors.border,
-        },
-        codeLanguage: {
-          color: theme.colors.codeLanguage,
-          fontSize: theme.fontSizes.xs,
-          fontWeight: "600",
-          marginBottom: theme.spacing.s,
-          textTransform: "uppercase",
-          letterSpacing: 0.5,
-          fontFamily: theme.fontFamilies.mono,
-          ...(Platform.OS === "android" && { includeFontPadding: false }),
-        },
-        codeBlockText: {
-          fontFamily:
-            theme.fontFamilies.mono ??
-            Platform.select({ ios: "Courier", android: "monospace" }),
-          fontSize: theme.fontSizes.s,
-          color: theme.colors.text,
-          lineHeight: theme.fontSizes.s * 1.5,
-          ...(Platform.OS === "android" && { includeFontPadding: false }),
-        },
-      }),
-    [theme],
+      highlighter && language ? highlighter(language, displayContent) : null,
+    [displayContent, highlighter, language],
   );
 
+  const styles = getCachedStyles(codeBlockStylesCache, theme, createCodeStyles);
+
   const showLanguage = theme.showCodeLanguage && language;
 
   return (
@@ -87,21 +62,18 @@ export const CodeBlock: FC<CodeBlockProps> = ({
         showsHorizontalScrollIndicator={false}
         bounces={false}
       >
-        {highlighter && language ? (
+        {highlightedTokens ? (
           <Text style={styles.codeBlockText} selectable>
-            {highlighter(language, displayContent).map(
-              (token: HighlightedToken, i: number) => {
-                const tokenColor =
-                  ctx.theme.colors.codeTokenColors?.[token.type];
-                return tokenColor ? (
-                  <Text key={i} style={{ color: tokenColor }}>
-                    {token.text}
-                  </Text>
-                ) : (
-                  <Text key={i}>{token.text}</Text>
-                );
-              },
-            )}
+            {highlightedTokens.map((token: HighlightedToken, i: number) => {
+              const tokenColor = ctx.theme.colors.codeTokenColors?.[token.type];
+              return tokenColor ? (
+                <Text key={i} style={{ color: tokenColor }}>
+                  {token.text}
+                </Text>
+              ) : (
+                <Text key={i}>{token.text}</Text>
+              );
+            })}
           </Text>
         ) : (
           <Text style={styles.codeBlockText} selectable>
@@ -131,23 +103,63 @@ export const InlineCode: FC<InlineCodeProps> = ({
   const displayContent =
     content ?? children ?? (node ? getTextContent(node) : "");
 
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        codeInline: {
-          fontFamily:
-            theme.fontFamilies.mono ??
-            Platform.select({ ios: "Courier", android: "monospace" }),
-          fontSize: theme.fontSizes.s,
-          color: theme.colors.code,
-          backgroundColor: theme.colors.codeBackground,
-          paddingHorizontal: theme.spacing.xs,
-          paddingVertical: 2,
-          borderRadius: theme.borderRadius.s,
-          ...(Platform.OS === "android" && { includeFontPadding: false }),
-        },
-      }),
-    [theme],
+  const styles = getCachedStyles(
+    inlineCodeStylesCache,
+    theme,
+    createInlineStyles,
   );
   return <Text style={[styles.codeInline, style]}>{displayContent}</Text>;
 };
+
+type CodeBlockStyles = ReturnType<typeof createCodeStyles>;
+type InlineCodeStyles = ReturnType<typeof createInlineStyles>;
+
+const codeBlockStylesCache = new WeakMap<MarkdownTheme, CodeBlockStyles>();
+const inlineCodeStylesCache = new WeakMap<MarkdownTheme, InlineCodeStyles>();
+
+const getMonoFontFamily = (theme: MarkdownTheme) =>
+  theme.fontFamilies.mono ??
+  Platform.select({ ios: "Courier", android: "monospace" });
+
+const createCodeStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    codeBlock: {
+      backgroundColor: theme.colors.codeBackground,
+      borderRadius: theme.borderRadius.m,
+      padding: theme.spacing.l,
+      marginVertical: theme.spacing.m,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+    },
+    codeLanguage: {
+      color: theme.colors.codeLanguage,
+      fontSize: theme.fontSizes.xs,
+      fontWeight: "600",
+      marginBottom: theme.spacing.s,
+      textTransform: "uppercase",
+      letterSpacing: 0.5,
+      fontFamily: theme.fontFamilies.mono,
+      ...(Platform.OS === "android" && { includeFontPadding: false }),
+    },
+    codeBlockText: {
+      fontFamily: getMonoFontFamily(theme),
+      fontSize: theme.fontSizes.s,
+      color: theme.colors.text,
+      lineHeight: theme.fontSizes.s * 1.5,
+      ...(Platform.OS === "android" && { includeFontPadding: false }),
+    },
+  });
+
+const createInlineStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    codeInline: {
+      fontFamily: getMonoFontFamily(theme),
+      fontSize: theme.fontSizes.s,
+      color: theme.colors.code,
+      backgroundColor: theme.colors.codeBackground,
+      paddingHorizontal: theme.spacing.xs,
+      paddingVertical: 2,
+      borderRadius: theme.borderRadius.s,
+      ...(Platform.OS === "android" && { includeFontPadding: false }),
+    },
+  });