react-native-nitro-markdown 0.5.2 → 0.5.4

package/src/renderers/image.tsx

@@ -1,6 +1,6 @@
 import {
   useState,
-  useLayoutEffect,
+  useEffect,
   useMemo,
   type ReactNode,
   type FC,
@@ -110,26 +110,45 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
     [theme, aspectRatio],
   );
 
-  useLayoutEffect(() => {
-    // Fast path for consistent aspect ratios if checking picsum
+  useEffect(() => {
+    let isMounted = true;
+    setLoading(true);
+    setError(false);
+    setAspectRatio(undefined);
+
     const picsumMatch = url.match(/picsum\.photos\/.*\/(\d+)\/(\d+)/);
     if (picsumMatch) {
       const w = parseInt(picsumMatch[1], 10);
       const h = parseInt(picsumMatch[2], 10);
       if (!isNaN(w) && !isNaN(h) && h !== 0) {
         setAspectRatio(w / h);
+        return () => {
+          isMounted = false;
+        };
       }
     }
 
     RNImage.getSize(
       url,
       (width, height) => {
-        if (width > 0 && height > 0) {
+        if (isMounted && width > 0 && height > 0) {
           setAspectRatio(width / height);
         }
       },
-      () => {},
+      (error) => {
+        if (__DEV__) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            "[NitroMarkdown] Failed to get image dimensions:",
+            error,
+          );
+        }
+      },
     );
+
+    return () => {
+      isMounted = false;
+    };
   }, [url]);
 
   const altContent = useMemo(() => {

package/src/renderers/link.tsx

@@ -39,7 +39,8 @@ export const Link: FC<LinkProps> = ({ href, children, style }) => {
     if (!normalizedHref) return;
 
     try {
-      const shouldOpen = (await onLinkPress?.(normalizedHref)) !== false;
+      const shouldOpen =
+        (await Promise.resolve(onLinkPress?.(normalizedHref))) !== false;
       if (!shouldOpen) return;
 
       const allowedExternalHref = getAllowedExternalHref(normalizedHref);
@@ -49,7 +50,12 @@ export const Link: FC<LinkProps> = ({ href, children, style }) => {
       if (!canOpen) return;
 
       await Linking.openURL(allowedExternalHref);
-    } catch {}
+    } catch (error) {
+      if (__DEV__) {
+        // eslint-disable-next-line no-console
+        console.warn("[NitroMarkdown] Link press handler failed:", error);
+      }
+    }
   };
 
   return (

package/src/renderers/list.tsx

@@ -1,6 +1,8 @@
-import { useMemo, type FC, type ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import { View, Text, StyleSheet, Platform, type ViewStyle } from "react-native";
+import { getCachedStyles } from "./style-cache";
 import { useMarkdownContext } from "../MarkdownContext";
+import type { MarkdownTheme } from "../theme";
 
 type ListProps = {
   ordered: boolean;
@@ -10,21 +12,10 @@ type ListProps = {
   style?: ViewStyle;
 };
 
+// ordered/start stay on List for renderer API parity; markers render in ListItem.
 export const List: FC<ListProps> = ({ depth, children, style }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        list: {
-          marginBottom: theme.spacing.m,
-        },
-        listNested: {
-          marginLeft: theme.spacing.s,
-          marginBottom: 0,
-        },
-      }),
-    [theme],
-  );
+  const styles = getCachedStyles(listStylesCache, theme, createListStyles);
   return (
     <View style={[styles.list, depth > 0 && styles.listNested, style]}>
       {children}
@@ -48,30 +39,10 @@ export const ListItem: FC<ListItemProps> = ({
   style,
 }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        listItem: {
-          flexDirection: "row",
-          marginBottom: theme.spacing.s,
-          alignItems: "flex-start",
-        },
-        listBullet: {
-          color: theme.colors.accent,
-          fontSize: theme.fontSizes.m,
-          lineHeight: theme.fontSizes.m * 1.6,
-          marginRight: theme.spacing.s,
-          minWidth: 22,
-          textAlign: "center",
-          fontFamily: theme.fontFamilies.regular,
-          ...(Platform.OS === "android" && { includeFontPadding: false }),
-        },
-        listItemContent: {
-          flex: 1,
-          minWidth: 0,
-        },
-      }),
-    [theme],
+  const styles = getCachedStyles(
+    listItemStylesCache,
+    theme,
+    createListItemStyles,
   );
   const bullet = ordered ? `${start + index}.` : "•";
   return (
@@ -94,42 +65,10 @@ export const TaskListItem: FC<TaskListItemProps> = ({
   style,
 }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        taskListItem: {
-          flexDirection: "row",
-          alignItems: "flex-start",
-          marginBottom: theme.spacing.s,
-        },
-        taskCheckbox: {
-          width: 18,
-          height: 18,
-          borderRadius: 4,
-          borderWidth: 2,
-          borderColor: theme.colors.accent,
-          alignItems: "center",
-          justifyContent: "center",
-          marginRight: theme.spacing.s,
-          marginTop: 2,
-        },
-        taskCheckboxChecked: {
-          backgroundColor: theme.colors.accent,
-        },
-        taskCheckboxText: {
-          color: theme.colors.surface,
-          fontSize: 12,
-          lineHeight: 12,
-          fontWeight: "700",
-          fontFamily: theme.fontFamilies.regular,
-          ...(Platform.OS === "android" && { includeFontPadding: false }),
-        },
-        taskContent: {
-          flex: 1,
-          minWidth: 0,
-        },
-      }),
-    [theme],
+  const styles = getCachedStyles(
+    taskListItemStylesCache,
+    theme,
+    createTaskListItemStyles,
   );
   return (
     <View style={[styles.taskListItem, style]}>
@@ -142,3 +81,83 @@ export const TaskListItem: FC<TaskListItemProps> = ({
     </View>
   );
 };
+
+type ListStyles = ReturnType<typeof createListStyles>;
+type ListItemStyles = ReturnType<typeof createListItemStyles>;
+type TaskListItemStyles = ReturnType<typeof createTaskListItemStyles>;
+
+const listStylesCache = new WeakMap<MarkdownTheme, ListStyles>();
+const listItemStylesCache = new WeakMap<MarkdownTheme, ListItemStyles>();
+const taskListItemStylesCache = new WeakMap<
+  MarkdownTheme,
+  TaskListItemStyles
+>();
+
+const createListStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    list: {
+      marginBottom: theme.spacing.m,
+    },
+    listNested: {
+      marginLeft: theme.spacing.s,
+      marginBottom: 0,
+    },
+  });
+
+const createListItemStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    listItem: {
+      flexDirection: "row",
+      marginBottom: theme.spacing.s,
+      alignItems: "flex-start",
+    },
+    listBullet: {
+      color: theme.colors.accent,
+      fontSize: theme.fontSizes.m,
+      lineHeight: theme.fontSizes.m * 1.6,
+      marginRight: theme.spacing.s,
+      minWidth: 22,
+      textAlign: "center",
+      fontFamily: theme.fontFamilies.regular,
+      ...(Platform.OS === "android" && { includeFontPadding: false }),
+    },
+    listItemContent: {
+      flex: 1,
+      minWidth: 0,
+    },
+  });
+
+const createTaskListItemStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    taskListItem: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      marginBottom: theme.spacing.s,
+    },
+    taskCheckbox: {
+      width: 18,
+      height: 18,
+      borderRadius: 4,
+      borderWidth: 2,
+      borderColor: theme.colors.accent,
+      alignItems: "center",
+      justifyContent: "center",
+      marginRight: theme.spacing.s,
+      marginTop: 2,
+    },
+    taskCheckboxChecked: {
+      backgroundColor: theme.colors.accent,
+    },
+    taskCheckboxText: {
+      color: theme.colors.surface,
+      fontSize: 12,
+      lineHeight: 12,
+      fontWeight: "700",
+      fontFamily: theme.fontFamilies.regular,
+      ...(Platform.OS === "android" && { includeFontPadding: false }),
+    },
+    taskContent: {
+      flex: 1,
+      minWidth: 0,
+    },
+  });

package/src/renderers/math.tsx

@@ -1,4 +1,4 @@
-import { useMemo, type FC, type ComponentType } from "react";
+import type { FC, ComponentType } from "react";
 import {
   View,
   Text,
@@ -7,6 +7,7 @@ import {
   type StyleProp,
   type ViewStyle,
 } from "react-native";
+import { getCachedStyles } from "./style-cache";
 import { useMarkdownContext } from "../MarkdownContext";
 import type { MarkdownTheme } from "../theme";
 
@@ -23,7 +24,12 @@ try {
   const mathJaxModule = require("react-native-mathjax-svg");
   MathJaxComponent = mathJaxModule.default || mathJaxModule;
 } catch {
-  // ignored
+  if (__DEV__) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "[NitroMarkdown] react-native-mathjax-svg not found — math will render as plain text.",
+    );
+  }
 }
 
 type MathInlineProps = {
@@ -31,11 +37,14 @@ type MathInlineProps = {
   style?: ViewStyle;
 };
 
+type MathStyles = ReturnType<typeof createMathStyles>;
+
+const mathStylesCache = new WeakMap<MarkdownTheme, MathStyles>();
+
 const createMathStyles = (theme: MarkdownTheme) =>
   StyleSheet.create({
     mathInlineContainer: {
       marginHorizontal: 2,
-      // Ensure the inline view has layout alignment
       justifyContent: "center",
     },
     mathInlineFallbackContainer: {
@@ -88,7 +97,7 @@ const createMathStyles = (theme: MarkdownTheme) =>
 
 export const MathInline: FC<MathInlineProps> = ({ content, style }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(() => createMathStyles(theme), [theme]);
+  const styles = getCachedStyles(mathStylesCache, theme, createMathStyles);
 
   if (!content) return null;
 
@@ -122,7 +131,7 @@ type MathBlockProps = {
 
 export const MathBlock: FC<MathBlockProps> = ({ content, style }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(() => createMathStyles(theme), [theme]);
+  const styles = getCachedStyles(mathStylesCache, theme, createMathStyles);
 
   if (!content) return null;
 

package/src/renderers/paragraph.tsx

@@ -1,6 +1,8 @@
-import { useMemo, type FC, type ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import { View, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
+import { getCachedStyles } from "./style-cache";
 import { useMarkdownContext } from "../MarkdownContext";
+import type { MarkdownTheme } from "../theme";
 
 type ParagraphProps = {
   children: ReactNode;
@@ -14,22 +16,7 @@ export const Paragraph: FC<ParagraphProps> = ({
   style,
 }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        paragraph: {
-          flexDirection: "row",
-          flexWrap: "wrap",
-          marginBottom: theme.spacing.l,
-          gap: 0,
-        },
-        paragraphInListItem: {
-          marginBottom: 0,
-          marginTop: 0,
-        },
-      }),
-    [theme],
-  );
+  const styles = getCachedStyles(stylesCache, theme, createStyles);
 
   return (
     <View
@@ -43,3 +30,21 @@ export const Paragraph: FC<ParagraphProps> = ({
     </View>
   );
 };
+
+type ParagraphStyles = ReturnType<typeof createStyles>;
+
+const stylesCache = new WeakMap<MarkdownTheme, ParagraphStyles>();
+
+const createStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    paragraph: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      marginBottom: theme.spacing.l,
+      gap: 0,
+    },
+    paragraphInListItem: {
+      marginBottom: 0,
+      marginTop: 0,
+    },
+  });

package/src/renderers/style-cache.ts

@@ -0,0 +1,14 @@
+import type { MarkdownTheme } from "../theme";
+
+export function getCachedStyles<T>(
+  cache: WeakMap<MarkdownTheme, T>,
+  theme: MarkdownTheme,
+  createStyles: (theme: MarkdownTheme) => T,
+): T {
+  const cached = cache.get(theme);
+  if (cached) return cached;
+
+  const styles = createStyles(theme);
+  cache.set(theme, styles);
+  return styles;
+}

package/src/renderers/table/cell-content.tsx

@@ -1,5 +1,11 @@
-import { type FC, type ComponentType } from "react";
-import { View, Text, type StyleProp, type TextStyle } from "react-native";
+import type { FC, ComponentType } from "react";
+import {
+  View,
+  Text,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
 import type { MarkdownNode } from "../../headless";
 import type { NodeRendererProps } from "../../MarkdownContext";
 
@@ -7,7 +13,8 @@ type CellContentProps = {
   node: MarkdownNode;
   Renderer: ComponentType<NodeRendererProps>;
   styles: {
-    cellContentWrapper: object;
+    cellContentWrapper: StyleProp<ViewStyle>;
+    [key: string]: StyleProp<ViewStyle | TextStyle> | undefined;
   };
   textStyle?: StyleProp<TextStyle>;
 };
@@ -26,7 +33,11 @@ export const CellContent: FC<CellContentProps> = ({
     <View style={styles.cellContentWrapper}>
       {node.children.map((child, idx) => (
         <Renderer
-          key={idx}
+          key={
+            child.beg != null
+              ? `${child.type}-${child.beg}`
+              : `${child.type}-${idx}`
+          }
           node={child}
           depth={0}
           inListItem={false}

package/src/renderers/table/index.tsx

@@ -15,15 +15,19 @@ import {
   type ViewStyle,
   type LayoutChangeEvent,
 } from "react-native";
-import { useMarkdownContext, type NodeRendererProps } from "../../MarkdownContext";
-import type { MarkdownTheme } from "../../theme";
 import { CellContent } from "./cell-content";
-import { extractTableData, estimateColumnWidths } from "./table-utils";
 import {
   columnWidthsReducer,
   DEFAULT_MIN_COLUMN_WIDTH,
   DEFAULT_MEASUREMENT_STABILIZE_MS,
 } from "./table-reducer";
+import { extractTableData, estimateColumnWidths } from "./table-utils";
+import {
+  useMarkdownContext,
+  type NodeRendererProps,
+} from "../../MarkdownContext";
+import { getCachedStyles } from "../style-cache";
+import type { MarkdownTheme } from "../../theme";
 
 type TableRendererProps = {
   node: import("../../headless").MarkdownNode;
@@ -55,7 +59,7 @@ export const TableRenderer: FC<TableRendererProps> = ({
   );
 
   const columnCount = headers.length;
-  const styles = useMemo(() => createTableStyles(theme), [theme]);
+  const styles = getCachedStyles(tableStylesCache, theme, createTableStyles);
   const estimatedColumnWidths = useMemo(
     () => estimateColumnWidths(headers, rows, columnCount, minColumnWidth),
     [headers, rows, columnCount, minColumnWidth],
@@ -147,6 +151,15 @@ export const TableRenderer: FC<TableRendererProps> = ({
     };
   }, [estimatedColumnWidths, expectedCellKeySignature, measurementStabilizeMs]);
 
+  useEffect(() => {
+    const widthsMap = measuredWidths.current;
+    const cellsSet = measuredCells.current;
+    return () => {
+      widthsMap.clear();
+      cellsSet.clear();
+    };
+  }, []);
+
   const onCellLayout = useCallback(
     (cellKey: string, width: number) => {
       if (width <= 0 || widthsCalculated.current || !needsMeasurement) return;
@@ -201,6 +214,14 @@ export const TableRenderer: FC<TableRendererProps> = ({
     return "flex-start";
   };
 
+  const tableBackgroundStyle = useMemo(
+    () => ({
+      backgroundColor:
+        style?.backgroundColor ?? theme.colors.surface ?? "#111827",
+    }),
+    [style, theme.colors.surface],
+  );
+
   if (columnCount === 0) return null;
 
   const hasWidths = columnWidths.length === columnCount;
@@ -257,15 +278,7 @@ export const TableRenderer: FC<TableRendererProps> = ({
         style={styles.tableScroll}
         bounces={false}
       >
-        <View
-          style={[
-            styles.table,
-            {
-              backgroundColor:
-                style?.backgroundColor ?? theme.colors.surface ?? "#111827",
-            },
-          ]}
-        >
+        <View style={[styles.table, tableBackgroundStyle]}>
           <View style={styles.headerRow}>
             {headers.map((cell, colIndex) => (
               <View
@@ -326,6 +339,10 @@ export const TableRenderer: FC<TableRendererProps> = ({
   );
 };
 
+type TableStyles = ReturnType<typeof createTableStyles>;
+
+const tableStylesCache = new WeakMap<MarkdownTheme, TableStyles>();
+
 const createTableStyles = (theme: MarkdownTheme) => {
   const colors = theme?.colors || {};
   const borderRadius = theme?.borderRadius || { m: 8 };

package/src/theme.ts

@@ -1,5 +1,4 @@
 import { Platform, type TextStyle, type ViewStyle } from "react-native";
-import type { MarkdownNode } from "./headless";
 
 export type MarkdownTheme = {
   colors: {
@@ -85,13 +84,13 @@ export const defaultMarkdownTheme: MarkdownTheme = {
     tableRowEven: "transparent",
     tableRowOdd: "#f8fafc",
     codeTokenColors: {
-      keyword: '#c792ea',
-      string: '#c3e88d',
-      comment: '#546e7a',
-      number: '#f78c6c',
-      operator: '#89ddff',
-      punctuation: '#89ddff',
-      type: '#ffcb6b',
+      keyword: "#c792ea",
+      string: "#c3e88d",
+      comment: "#546e7a",
+      number: "#f78c6c",
+      operator: "#89ddff",
+      punctuation: "#89ddff",
+      type: "#ffcb6b",
     },
   },
   spacing: {
@@ -149,13 +148,34 @@ export type PartialMarkdownTheme = {
 };
 
 type TextNodeType =
-  | "text" | "bold" | "italic" | "strikethrough" | "link"
-  | "code_inline" | "heading" | "paragraph" | "math_inline" | "html_inline";
+  | "text"
+  | "bold"
+  | "italic"
+  | "strikethrough"
+  | "link"
+  | "code_inline"
+  | "heading"
+  | "paragraph"
+  | "math_inline"
+  | "html_inline";
 type ViewNodeType =
-  | "document" | "blockquote" | "code_block" | "horizontal_rule"
-  | "image" | "list" | "list_item" | "task_list_item" | "table"
-  | "table_head" | "table_body" | "table_row" | "table_cell"
-  | "math_block" | "html_block" | "line_break" | "soft_break";
+  | "document"
+  | "blockquote"
+  | "code_block"
+  | "horizontal_rule"
+  | "image"
+  | "list"
+  | "list_item"
+  | "task_list_item"
+  | "table"
+  | "table_head"
+  | "table_body"
+  | "table_row"
+  | "table_cell"
+  | "math_block"
+  | "html_block"
+  | "line_break"
+  | "soft_break";
 
 export type NodeStyleOverrides = Partial<
   { [K in TextNodeType]: TextStyle } & { [K in ViewNodeType]: ViewStyle }