react-native-nitro-markdown 0.2.1 → 0.3.0

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,6 +7,7 @@ interface ListProps {
   start?: number;
   depth: number;
   children: ReactNode;
+  style?: ViewStyle;
 }
 
 export const List: FC<ListProps> = ({
@@ -14,6 +15,7 @@ export const List: FC<ListProps> = ({
   start = 1,
   depth,
   children,
+  style,
 }) => {
   const { theme } = useMarkdownContext();
   const styles = useMemo(
@@ -30,7 +32,7 @@ export const List: FC<ListProps> = ({
     [theme]
   );
   return (
-    <View style={[styles.list, depth > 0 && styles.listNested]}>
+    <View style={[styles.list, depth > 0 && styles.listNested, style]}>
       {children}
     </View>
   );
@@ -41,6 +43,7 @@ interface ListItemProps {
   index: number;
   ordered: boolean;
   start: number;
+  style?: ViewStyle;
 }
 
 export const ListItem: FC<ListItemProps> = ({
@@ -48,6 +51,7 @@ export const ListItem: FC<ListItemProps> = ({
   index,
   ordered,
   start,
+  style,
 }) => {
   const { theme } = useMarkdownContext();
   const styles = useMemo(
@@ -65,6 +69,7 @@ export const ListItem: FC<ListItemProps> = ({
           marginRight: theme.spacing.s,
           minWidth: 20,
           textAlign: "center",
+          fontFamily: theme.fontFamilies.regular,
         },
         listItemContent: {
           flex: 1,
@@ -76,7 +81,7 @@ export const ListItem: FC<ListItemProps> = ({
   );
   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 +91,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(
@@ -116,10 +123,9 @@ export const TaskListItem: FC<TaskListItemProps> = ({
     [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,25 @@ 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,
     },
     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 +55,45 @@ 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,
     },
     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}
         >
           {content}
         </MathJaxComponent>
@@ -121,7 +102,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 +110,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,7 +121,7 @@ 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}
@@ -156,9 +134,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,
@@ -50,4 +45,3 @@ export const Paragraph: FC<ParagraphProps> = ({
     </View>
   );
 };
-