@saiansh2525/react-native-nitro-markdown 0.3.2

package/src/renderers/heading.tsx

@@ -0,0 +1,66 @@
+import { ReactNode, useMemo, type FC } from "react";
+import { Text, StyleSheet, type TextStyle } from "react-native";
+import { useMarkdownContext } from "../MarkdownContext";
+
+interface HeadingProps {
+  level: number;
+  children: ReactNode;
+  style?: TextStyle;
+}
+
+export const Heading: FC<HeadingProps> = ({ level, children, style }) => {
+  const { theme } = useMarkdownContext();
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        heading: {
+          color: theme.colors.heading,
+          fontWeight: "700",
+          marginTop: theme.spacing.xl,
+          marginBottom: theme.spacing.m,
+          fontFamily: theme.fontFamilies.heading,
+        },
+        h1: {
+          fontSize: theme.fontSizes.h1,
+          lineHeight: theme.fontSizes.h1 * 1.3,
+          borderBottomWidth: 1,
+          borderBottomColor: theme.colors.border,
+          paddingBottom: theme.spacing.s,
+        },
+        h2: {
+          fontSize: theme.fontSizes.h2,
+          lineHeight: theme.fontSizes.h2 * 1.3,
+        },
+        h3: {
+          fontSize: theme.fontSizes.h3,
+          lineHeight: theme.fontSizes.h3 * 1.3,
+        },
+        h4: {
+          fontSize: theme.fontSizes.h4,
+          lineHeight: theme.fontSizes.h4 * 1.3,
+        },
+        h5: {
+          fontSize: theme.fontSizes.h5,
+          lineHeight: theme.fontSizes.h5 * 1.3,
+        },
+        h6: {
+          fontSize: theme.fontSizes.h6,
+          lineHeight: theme.fontSizes.h6 * 1.3,
+          color: theme.colors.textMuted,
+        },
+      }),
+    [theme]
+  );
+
+  const headingStyles = [
+    styles.heading,
+    level === 1 && styles.h1,
+    level === 2 && styles.h2,
+    level === 3 && styles.h3,
+    level === 4 && styles.h4,
+    level === 5 && styles.h5,
+    level === 6 && styles.h6,
+  ];
+
+  return <Text style={[...headingStyles, style]}>{children}</Text>;
+};

package/src/renderers/horizontal-rule.tsx

@@ -0,0 +1,23 @@
+import { useMemo, type FC } from "react";
+import { View, StyleSheet, type ViewStyle } from "react-native";
+import { useMarkdownContext } from "../MarkdownContext";
+
+interface HorizontalRuleProps {
+  style?: ViewStyle;
+}
+
+export const HorizontalRule: FC<HorizontalRuleProps> = ({ style }) => {
+  const { theme } = useMarkdownContext();
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        horizontalRule: {
+          height: 1,
+          backgroundColor: theme.colors.border,
+          marginVertical: theme.spacing.xl,
+        },
+      }),
+    [theme]
+  );
+  return <View style={[styles.horizontalRule, style]} />;
+};

package/src/renderers/image.tsx

@@ -0,0 +1,204 @@
+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";
+import { useMarkdownContext } from "../MarkdownContext";
+
+const renderInlineContent = (
+  node: MarkdownNode,
+  Renderer: ComponentType<NodeRendererProps>,
+): ReactNode => {
+  if (node.type === "paragraph" && node.children) {
+    return (
+      <>
+        {node.children.map((child, idx) => (
+          <Renderer key={idx} node={child} depth={0} inListItem={false} />
+        ))}
+      </>
+    );
+  }
+  return null;
+};
+
+interface ImageProps {
+  url: string;
+  title?: string;
+  alt?: string;
+  Renderer?: ComponentType<NodeRendererProps>;
+  style?: ViewStyle;
+}
+
+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(
+    () =>
+      StyleSheet.create({
+        imageContainer: {
+          marginVertical: theme.spacing.m,
+          alignItems: "center",
+        },
+        image: {
+          width: "100%",
+          // 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: {
+          opacity: 0,
+          position: "absolute",
+        },
+        imageLoading: {
+          width: "100%",
+          // Match the image size if possible
+          aspectRatio: aspectRatio,
+          height: aspectRatio ? undefined : 200,
+          borderRadius: theme.borderRadius.m,
+          backgroundColor: theme.colors.surface,
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        imageLoadingText: {
+          color: theme.colors.textMuted,
+          fontSize: theme.fontSizes.s,
+          fontFamily: theme.fontFamilies.regular,
+        },
+        imageError: {
+          width: "100%",
+          padding: theme.spacing.l,
+          borderRadius: theme.borderRadius.m,
+          backgroundColor: theme.colors.surface,
+          alignItems: "center",
+          marginVertical: theme.spacing.m,
+        },
+        imageErrorText: {
+          color: theme.colors.textMuted,
+          fontSize: theme.fontSizes.s,
+          fontFamily: theme.fontFamilies.regular,
+        },
+        imageCaption: {
+          color: theme.colors.textMuted,
+          fontSize: theme.fontSizes.xs,
+          marginTop: theme.spacing.s,
+          fontStyle: "italic",
+          textAlign: "center",
+          fontFamily: theme.fontFamilies.regular,
+        },
+      }),
+    [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 (
+      alt.includes("$") ||
+      alt.includes("*") ||
+      alt.includes("_") ||
+      alt.includes("`") ||
+      alt.includes("[")
+    ) {
+      try {
+        const ast = parseMarkdownWithOptions(alt, { math: true, gfm: true });
+        if (
+          ast?.type === "document" &&
+          ast.children?.[0]?.type === "paragraph"
+        ) {
+          const paragraph = ast.children[0];
+          const inlineContent = renderInlineContent(paragraph, Renderer);
+          if (inlineContent) {
+            return inlineContent;
+          }
+        }
+        return <Text style={styles.imageErrorText}>{alt}</Text>;
+      } catch {
+        return <Text style={styles.imageErrorText}>{alt}</Text>;
+      }
+    }
+    return <Text style={styles.imageErrorText}>{alt}</Text>;
+  }, [alt, Renderer, styles.imageErrorText]);
+
+  if (error) {
+    return (
+      <View style={[styles.imageError, style]}>
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "baseline",
+            flexWrap: "wrap",
+            justifyContent: "center",
+          }}
+        >
+          <Text style={styles.imageErrorText}>🖼️ </Text>
+          {altContent || (
+            <Text style={styles.imageErrorText}>
+              {title || "Image failed to load"}
+            </Text>
+          )}
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <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 && !aspectRatio && styles.imageHidden]}
+        resizeMode="contain"
+        onLoad={() => setLoading(false)}
+        onError={() => {
+          setLoading(false);
+          setError(true);
+        }}
+      />
+      {title && !loading && <Text style={styles.imageCaption}>{title}</Text>}
+    </View>
+  );
+};

package/src/renderers/link.tsx

@@ -0,0 +1,33 @@
+import { ReactNode, useMemo, type FC } from "react";
+import { Text, StyleSheet, Linking, type TextStyle } from "react-native";
+import { useMarkdownContext } from "../MarkdownContext";
+
+interface LinkProps {
+  href: string;
+  children: ReactNode;
+  style?: TextStyle;
+}
+
+export const Link: FC<LinkProps> = ({ href, children, style }) => {
+  const { theme } = useMarkdownContext();
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        link: {
+          color: theme.colors.link,
+          textDecorationLine: "underline",
+        },
+      }),
+    [theme]
+  );
+
+  const handlePress = () => {
+    if (href) Linking.openURL(href);
+  };
+
+  return (
+    <Text style={[styles.link, style]} onPress={handlePress}>
+      {children}
+    </Text>
+  );
+};

package/src/renderers/list.tsx

@@ -0,0 +1,123 @@
+import { ReactNode, useMemo, type FC } from "react";
+import { View, Text, StyleSheet, type ViewStyle } from "react-native";
+import { useMarkdownContext } from "../MarkdownContext";
+
+interface ListProps {
+  ordered: boolean;
+  start?: number;
+  depth: number;
+  children: ReactNode;
+  style?: ViewStyle;
+}
+
+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],
+  );
+  return (
+    <View style={[styles.list, depth > 0 && styles.listNested, style]}>
+      {children}
+    </View>
+  );
+};
+
+interface ListItemProps {
+  children: ReactNode;
+  index: number;
+  ordered: boolean;
+  start: number;
+  style?: ViewStyle;
+}
+
+export const ListItem: FC<ListItemProps> = ({
+  children,
+  index,
+  ordered,
+  start,
+  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: 20,
+          textAlign: "center",
+          fontFamily: theme.fontFamilies.regular,
+        },
+        listItemContent: {
+          flex: 1,
+          minWidth: 0,
+        },
+      }),
+    [theme],
+  );
+  const bullet = ordered ? `${start + index}.` : "•";
+  return (
+    <View style={[styles.listItem, style]}>
+      <Text style={styles.listBullet}>{bullet}</Text>
+      <View style={styles.listItemContent}>{children}</View>
+    </View>
+  );
+};
+
+interface TaskListItemProps {
+  children: ReactNode;
+  checked: boolean;
+  style?: ViewStyle;
+}
+
+export const TaskListItem: FC<TaskListItemProps> = ({
+  children,
+  checked,
+  style,
+}) => {
+  const { theme } = useMarkdownContext();
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        taskListItem: {
+          flexDirection: "row",
+          alignItems: "flex-start",
+          marginBottom: theme.spacing.s,
+        },
+        taskCheckbox: {
+          fontSize: theme.fontSizes.l,
+          lineHeight: theme.fontSizes.m * 1.6,
+          marginRight: theme.spacing.s,
+          color: theme.colors.accent,
+        },
+        taskContent: {
+          flex: 1,
+          minWidth: 0,
+        },
+      }),
+    [theme],
+  );
+  return (
+    <View style={[styles.taskListItem, style]}>
+      <Text style={styles.taskCheckbox}>{checked ? "☑" : "☐"}</Text>
+      <View style={styles.taskContent}>{children}</View>
+    </View>
+  );
+};

package/src/renderers/math.tsx

@@ -0,0 +1,147 @@
+import { useMemo, type FC, type ComponentType } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Platform,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { useMarkdownContext } from "../MarkdownContext";
+import type { MarkdownTheme } from "../theme";
+
+let MathJaxComponent: ComponentType<{
+  fontSize?: number;
+  color?: string;
+  fontCache?: boolean;
+  style?: StyleProp<ViewStyle>;
+  children?: string;
+}> | null = null;
+
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const mathJaxModule = require("react-native-mathjax-svg");
+  MathJaxComponent = mathJaxModule.default || mathJaxModule;
+} catch {
+  // ignored
+}
+
+interface MathInlineProps {
+  content?: string;
+  style?: ViewStyle;
+}
+
+const createMathStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    mathInlineContainer: {
+      marginHorizontal: 2,
+      // Ensure the inline view has layout alignment
+      justifyContent: "center",
+    },
+    mathInlineFallbackContainer: {
+      backgroundColor: theme.colors.codeBackground,
+      paddingHorizontal: theme.spacing.xs,
+      paddingVertical: 2,
+      borderRadius: theme.borderRadius.s,
+      marginHorizontal: 2,
+    },
+    mathInlineFallback: {
+      fontFamily:
+        theme.fontFamilies.mono ??
+        Platform.select({ ios: "Courier", android: "monospace" }),
+      fontSize: theme.fontSizes.s,
+      color: theme.colors.code,
+    },
+    mathBlockContainer: {
+      marginVertical: theme.spacing.m,
+      paddingVertical: theme.spacing.l,
+      paddingHorizontal: theme.spacing.l,
+      backgroundColor: theme.colors.surface,
+      borderRadius: theme.borderRadius.l,
+      alignItems: "center",
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      // 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: theme.borderRadius.m,
+      alignItems: "center",
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+    },
+    mathBlockFallback: {
+      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, style }) => {
+  const { theme } = useMarkdownContext();
+  const styles = useMemo(() => createMathStyles(theme), [theme]);
+
+  if (!content) return null;
+
+  if (MathJaxComponent) {
+    const fontSize = theme.fontSizes.s;
+    return (
+      <View style={[styles.mathInlineContainer, style]}>
+        <MathJaxComponent
+          fontSize={fontSize}
+          color={theme.colors.text}
+          fontCache={false}
+          style={{ backgroundColor: "transparent" }}
+        >
+          {content}
+        </MathJaxComponent>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.mathInlineFallbackContainer, style]}>
+      <Text style={styles.mathInlineFallback}>{content}</Text>
+    </View>
+  );
+};
+
+interface MathBlockProps {
+  content?: string;
+  style?: ViewStyle;
+}
+
+export const MathBlock: FC<MathBlockProps> = ({ content, style }) => {
+  const { theme } = useMarkdownContext();
+  const styles = useMemo(() => createMathStyles(theme), [theme]);
+
+  if (!content) return null;
+
+  if (MathJaxComponent) {
+    return (
+      <View style={[styles.mathBlockContainer, style]}>
+        <MathJaxComponent
+          fontSize={theme.fontSizes.l}
+          color={theme.colors.text}
+          fontCache={false}
+          style={{ backgroundColor: "transparent" }}
+        >
+          {`\\displaystyle ${content}`}
+        </MathJaxComponent>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.mathBlockFallbackContainer, style]}>
+      <Text style={styles.mathBlockFallback}>{content}</Text>
+    </View>
+  );
+};

package/src/renderers/paragraph.tsx

@@ -0,0 +1,45 @@
+import { ReactNode, useMemo, type FC } from "react";
+import { View, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
+import { useMarkdownContext } from "../MarkdownContext";
+
+interface ParagraphProps {
+  children: ReactNode;
+  inListItem?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const Paragraph: FC<ParagraphProps> = ({
+  children,
+  inListItem,
+  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],
+  );
+
+  return (
+    <View
+      style={[
+        styles.paragraph,
+        inListItem && styles.paragraphInListItem,
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};