react-native-nitro-markdown 0.2.1 → 0.3.0

package/src/markdown.tsx

@@ -1,4 +1,12 @@
-import { defaultMarkdownTheme, type MarkdownTheme } from "./theme";
+import {
+  defaultMarkdownTheme,
+  minimalMarkdownTheme,
+  mergeThemes,
+  type MarkdownTheme,
+  type PartialMarkdownTheme,
+  type NodeStyleOverrides,
+  type StylingStrategy,
+} from "./theme";
 import { useMemo, type ReactNode, type FC, Fragment } from "react";
 import {
   StyleSheet,
@@ -10,6 +18,7 @@ import {
 import {
   parseMarkdown,
   parseMarkdownWithOptions,
+  getTextContent,
   type MarkdownNode,
 } from "./headless";
 import type { ParserOptions } from "./Markdown.nitro";
@@ -42,12 +51,30 @@ export interface MarkdownProps {
   options?: ParserOptions;
   /**
    * Custom renderers for specific markdown node types.
+   * Each renderer receives { node, children, Renderer } plus type-specific props.
    */
   renderers?: CustomRenderers;
   /**
    * Custom theme to override default styles.
    */
-  theme?: Partial<MarkdownTheme>;
+  theme?: PartialMarkdownTheme;
+  /**
+   * Style overrides for specific node types.
+   * Applied after internal styles, allowing fine-grained customization.
+   * @example
+   * ```tsx
+   * <Markdown styles={{ heading: { color: 'red' }, code_block: { borderRadius: 0 } }}>
+   *   {content}
+   * </Markdown>
+   * ```
+   */
+  styles?: NodeStyleOverrides;
+  /**
+   * Styling strategy for the component.
+   * - "opinionated": Full styling with colors, spacing, and visual effects (default)
+   * - "minimal": Bare minimum styling for a clean slate
+   */
+  stylingStrategy?: StylingStrategy;
   /**
    * Optional style for the container view.
    */
@@ -59,6 +86,8 @@ export const Markdown: FC<MarkdownProps> = ({
   options,
   renderers = {},
   theme: userTheme,
+  styles: nodeStyles,
+  stylingStrategy = "opinionated",
   style,
 }) => {
   const ast = useMemo(() => {
@@ -73,10 +102,13 @@ export const Markdown: FC<MarkdownProps> = ({
     }
   }, [children, options]);
 
-  const theme = useMemo(
-    () => ({ ...defaultMarkdownTheme, ...userTheme }),
-    [userTheme]
-  );
+  const theme = useMemo(() => {
+    const base =
+      stylingStrategy === "minimal"
+        ? minimalMarkdownTheme
+        : defaultMarkdownTheme;
+    return mergeThemes(base, userTheme);
+  }, [userTheme, stylingStrategy]);
 
   const baseStyles = useMemo(() => createBaseStyles(theme), [theme]);
 
@@ -89,7 +121,9 @@ export const Markdown: FC<MarkdownProps> = ({
   }
 
   return (
-    <MarkdownContext.Provider value={{ renderers, theme }}>
+    <MarkdownContext.Provider
+      value={{ renderers, theme, styles: nodeStyles, stylingStrategy }}
+    >
       <View style={[baseStyles.container, style]}>
         <NodeRenderer node={ast} depth={0} inListItem={false} />
       </View>
@@ -112,18 +146,13 @@ const isInline = (type: MarkdownNode["type"]): boolean => {
   );
 };
 
-const getTextContent = (node: MarkdownNode): string => {
-  if (node.content) return node.content;
-  return node.children?.map(getTextContent).join("") ?? "";
-};
-
 const NodeRenderer: FC<NodeRendererProps> = ({
   node,
   depth,
   inListItem,
   parentIsText = false,
 }) => {
-  const { renderers, theme } = useMarkdownContext();
+  const { renderers, theme, styles: nodeStyles } = useMarkdownContext();
   const baseStyles = useMemo(() => createBaseStyles(theme), [theme]);
 
   const renderChildren = (
@@ -148,17 +177,15 @@ const NodeRenderer: FC<NodeRendererProps> = ({
               key={`inline-group-${elements.length}`}
               style={{
                 flexDirection: "row",
-                alignItems: "baseline",
+                alignItems: "center",
                 flexWrap: "wrap",
                 flexShrink: 1,
-                marginVertical: 0,
-                paddingVertical: 0,
               }}
             >
-              {currentInlineGroup.map((node, idx) => (
+              {currentInlineGroup.map((n, idx) => (
                 <NodeRenderer
-                  key={`${node.type}-${idx}`}
-                  node={node}
+                  key={`${n.type}-${idx}`}
+                  node={n}
                   depth={depth + 1}
                   inListItem={childInListItem}
                   parentIsText={false}
@@ -174,10 +201,10 @@ const NodeRenderer: FC<NodeRendererProps> = ({
 
           elements.push(
             <Wrapper key={`inline-group-${elements.length}`} {...wrapperProps}>
-              {currentInlineGroup.map((node, idx) => (
+              {currentInlineGroup.map((n, idx) => (
                 <NodeRenderer
-                  key={`${node.type}-${idx}`}
-                  node={node}
+                  key={`${n.type}-${idx}`}
+                  node={n}
                   depth={depth + 1}
                   inListItem={childInListItem}
                   parentIsText={true}
@@ -218,32 +245,67 @@ const NodeRenderer: FC<NodeRendererProps> = ({
       inListItem,
       parentIsText
     );
-    const result = customRenderer({
+
+    const baseProps = {
       node,
       children: childrenRendered,
       Renderer: NodeRenderer,
-    });
+    };
+
+    const enhancedProps = {
+      ...baseProps,
+      // Heading
+      ...(node.type === "heading" && {
+        level: (node.level ?? 1) as 1 | 2 | 3 | 4 | 5 | 6,
+      }),
+      // Link
+      ...(node.type === "link" && { href: node.href ?? "", title: node.title }),
+      // Image
+      ...(node.type === "image" && {
+        url: node.href ?? "",
+        alt: node.alt,
+        title: node.title,
+      }),
+      // Code block
+      ...(node.type === "code_block" && {
+        content: getTextContent(node),
+        language: node.language,
+      }),
+      // Inline code
+      ...(node.type === "code_inline" && { content: node.content ?? "" }),
+      // List
+      ...(node.type === "list" && {
+        ordered: node.ordered ?? false,
+        start: node.start,
+      }),
+      // Task list item
+      ...(node.type === "task_list_item" && { checked: node.checked ?? false }),
+    };
+
+    const result = customRenderer(enhancedProps);
     if (result !== undefined) return <>{result}</>;
   }
 
+  const nodeStyleOverride = nodeStyles?.[node.type];
+
   switch (node.type) {
     case "document":
       return (
-        <View style={baseStyles.document}>
+        <View style={[baseStyles.document, nodeStyleOverride]}>
           {renderChildren(node.children, false, false)}
         </View>
       );
 
     case "heading":
       return (
-        <Heading level={node.level ?? 1}>
+        <Heading level={node.level ?? 1} style={nodeStyleOverride}>
           {renderChildren(node.children, inListItem, true)}
         </Heading>
       );
 
     case "paragraph":
       return (
-        <Paragraph inListItem={inListItem}>
+        <Paragraph inListItem={inListItem} style={nodeStyleOverride}>
           {renderChildren(node.children, inListItem, false)}
         </Paragraph>
       );
@@ -252,32 +314,34 @@ const NodeRenderer: FC<NodeRendererProps> = ({
       if (parentIsText) {
         return <Text>{node.content}</Text>;
       }
-      return <Text style={baseStyles.text}>{node.content}</Text>;
+      return (
+        <Text style={[baseStyles.text, nodeStyleOverride]}>{node.content}</Text>
+      );
 
     case "bold":
       return (
-        <Text style={baseStyles.bold}>
+        <Text style={[baseStyles.bold, nodeStyleOverride]}>
           {renderChildren(node.children, inListItem, true)}
         </Text>
       );
 
     case "italic":
       return (
-        <Text style={baseStyles.italic}>
+        <Text style={[baseStyles.italic, nodeStyleOverride]}>
           {renderChildren(node.children, inListItem, true)}
         </Text>
       );
 
     case "strikethrough":
       return (
-        <Text style={baseStyles.strikethrough}>
+        <Text style={[baseStyles.strikethrough, nodeStyleOverride]}>
           {renderChildren(node.children, inListItem, true)}
         </Text>
       );
 
     case "link":
       return (
-        <Link href={node.href ?? ""}>
+        <Link href={node.href ?? ""} style={nodeStyleOverride}>
           {renderChildren(node.children, inListItem, true)}
         </Link>
       );
@@ -289,26 +353,31 @@ const NodeRenderer: FC<NodeRendererProps> = ({
           title={node.title}
           alt={node.alt}
           Renderer={NodeRenderer}
+          style={nodeStyleOverride}
         />
       );
 
     case "code_inline":
-      return <InlineCode>{node.content}</InlineCode>;
+      return <InlineCode style={nodeStyleOverride}>{node.content}</InlineCode>;
 
     case "code_block":
       return (
-        <CodeBlock language={node.language} content={getTextContent(node)} />
+        <CodeBlock
+          language={node.language}
+          content={getTextContent(node)}
+          style={nodeStyleOverride}
+        />
       );
 
     case "blockquote":
       return (
-        <Blockquote>
+        <Blockquote style={nodeStyleOverride}>
           {renderChildren(node.children, inListItem, false)}
         </Blockquote>
       );
 
     case "horizontal_rule":
-      return <HorizontalRule />;
+      return <HorizontalRule style={nodeStyleOverride} />;
 
     case "line_break":
       return <Text>{"\n"}</Text>;
@@ -320,15 +389,22 @@ const NodeRenderer: FC<NodeRendererProps> = ({
       let mathContent = getTextContent(node);
       if (!mathContent) return null;
       mathContent = mathContent.replace(/^\$+|\$+$/g, "").trim();
-      return <MathInline content={mathContent} />;
+      return <MathInline content={mathContent} style={nodeStyleOverride} />;
     }
 
     case "math_block":
-      return <MathBlock content={getTextContent(node)} />;
+      return (
+        <MathBlock content={getTextContent(node)} style={nodeStyleOverride} />
+      );
 
     case "list":
       return (
-        <List ordered={node.ordered ?? false} start={node.start} depth={depth}>
+        <List
+          ordered={node.ordered ?? false}
+          start={node.start}
+          depth={depth}
+          style={nodeStyleOverride}
+        >
           {node.children?.map((child, index) => {
             if (child.type === "task_list_item") {
               return (
@@ -365,19 +441,24 @@ const NodeRenderer: FC<NodeRendererProps> = ({
 
     case "task_list_item":
       return (
-        <TaskListItem checked={node.checked ?? false}>
+        <TaskListItem checked={node.checked ?? false} style={nodeStyleOverride}>
           {renderChildren(node.children, true, false)}
         </TaskListItem>
       );
 
     case "table":
-      return <TableRenderer node={node} Renderer={NodeRenderer} />;
+      return (
+        <TableRenderer
+          node={node}
+          Renderer={NodeRenderer}
+          style={nodeStyleOverride}
+        />
+      );
 
     case "table_head":
     case "table_body":
     case "table_row":
     case "table_cell":
-      // Handled by TableRenderer
       return null;
 
     default:
@@ -396,12 +477,13 @@ const createBaseStyles = (theme: MarkdownTheme) =>
     errorText: {
       color: "#f87171",
       fontSize: 14,
-      fontFamily: "monospace",
+      fontFamily: theme.fontFamilies.mono ?? "monospace",
     },
     text: {
       color: theme.colors.text,
       fontSize: theme.fontSizes.m,
       lineHeight: theme.fontSizes.m * 1.6,
+      fontFamily: theme.fontFamilies.regular,
     },
     bold: {
       fontWeight: "700",

package/src/renderers/blockquote.tsx

@@ -20,7 +20,7 @@ export const Blockquote: FC<BlockquoteProps> = ({ children, style }) => {
           backgroundColor: theme.colors.surfaceLight,
           paddingVertical: theme.spacing.m,
           paddingRight: theme.spacing.m,
-          borderRadius: 4,
+          borderRadius: theme.borderRadius.s,
         },
       }),
     [theme]
@@ -28,4 +28,3 @@ export const Blockquote: FC<BlockquoteProps> = ({ children, style }) => {
 
   return <View style={[styles.blockquote, style]}>{children}</View>;
 };
-

package/src/renderers/code.tsx

@@ -9,32 +9,39 @@ import {
   type TextStyle,
 } from "react-native";
 import { useMarkdownContext } from "../MarkdownContext";
+import type { MarkdownNode } from "../headless";
+import { getTextContent } from "../headless";
 
 interface CodeBlockProps {
   language?: string;
-  content: string;
+  content?: string;
+  node?: MarkdownNode;
   style?: ViewStyle;
 }
 
 export const CodeBlock: FC<CodeBlockProps> = ({
   language,
   content,
+  node,
   style,
 }) => {
   const { theme } = useMarkdownContext();
+
+  const displayContent = content ?? (node ? getTextContent(node) : "");
+
   const styles = useMemo(
     () =>
       StyleSheet.create({
         codeBlock: {
           backgroundColor: theme.colors.codeBackground,
-          borderRadius: 8,
+          borderRadius: theme.borderRadius.m,
           padding: theme.spacing.l,
           marginVertical: theme.spacing.m,
           borderWidth: 1,
           borderColor: theme.colors.border,
         },
         codeLanguage: {
-          color: theme.colors.accent,
+          color: theme.colors.codeLanguage,
           fontSize: theme.fontSizes.xs,
           fontWeight: "600",
           marginBottom: theme.spacing.s,
@@ -42,7 +49,9 @@ export const CodeBlock: FC<CodeBlockProps> = ({
           letterSpacing: 0.5,
         },
         codeBlockText: {
-          fontFamily: Platform.select({ ios: "Courier", android: "monospace" }),
+          fontFamily:
+            theme.fontFamilies.mono ??
+            Platform.select({ ios: "Courier", android: "monospace" }),
           fontSize: theme.fontSizes.s,
           color: theme.colors.text,
           lineHeight: theme.fontSizes.s * 1.5,
@@ -50,39 +59,54 @@ export const CodeBlock: FC<CodeBlockProps> = ({
       }),
     [theme]
   );
+
+  const showLanguage = theme.showCodeLanguage && language;
+
   return (
     <View style={[styles.codeBlock, style]}>
-      {language && <Text style={styles.codeLanguage}>{language}</Text>}
+      {showLanguage && <Text style={styles.codeLanguage}>{language}</Text>}
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-        <Text style={styles.codeBlockText}>{content}</Text>
+        <Text style={styles.codeBlockText}>{displayContent}</Text>
       </ScrollView>
     </View>
   );
 };
 
 interface InlineCodeProps {
-  children: ReactNode;
+  content?: string;
+  node?: MarkdownNode;
+  children?: ReactNode;
   style?: TextStyle;
 }
 
-export const InlineCode: FC<InlineCodeProps> = ({ children, style }) => {
+export const InlineCode: FC<InlineCodeProps> = ({
+  content,
+  node,
+  children,
+  style,
+}) => {
   const { theme } = useMarkdownContext();
+
+  const displayContent =
+    content ?? children ?? (node ? getTextContent(node) : "");
+
   const styles = useMemo(
     () =>
       StyleSheet.create({
         codeInline: {
-          fontFamily: Platform.select({ ios: "Courier", android: "monospace" }),
+          fontFamily:
+            theme.fontFamilies.mono ??
+            Platform.select({ ios: "Courier", android: "monospace" }),
           fontSize: theme.fontSizes.s,
           color: theme.colors.code,
           backgroundColor: theme.colors.codeBackground,
           paddingHorizontal: theme.spacing.xs,
           paddingVertical: 2,
-          borderRadius: 4,
+          borderRadius: theme.borderRadius.s,
           ...(Platform.OS === "android" && { includeFontPadding: false }),
         },
       }),
     [theme]
   );
-  return <Text style={[styles.codeInline, style]}>{children}</Text>;
+  return <Text style={[styles.codeInline, style]}>{displayContent}</Text>;
 };
-

package/src/renderers/heading.tsx

@@ -18,6 +18,7 @@ export const Heading: FC<HeadingProps> = ({ level, children, style }) => {
           fontWeight: "700",
           marginTop: theme.spacing.xl,
           marginBottom: theme.spacing.m,
+          fontFamily: theme.fontFamilies.heading,
         },
         h1: {
           fontSize: theme.fontSizes.h1,
@@ -63,4 +64,3 @@ export const Heading: FC<HeadingProps> = ({ level, children, style }) => {
 
   return <Text style={[...headingStyles, style]}>{children}</Text>;
 };
-

package/src/renderers/horizontal-rule.tsx

@@ -1,8 +1,12 @@
 import { useMemo, type FC } from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, type ViewStyle } from "react-native";
 import { useMarkdownContext } from "../MarkdownContext";
 
-export const HorizontalRule: FC = () => {
+interface HorizontalRuleProps {
+  style?: ViewStyle;
+}
+
+export const HorizontalRule: FC<HorizontalRuleProps> = ({ style }) => {
   const { theme } = useMarkdownContext();
   const styles = useMemo(
     () =>
@@ -15,6 +19,5 @@ export const HorizontalRule: FC = () => {
       }),
     [theme]
   );
-  return <View style={styles.horizontalRule} />;
+  return <View style={[styles.horizontalRule, style]} />;
 };
-

package/src/renderers/image.tsx

@@ -1,5 +1,17 @@
-import { useState, useMemo, type ReactNode, type FC, type ComponentType } from "react";
-import { View, Text, Image as RNImage, StyleSheet } from "react-native";
+import {
+  useState,
+  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";
@@ -25,11 +37,11 @@ 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 { theme } = useMarkdownContext();
@@ -44,7 +56,7 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer }) => {
         image: {
           width: "100%",
           height: 200,
-          borderRadius: 8,
+          borderRadius: theme.borderRadius.m,
           backgroundColor: theme.colors.surface,
         },
         imageHidden: {
@@ -54,7 +66,7 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer }) => {
         imageLoading: {
           width: "100%",
           height: 200,
-          borderRadius: 8,
+          borderRadius: theme.borderRadius.m,
           backgroundColor: theme.colors.surface,
           justifyContent: "center",
           alignItems: "center",
@@ -62,11 +74,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 +87,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,6 +95,7 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer }) => {
           marginTop: theme.spacing.s,
           fontStyle: "italic",
           textAlign: "center",
+          fontFamily: theme.fontFamilies.regular,
         },
       }),
     [theme]
@@ -117,7 +132,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,7 +153,7 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer }) => {
   }
 
   return (
-    <View style={styles.imageContainer}>
+    <View style={[styles.imageContainer, style]}>
       {loading && (
         <View style={styles.imageLoading}>
           <Text style={styles.imageLoadingText}>Loading image...</Text>

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>
   );
 };
-