react-native-nitro-markdown 0.2.1 → 0.3.1

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,8 @@ import {
 import {
   parseMarkdown,
   parseMarkdownWithOptions,
+  getFlattenedText,
+  getTextContent,
   type MarkdownNode,
 } from "./headless";
 import type { ParserOptions } from "./Markdown.nitro";
@@ -40,14 +50,44 @@ export interface MarkdownProps {
    * Parser options to enable GFM or Math support.
    */
   options?: ParserOptions;
+  /**
+   * Callback fired when parsing begins.
+   */
+  onParsingInProgress?: () => void;
+  /**
+   * Callback fired when parsing completes.
+   */
+  onParseComplete?: (result: {
+    raw: string;
+    ast: MarkdownNode;
+    text: string;
+  }) => void;
   /**
    * 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,24 +99,47 @@ export const Markdown: FC<MarkdownProps> = ({
   options,
   renderers = {},
   theme: userTheme,
+  styles: nodeStyles,
+  stylingStrategy = "opinionated",
   style,
+  onParsingInProgress,
+  onParseComplete,
 }) => {
   const ast = useMemo(() => {
     try {
+      if (onParsingInProgress) {
+        onParsingInProgress();
+      }
+
+      let result: MarkdownNode;
       if (options) {
-        return parseMarkdownWithOptions(children, options);
+        result = parseMarkdownWithOptions(children, options);
+      } else {
+        result = parseMarkdown(children);
+      }
+
+      if (onParseComplete) {
+        onParseComplete({
+          raw: children,
+          ast: result,
+          text: getFlattenedText(result),
+        });
       }
-      return parseMarkdown(children);
+
+      return result;
     } catch (error) {
       console.error("Failed to parse markdown:", error);
       return null;
     }
-  }, [children, options]);
+  }, [children, options, onParsingInProgress, onParseComplete]);
 
-  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 +152,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,24 +177,19 @@ 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 = (
     children?: MarkdownNode[],
     childInListItem = false,
-    childParentIsText = false
+    childParentIsText = false,
   ): ReactNode => {
     if (!children || children.length === 0) return null;
 
@@ -139,7 +199,7 @@ const NodeRenderer: FC<NodeRendererProps> = ({
     const flushInlineGroup = () => {
       if (currentInlineGroup.length > 0) {
         const hasMath = currentInlineGroup.some(
-          (child) => child.type === "math_inline"
+          (child) => child.type === "math_inline",
         );
 
         if (hasMath && !childParentIsText) {
@@ -148,23 +208,21 @@ 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}
                 />
               ))}
-            </View>
+            </View>,
           );
         } else {
           const Wrapper = childParentIsText ? Fragment : Text;
@@ -174,16 +232,16 @@ 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}
                 />
               ))}
-            </Wrapper>
+            </Wrapper>,
           );
         }
         currentInlineGroup = [];
@@ -202,7 +260,7 @@ const NodeRenderer: FC<NodeRendererProps> = ({
             depth={depth + 1}
             inListItem={childInListItem}
             parentIsText={childParentIsText}
-          />
+          />,
         );
       }
     });
@@ -216,34 +274,62 @@ const NodeRenderer: FC<NodeRendererProps> = ({
     const childrenRendered = renderChildren(
       node.children,
       inListItem,
-      parentIsText
+      parentIsText,
     );
-    const result = customRenderer({
+
+    const baseProps = {
       node,
       children: childrenRendered,
       Renderer: NodeRenderer,
-    });
+    };
+
+    const enhancedProps = {
+      ...baseProps,
+      ...(node.type === "heading" && {
+        level: (node.level ?? 1) as 1 | 2 | 3 | 4 | 5 | 6,
+      }),
+      ...(node.type === "link" && { href: node.href ?? "", title: node.title }),
+      ...(node.type === "image" && {
+        url: node.href ?? "",
+        alt: node.alt,
+        title: node.title,
+      }),
+      ...(node.type === "code_block" && {
+        content: getTextContent(node),
+        language: node.language,
+      }),
+      ...(node.type === "code_inline" && { content: node.content ?? "" }),
+      ...(node.type === "list" && {
+        ordered: node.ordered ?? false,
+        start: node.start,
+      }),
+      ...(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 +338,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 +377,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 +413,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 +465,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 +501,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]} />;
 };
-