react-native-nitro-markdown 0.2.1 → 0.3.1

package/src/renderers/image.tsx

@@ -1,5 +1,19 @@
-import { useState, useMemo, type ReactNode, type FC, type ComponentType } from "react";
-import { View, Text, Image as RNImage, StyleSheet } from "react-native";
+import {
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  type ReactNode,
+  type FC,
+  type ComponentType,
+} from "react";
+import {
+  View,
+  Text,
+  Image as RNImage,
+  StyleSheet,
+  type ViewStyle,
+} from "react-native";
 
 import { parseMarkdownWithOptions, type MarkdownNode } from "../headless";
 import type { NodeRendererProps } from "../MarkdownContext";
@@ -7,7 +21,7 @@ import { useMarkdownContext } from "../MarkdownContext";
 
 const renderInlineContent = (
   node: MarkdownNode,
-  Renderer: ComponentType<NodeRendererProps>
+  Renderer: ComponentType<NodeRendererProps>,
 ): ReactNode => {
   if (node.type === "paragraph" && node.children) {
     return (
@@ -25,13 +39,14 @@ interface ImageProps {
   url: string;
   title?: string;
   alt?: string;
-
   Renderer?: ComponentType<NodeRendererProps>;
+  style?: ViewStyle;
 }
 
-export const Image: FC<ImageProps> = ({ url, title, alt, Renderer }) => {
+export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
+  const [aspectRatio, setAspectRatio] = useState<number | undefined>(undefined);
   const { theme } = useMarkdownContext();
 
   const styles = useMemo(
@@ -43,8 +58,10 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer }) => {
         },
         image: {
           width: "100%",
-          height: 200,
-          borderRadius: 8,
+          // If we have an aspect ratio, use it. Otherwise, use minHeight as fallback.
+          aspectRatio: aspectRatio,
+          minHeight: aspectRatio ? undefined : 200,
+          borderRadius: theme.borderRadius.m,
           backgroundColor: theme.colors.surface,
         },
         imageHidden: {
@@ -53,8 +70,10 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer }) => {
         },
         imageLoading: {
           width: "100%",
-          height: 200,
-          borderRadius: 8,
+          // Match the image size if possible
+          aspectRatio: aspectRatio,
+          height: aspectRatio ? undefined : 200,
+          borderRadius: theme.borderRadius.m,
           backgroundColor: theme.colors.surface,
           justifyContent: "center",
           alignItems: "center",
@@ -62,11 +81,12 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer }) => {
         imageLoadingText: {
           color: theme.colors.textMuted,
           fontSize: theme.fontSizes.s,
+          fontFamily: theme.fontFamilies.regular,
         },
         imageError: {
           width: "100%",
           padding: theme.spacing.l,
-          borderRadius: 8,
+          borderRadius: theme.borderRadius.m,
           backgroundColor: theme.colors.surface,
           alignItems: "center",
           marginVertical: theme.spacing.m,
@@ -74,6 +94,7 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer }) => {
         imageErrorText: {
           color: theme.colors.textMuted,
           fontSize: theme.fontSizes.s,
+          fontFamily: theme.fontFamilies.regular,
         },
         imageCaption: {
           color: theme.colors.textMuted,
@@ -81,11 +102,34 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer }) => {
           marginTop: theme.spacing.s,
           fontStyle: "italic",
           textAlign: "center",
+          fontFamily: theme.fontFamilies.regular,
         },
       }),
-    [theme]
+    [theme, aspectRatio],
   );
 
+  useLayoutEffect(() => {
+    // Fast path for consistent aspect ratios if checking picsum
+    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);
+      }
+    }
+
+    RNImage.getSize(
+      url,
+      (width, height) => {
+        if (width > 0 && height > 0) {
+          setAspectRatio(width / height);
+        }
+      },
+      () => {},
+    );
+  }, [url]);
+
   const altContent = useMemo(() => {
     if (!alt || !Renderer) return null;
     if (
@@ -117,7 +161,7 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer }) => {
 
   if (error) {
     return (
-      <View style={styles.imageError}>
+      <View style={[styles.imageError, style]}>
         <View
           style={{
             flexDirection: "row",
@@ -138,15 +182,15 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer }) => {
   }
 
   return (
-    <View style={styles.imageContainer}>
-      {loading && (
+    <View style={[styles.imageContainer, style]}>
+      {loading && !aspectRatio && (
         <View style={styles.imageLoading}>
           <Text style={styles.imageLoadingText}>Loading image...</Text>
         </View>
       )}
       <RNImage
         source={{ uri: url }}
-        style={[styles.image, loading && styles.imageHidden]}
+        style={[styles.image, loading && !aspectRatio && styles.imageHidden]}
         resizeMode="contain"
         onLoad={() => setLoading(false)}
         onError={() => {

package/src/renderers/link.tsx

@@ -22,11 +22,7 @@ export const Link: FC<LinkProps> = ({ href, children, style }) => {
   );
 
   const handlePress = () => {
-    if (href) {
-      Linking.openURL(href).catch((err) =>
-        console.error("Failed to open URL:", err)
-      );
-    }
+    if (href) Linking.openURL(href);
   };
 
   return (
@@ -35,4 +31,3 @@ export const Link: FC<LinkProps> = ({ href, children, style }) => {
     </Text>
   );
 };
-

package/src/renderers/list.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useMemo, type FC } from "react";
-import { View, Text, StyleSheet } from "react-native";
+import { View, Text, StyleSheet, type ViewStyle } from "react-native";
 import { useMarkdownContext } from "../MarkdownContext";
 
 interface ListProps {
@@ -7,14 +7,10 @@ interface ListProps {
   start?: number;
   depth: number;
   children: ReactNode;
+  style?: ViewStyle;
 }
 
-export const List: FC<ListProps> = ({
-  ordered,
-  start = 1,
-  depth,
-  children,
-}) => {
+export const List: FC<ListProps> = ({ depth, children, style }) => {
   const { theme } = useMarkdownContext();
   const styles = useMemo(
     () =>
@@ -23,14 +19,14 @@ export const List: FC<ListProps> = ({
           marginBottom: theme.spacing.m,
         },
         listNested: {
-          marginLeft: theme.spacing.l,
+          marginLeft: theme.spacing.s,
           marginBottom: 0,
         },
       }),
-    [theme]
+    [theme],
   );
   return (
-    <View style={[styles.list, depth > 0 && styles.listNested]}>
+    <View style={[styles.list, depth > 0 && styles.listNested, style]}>
       {children}
     </View>
   );
@@ -41,6 +37,7 @@ interface ListItemProps {
   index: number;
   ordered: boolean;
   start: number;
+  style?: ViewStyle;
 }
 
 export const ListItem: FC<ListItemProps> = ({
@@ -48,6 +45,7 @@ export const ListItem: FC<ListItemProps> = ({
   index,
   ordered,
   start,
+  style,
 }) => {
   const { theme } = useMarkdownContext();
   const styles = useMemo(
@@ -65,6 +63,7 @@ export const ListItem: FC<ListItemProps> = ({
           marginRight: theme.spacing.s,
           minWidth: 20,
           textAlign: "center",
+          fontFamily: theme.fontFamilies.regular,
         },
         listItemContent: {
           flex: 1,
@@ -72,11 +71,11 @@ export const ListItem: FC<ListItemProps> = ({
           minWidth: 0,
         },
       }),
-    [theme]
+    [theme],
   );
   const bullet = ordered ? `${start + index}.` : "•";
   return (
-    <View style={styles.listItem}>
+    <View style={[styles.listItem, style]}>
       <Text style={styles.listBullet}>{bullet}</Text>
       <View style={styles.listItemContent}>{children}</View>
     </View>
@@ -86,11 +85,13 @@ export const ListItem: FC<ListItemProps> = ({
 interface TaskListItemProps {
   children: ReactNode;
   checked: boolean;
+  style?: ViewStyle;
 }
 
 export const TaskListItem: FC<TaskListItemProps> = ({
   children,
   checked,
+  style,
 }) => {
   const { theme } = useMarkdownContext();
   const styles = useMemo(
@@ -113,13 +114,12 @@ export const TaskListItem: FC<TaskListItemProps> = ({
           minWidth: 0,
         },
       }),
-    [theme]
+    [theme],
   );
   return (
-    <View style={styles.taskListItem}>
+    <View style={[styles.taskListItem, style]}>
       <Text style={styles.taskCheckbox}>{checked ? "☑" : "☐"}</Text>
       <View style={styles.taskContent}>{children}</View>
     </View>
   );
 };
-

package/src/renderers/math.tsx

@@ -3,6 +3,7 @@ import {
   View,
   Text,
   StyleSheet,
+  Platform,
   type StyleProp,
   type ViewStyle,
 } from "react-native";
@@ -27,41 +28,27 @@ try {
 
 interface MathInlineProps {
   content?: string;
+  style?: ViewStyle;
 }
 
-/**
- * Inline math renderer.
- * Uses react-native-mathjax-svg if installed, otherwise shows raw LaTeX.
- * Note: Renders as a View since SVG can't be nested in Text.
- */
-
 const createMathStyles = (theme: MarkdownTheme) =>
   StyleSheet.create({
     mathInlineContainer: {
-      flexDirection: "row",
-      alignItems: "baseline",
-      alignSelf: "baseline",
-      justifyContent: "flex-start",
-      flexShrink: 1,
       marginHorizontal: 2,
-      top: -theme.fontSizes.m,
-      marginBottom: 0,
-      paddingVertical: 0,
-    },
-    mathJaxInline: {
-      marginTop: 0,
-      marginBottom: 0,
+      // Ensure the inline view has layout alignment
+      justifyContent: "center",
     },
     mathInlineFallbackContainer: {
       backgroundColor: theme.colors.codeBackground,
-      paddingHorizontal: 4,
+      paddingHorizontal: theme.spacing.xs,
       paddingVertical: 2,
-      borderRadius: 4,
-      alignSelf: "baseline",
+      borderRadius: theme.borderRadius.s,
       marginHorizontal: 2,
     },
     mathInlineFallback: {
-      fontFamily: "monospace",
+      fontFamily:
+        theme.fontFamilies.mono ??
+        Platform.select({ ios: "Courier", android: "monospace" }),
       fontSize: theme.fontSizes.s,
       color: theme.colors.code,
     },
@@ -70,49 +57,48 @@ const createMathStyles = (theme: MarkdownTheme) =>
       paddingVertical: theme.spacing.l,
       paddingHorizontal: theme.spacing.l,
       backgroundColor: theme.colors.surface,
-      borderRadius: 12,
+      borderRadius: theme.borderRadius.l,
       alignItems: "center",
       borderWidth: 1,
       borderColor: theme.colors.border,
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 1 },
-      shadowOpacity: 0.05,
-      shadowRadius: 2,
-      elevation: 1,
+      // Ensure we don't collapse if MathJax fails to report size immediately
+      minHeight: 48,
     },
     mathBlockFallbackContainer: {
       marginVertical: theme.spacing.m,
       paddingVertical: theme.spacing.m,
       paddingHorizontal: theme.spacing.l,
       backgroundColor: theme.colors.codeBackground,
-      borderRadius: 8,
+      borderRadius: theme.borderRadius.m,
       alignItems: "center",
       borderWidth: 1,
       borderColor: theme.colors.border,
     },
     mathBlockFallback: {
-      fontFamily: "monospace",
+      fontFamily:
+        theme.fontFamilies.mono ??
+        Platform.select({ ios: "Courier", android: "monospace" }),
       fontSize: theme.fontSizes.m,
       color: theme.colors.code,
       textAlign: "center",
     },
   });
 
-export const MathInline: FC<MathInlineProps> = ({ content }) => {
+export const MathInline: FC<MathInlineProps> = ({ content, style }) => {
   const { theme } = useMarkdownContext();
   const styles = useMemo(() => createMathStyles(theme), [theme]);
 
   if (!content) return null;
 
   if (MathJaxComponent) {
-    const fontSize = theme.fontSizes.m;
+    const fontSize = theme.fontSizes.s;
     return (
-      <View style={styles.mathInlineContainer}>
+      <View style={[styles.mathInlineContainer, style]}>
         <MathJaxComponent
           fontSize={fontSize}
           color={theme.colors.text}
-          fontCache={true}
-          style={styles.mathJaxInline}
+          fontCache={false}
+          style={{ backgroundColor: "transparent" }}
         >
           {content}
         </MathJaxComponent>
@@ -121,7 +107,7 @@ export const MathInline: FC<MathInlineProps> = ({ content }) => {
   }
 
   return (
-    <View style={styles.mathInlineFallbackContainer}>
+    <View style={[styles.mathInlineFallbackContainer, style]}>
       <Text style={styles.mathInlineFallback}>{content}</Text>
     </View>
   );
@@ -129,13 +115,10 @@ export const MathInline: FC<MathInlineProps> = ({ content }) => {
 
 interface MathBlockProps {
   content?: string;
+  style?: ViewStyle;
 }
 
-/**
- * Block math renderer.
- * Uses react-native-mathjax-svg if installed, otherwise shows raw LaTeX.
- */
-export const MathBlock: FC<MathBlockProps> = ({ content }) => {
+export const MathBlock: FC<MathBlockProps> = ({ content, style }) => {
   const { theme } = useMarkdownContext();
   const styles = useMemo(() => createMathStyles(theme), [theme]);
 
@@ -143,11 +126,12 @@ export const MathBlock: FC<MathBlockProps> = ({ content }) => {
 
   if (MathJaxComponent) {
     return (
-      <View style={styles.mathBlockContainer}>
+      <View style={[styles.mathBlockContainer, style]}>
         <MathJaxComponent
           fontSize={theme.fontSizes.l}
           color={theme.colors.text}
-          fontCache={true}
+          fontCache={false}
+          style={{ backgroundColor: "transparent" }}
         >
           {`\\displaystyle ${content}`}
         </MathJaxComponent>
@@ -156,9 +140,8 @@ export const MathBlock: FC<MathBlockProps> = ({ content }) => {
   }
 
   return (
-    <View style={styles.mathBlockFallbackContainer}>
+    <View style={[styles.mathBlockFallbackContainer, style]}>
       <Text style={styles.mathBlockFallback}>{content}</Text>
     </View>
   );
 };
-

package/src/renderers/paragraph.tsx

@@ -8,11 +8,6 @@ interface ParagraphProps {
   style?: StyleProp<ViewStyle>;
 }
 
-/**
- * Paragraph component that supports mixed content (Text and View elements).
- * Uses View with flexDirection: 'row' and flexWrap: 'wrap' to allow inline flow
- * of both text and non-text elements (like inline math).
- */
 export const Paragraph: FC<ParagraphProps> = ({
   children,
   inListItem,
@@ -25,7 +20,6 @@ export const Paragraph: FC<ParagraphProps> = ({
         paragraph: {
           flexDirection: "row",
           flexWrap: "wrap",
-          alignItems: "baseline",
           marginBottom: theme.spacing.l,
           gap: 0,
         },
@@ -35,7 +29,7 @@ export const Paragraph: FC<ParagraphProps> = ({
           flexShrink: 1,
         },
       }),
-    [theme]
+    [theme],
   );
 
   return (
@@ -50,4 +44,3 @@ export const Paragraph: FC<ParagraphProps> = ({
     </View>
   );
 };
-