react-native-nitro-markdown 0.1.1 → 0.2.1

package/src/renderers/image.tsx

@@ -0,0 +1,160 @@
+import { useState, useMemo, type ReactNode, type FC, type ComponentType } from "react";
+import { View, Text, Image as RNImage, StyleSheet } 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>;
+}
+
+export const Image: FC<ImageProps> = ({ url, title, alt, Renderer }) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const { theme } = useMarkdownContext();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        imageContainer: {
+          marginVertical: theme.spacing.m,
+          alignItems: "center",
+        },
+        image: {
+          width: "100%",
+          height: 200,
+          borderRadius: 8,
+          backgroundColor: theme.colors.surface,
+        },
+        imageHidden: {
+          opacity: 0,
+          position: "absolute",
+        },
+        imageLoading: {
+          width: "100%",
+          height: 200,
+          borderRadius: 8,
+          backgroundColor: theme.colors.surface,
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        imageLoadingText: {
+          color: theme.colors.textMuted,
+          fontSize: theme.fontSizes.s,
+        },
+        imageError: {
+          width: "100%",
+          padding: theme.spacing.l,
+          borderRadius: 8,
+          backgroundColor: theme.colors.surface,
+          alignItems: "center",
+          marginVertical: theme.spacing.m,
+        },
+        imageErrorText: {
+          color: theme.colors.textMuted,
+          fontSize: theme.fontSizes.s,
+        },
+        imageCaption: {
+          color: theme.colors.textMuted,
+          fontSize: theme.fontSizes.xs,
+          marginTop: theme.spacing.s,
+          fontStyle: "italic",
+          textAlign: "center",
+        },
+      }),
+    [theme]
+  );
+
+  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}>
+        <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}>
+      {loading && (
+        <View style={styles.imageLoading}>
+          <Text style={styles.imageLoadingText}>Loading image...</Text>
+        </View>
+      )}
+      <RNImage
+        source={{ uri: url }}
+        style={[styles.image, loading && 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,38 @@
+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).catch((err) =>
+        console.error("Failed to open URL:", err)
+      );
+    }
+  };
+
+  return (
+    <Text style={[styles.link, style]} onPress={handlePress}>
+      {children}
+    </Text>
+  );
+};
+

package/src/renderers/list.tsx

@@ -0,0 +1,125 @@
+import { ReactNode, useMemo, type FC } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useMarkdownContext } from "../MarkdownContext";
+
+interface ListProps {
+  ordered: boolean;
+  start?: number;
+  depth: number;
+  children: ReactNode;
+}
+
+export const List: FC<ListProps> = ({
+  ordered,
+  start = 1,
+  depth,
+  children,
+}) => {
+  const { theme } = useMarkdownContext();
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        list: {
+          marginBottom: theme.spacing.m,
+        },
+        listNested: {
+          marginLeft: theme.spacing.l,
+          marginBottom: 0,
+        },
+      }),
+    [theme]
+  );
+  return (
+    <View style={[styles.list, depth > 0 && styles.listNested]}>
+      {children}
+    </View>
+  );
+};
+
+interface ListItemProps {
+  children: ReactNode;
+  index: number;
+  ordered: boolean;
+  start: number;
+}
+
+export const ListItem: FC<ListItemProps> = ({
+  children,
+  index,
+  ordered,
+  start,
+}) => {
+  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",
+        },
+        listItemContent: {
+          flex: 1,
+          flexShrink: 1,
+          minWidth: 0,
+        },
+      }),
+    [theme]
+  );
+  const bullet = ordered ? `${start + index}.` : "•";
+  return (
+    <View style={styles.listItem}>
+      <Text style={styles.listBullet}>{bullet}</Text>
+      <View style={styles.listItemContent}>{children}</View>
+    </View>
+  );
+};
+
+interface TaskListItemProps {
+  children: ReactNode;
+  checked: boolean;
+}
+
+export const TaskListItem: FC<TaskListItemProps> = ({
+  children,
+  checked,
+}) => {
+  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,
+          flexShrink: 1,
+          minWidth: 0,
+        },
+      }),
+    [theme]
+  );
+  return (
+    <View style={styles.taskListItem}>
+      <Text style={styles.taskCheckbox}>{checked ? "☑" : "☐"}</Text>
+      <View style={styles.taskContent}>{children}</View>
+    </View>
+  );
+};
+

package/src/renderers/math.tsx

@@ -0,0 +1,164 @@
+import { useMemo, type FC, type ComponentType } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  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;
+}
+
+/**
+ * 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,
+    },
+    mathInlineFallbackContainer: {
+      backgroundColor: theme.colors.codeBackground,
+      paddingHorizontal: 4,
+      paddingVertical: 2,
+      borderRadius: 4,
+      alignSelf: "baseline",
+      marginHorizontal: 2,
+    },
+    mathInlineFallback: {
+      fontFamily: "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: 12,
+      alignItems: "center",
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 2,
+      elevation: 1,
+    },
+    mathBlockFallbackContainer: {
+      marginVertical: theme.spacing.m,
+      paddingVertical: theme.spacing.m,
+      paddingHorizontal: theme.spacing.l,
+      backgroundColor: theme.colors.codeBackground,
+      borderRadius: 8,
+      alignItems: "center",
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+    },
+    mathBlockFallback: {
+      fontFamily: "monospace",
+      fontSize: theme.fontSizes.m,
+      color: theme.colors.code,
+      textAlign: "center",
+    },
+  });
+
+export const MathInline: FC<MathInlineProps> = ({ content }) => {
+  const { theme } = useMarkdownContext();
+  const styles = useMemo(() => createMathStyles(theme), [theme]);
+
+  if (!content) return null;
+
+  if (MathJaxComponent) {
+    const fontSize = theme.fontSizes.m;
+    return (
+      <View style={styles.mathInlineContainer}>
+        <MathJaxComponent
+          fontSize={fontSize}
+          color={theme.colors.text}
+          fontCache={true}
+          style={styles.mathJaxInline}
+        >
+          {content}
+        </MathJaxComponent>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.mathInlineFallbackContainer}>
+      <Text style={styles.mathInlineFallback}>{content}</Text>
+    </View>
+  );
+};
+
+interface MathBlockProps {
+  content?: string;
+}
+
+/**
+ * Block math renderer.
+ * Uses react-native-mathjax-svg if installed, otherwise shows raw LaTeX.
+ */
+export const MathBlock: FC<MathBlockProps> = ({ content }) => {
+  const { theme } = useMarkdownContext();
+  const styles = useMemo(() => createMathStyles(theme), [theme]);
+
+  if (!content) return null;
+
+  if (MathJaxComponent) {
+    return (
+      <View style={styles.mathBlockContainer}>
+        <MathJaxComponent
+          fontSize={theme.fontSizes.l}
+          color={theme.colors.text}
+          fontCache={true}
+        >
+          {`\\displaystyle ${content}`}
+        </MathJaxComponent>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.mathBlockFallbackContainer}>
+      <Text style={styles.mathBlockFallback}>{content}</Text>
+    </View>
+  );
+};
+

package/src/renderers/paragraph.tsx

@@ -0,0 +1,53 @@
+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>;
+}
+
+/**
+ * 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,
+  style,
+}) => {
+  const { theme } = useMarkdownContext();
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        paragraph: {
+          flexDirection: "row",
+          flexWrap: "wrap",
+          alignItems: "baseline",
+          marginBottom: theme.spacing.l,
+          gap: 0,
+        },
+        paragraphInListItem: {
+          marginBottom: 0,
+          marginTop: 0,
+          flexShrink: 1,
+        },
+      }),
+    [theme]
+  );
+
+  return (
+    <View
+      style={[
+        styles.paragraph,
+        inListItem && styles.paragraphInListItem,
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+