@saiansh2525/react-native-nitro-markdown 0.3.2

package/src/markdown.tsx

@@ -0,0 +1,521 @@
+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,
+  View,
+  Text,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import {
+  parseMarkdown,
+  parseMarkdownWithOptions,
+  getFlattenedText,
+  getTextContent,
+  type MarkdownNode,
+} from "./headless";
+import type { ParserOptions } from "./Markdown.nitro";
+import {
+  MarkdownContext,
+  useMarkdownContext,
+  type CustomRenderers,
+  type NodeRendererProps,
+} from "./MarkdownContext";
+
+import { Heading } from "./renderers/heading";
+import { Paragraph } from "./renderers/paragraph";
+import { Link } from "./renderers/link";
+import { Blockquote } from "./renderers/blockquote";
+import { HorizontalRule } from "./renderers/horizontal-rule";
+import { CodeBlock, InlineCode } from "./renderers/code";
+import { List, ListItem, TaskListItem } from "./renderers/list";
+import { TableRenderer } from "./renderers/table";
+import { Image } from "./renderers/image";
+import { MathInline, MathBlock } from "./renderers/math";
+
+export interface MarkdownProps {
+  /**
+   * The markdown string to parse and render.
+   */
+  children: string;
+  /**
+   * 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?: 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.
+   */
+  style?: StyleProp<ViewStyle>;
+}
+
+export const Markdown: FC<MarkdownProps> = ({
+  children,
+  options,
+  renderers = {},
+  theme: userTheme,
+  styles: nodeStyles,
+  stylingStrategy = "opinionated",
+  style,
+  onParsingInProgress,
+  onParseComplete,
+}) => {
+  const ast = useMemo(() => {
+    try {
+      if (onParsingInProgress) {
+        onParsingInProgress();
+      }
+
+      let result: MarkdownNode;
+      if (options) {
+        result = parseMarkdownWithOptions(children, options);
+      } else {
+        result = parseMarkdown(children);
+      }
+
+      if (onParseComplete) {
+        onParseComplete({
+          raw: children,
+          ast: result,
+          text: getFlattenedText(result),
+        });
+      }
+
+      return result;
+    } catch (error) {
+      console.error("Failed to parse markdown:", error);
+      return null;
+    }
+  }, [children, options, onParsingInProgress, onParseComplete]);
+
+  const theme = useMemo(() => {
+    const base =
+      stylingStrategy === "minimal"
+        ? minimalMarkdownTheme
+        : defaultMarkdownTheme;
+    return mergeThemes(base, userTheme);
+  }, [userTheme, stylingStrategy]);
+
+  const baseStyles = useMemo(() => createBaseStyles(theme), [theme]);
+
+  if (!ast) {
+    return (
+      <View style={[baseStyles.container, style]}>
+        <Text style={baseStyles.errorText}>Error parsing markdown</Text>
+      </View>
+    );
+  }
+
+  return (
+    <MarkdownContext.Provider
+      value={{ renderers, theme, styles: nodeStyles, stylingStrategy }}
+    >
+      <View style={[baseStyles.container, style]}>
+        <NodeRenderer node={ast} depth={0} inListItem={false} />
+      </View>
+    </MarkdownContext.Provider>
+  );
+};
+
+const isInline = (type: MarkdownNode["type"]): boolean => {
+  return (
+    type === "text" ||
+    type === "bold" ||
+    type === "italic" ||
+    type === "strikethrough" ||
+    type === "link" ||
+    type === "code_inline" ||
+    type === "soft_break" ||
+    type === "line_break" ||
+    type === "html_inline" ||
+    type === "math_inline"
+  );
+};
+
+const NodeRenderer: FC<NodeRendererProps> = ({
+  node,
+  depth,
+  inListItem,
+  parentIsText = false,
+}) => {
+  const { renderers, theme, styles: nodeStyles } = useMarkdownContext();
+  const baseStyles = useMemo(() => createBaseStyles(theme), [theme]);
+
+  const renderChildren = (
+    children?: MarkdownNode[],
+    childInListItem = false,
+    childParentIsText = false,
+  ): ReactNode => {
+    if (!children || children.length === 0) return null;
+
+    const elements: ReactNode[] = [];
+    let currentInlineGroup: MarkdownNode[] = [];
+
+    const flushInlineGroup = () => {
+      if (currentInlineGroup.length > 0) {
+        const hasMath = currentInlineGroup.some(
+          (child) => child.type === "math_inline",
+        );
+
+        if (hasMath && !childParentIsText) {
+          elements.push(
+            <View
+              key={`inline-group-${elements.length}`}
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                flexWrap: "wrap",
+                flexShrink: 1,
+              }}
+            >
+              {currentInlineGroup.map((n, idx) => (
+                <NodeRenderer
+                  key={`${n.type}-${idx}`}
+                  node={n}
+                  depth={depth + 1}
+                  inListItem={childInListItem}
+                  parentIsText={false}
+                />
+              ))}
+            </View>,
+          );
+        } else {
+          const Wrapper = childParentIsText ? Fragment : Text;
+          const wrapperProps = childParentIsText
+            ? {}
+            : { style: baseStyles.text };
+
+          elements.push(
+            <Wrapper key={`inline-group-${elements.length}`} {...wrapperProps}>
+              {currentInlineGroup.map((n, idx) => (
+                <NodeRenderer
+                  key={`${n.type}-${idx}`}
+                  node={n}
+                  depth={depth + 1}
+                  inListItem={childInListItem}
+                  parentIsText={true}
+                />
+              ))}
+            </Wrapper>,
+          );
+        }
+        currentInlineGroup = [];
+      }
+    };
+
+    children.forEach((child, index) => {
+      if (isInline(child.type)) {
+        currentInlineGroup.push(child);
+      } else {
+        flushInlineGroup();
+        elements.push(
+          <NodeRenderer
+            key={`${child.type}-${index}`}
+            node={child}
+            depth={depth + 1}
+            inListItem={childInListItem}
+            parentIsText={childParentIsText}
+          />,
+        );
+      }
+    });
+
+    flushInlineGroup();
+    return elements;
+  };
+
+  const customRenderer = renderers[node.type];
+  if (customRenderer) {
+    const childrenRendered = renderChildren(
+      node.children,
+      inListItem,
+      parentIsText,
+    );
+
+    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, nodeStyleOverride]}>
+          {renderChildren(node.children, false, false)}
+        </View>
+      );
+
+    case "heading":
+      return (
+        <Heading level={node.level ?? 1} style={nodeStyleOverride}>
+          {renderChildren(node.children, inListItem, true)}
+        </Heading>
+      );
+
+    case "paragraph":
+      return (
+        <Paragraph inListItem={inListItem} style={nodeStyleOverride}>
+          {renderChildren(node.children, inListItem, false)}
+        </Paragraph>
+      );
+
+    case "text":
+      if (parentIsText) {
+        return <Text>{node.content}</Text>;
+      }
+      return (
+        <Text style={[baseStyles.text, nodeStyleOverride]}>{node.content}</Text>
+      );
+
+    case "bold":
+      return (
+        <Text style={[baseStyles.bold, nodeStyleOverride]}>
+          {renderChildren(node.children, inListItem, true)}
+        </Text>
+      );
+
+    case "italic":
+      return (
+        <Text style={[baseStyles.italic, nodeStyleOverride]}>
+          {renderChildren(node.children, inListItem, true)}
+        </Text>
+      );
+
+    case "strikethrough":
+      return (
+        <Text style={[baseStyles.strikethrough, nodeStyleOverride]}>
+          {renderChildren(node.children, inListItem, true)}
+        </Text>
+      );
+
+    case "link":
+      return (
+        <Link href={node.href ?? ""} style={nodeStyleOverride}>
+          {renderChildren(node.children, inListItem, true)}
+        </Link>
+      );
+
+    case "image":
+      return (
+        <Image
+          url={node.href ?? ""}
+          title={node.title}
+          alt={node.alt}
+          Renderer={NodeRenderer}
+          style={nodeStyleOverride}
+        />
+      );
+
+    case "code_inline":
+      return <InlineCode style={nodeStyleOverride}>{node.content}</InlineCode>;
+
+    case "code_block":
+      return (
+        <CodeBlock
+          language={node.language}
+          content={getTextContent(node)}
+          style={nodeStyleOverride}
+        />
+      );
+
+    case "blockquote":
+      return (
+        <Blockquote style={nodeStyleOverride}>
+          {renderChildren(node.children, inListItem, false)}
+        </Blockquote>
+      );
+
+    case "horizontal_rule":
+      return <HorizontalRule style={nodeStyleOverride} />;
+
+    case "line_break":
+      return <Text>{"\n"}</Text>;
+
+    case "soft_break":
+      return <Text> </Text>;
+
+    case "math_inline": {
+      let mathContent = getTextContent(node);
+      if (!mathContent) return null;
+      mathContent = mathContent.replace(/^\$+|\$+$/g, "").trim();
+      return <MathInline content={mathContent} style={nodeStyleOverride} />;
+    }
+
+    case "math_block":
+      return (
+        <MathBlock content={getTextContent(node)} style={nodeStyleOverride} />
+      );
+
+    case "list":
+      return (
+        <List
+          ordered={node.ordered ?? false}
+          start={node.start}
+          depth={depth}
+          style={nodeStyleOverride}
+        >
+          {node.children?.map((child, index) => {
+            if (child.type === "task_list_item") {
+              return (
+                <NodeRenderer
+                  key={index}
+                  node={child}
+                  depth={depth + 1}
+                  inListItem={true}
+                  parentIsText={false}
+                />
+              );
+            }
+            return (
+              <ListItem
+                key={index}
+                index={index}
+                ordered={node.ordered ?? false}
+                start={node.start ?? 1}
+              >
+                <NodeRenderer
+                  node={child}
+                  depth={depth + 1}
+                  inListItem={true}
+                  parentIsText={false}
+                />
+              </ListItem>
+            );
+          })}
+        </List>
+      );
+
+    case "list_item":
+      return <>{renderChildren(node.children, true, false)}</>;
+
+    case "task_list_item":
+      return (
+        <TaskListItem checked={node.checked ?? false} style={nodeStyleOverride}>
+          {renderChildren(node.children, true, false)}
+        </TaskListItem>
+      );
+
+    case "table":
+      return (
+        <TableRenderer
+          node={node}
+          Renderer={NodeRenderer}
+          style={nodeStyleOverride}
+        />
+      );
+
+    case "table_head":
+    case "table_body":
+    case "table_row":
+    case "table_cell":
+      return null;
+
+    default:
+      return null;
+  }
+};
+
+const createBaseStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    document: {
+      flex: 1,
+    },
+    errorText: {
+      color: "#f87171",
+      fontSize: 14,
+      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",
+    },
+    italic: {
+      fontStyle: "italic",
+    },
+    strikethrough: {
+      textDecorationLine: "line-through",
+    },
+  });

package/src/renderers/blockquote.tsx

@@ -0,0 +1,30 @@
+import { ReactNode, useMemo, type FC } from "react";
+import { View, StyleSheet, type ViewStyle } from "react-native";
+import { useMarkdownContext } from "../MarkdownContext";
+
+interface BlockquoteProps {
+  children: ReactNode;
+  style?: ViewStyle;
+}
+
+export const Blockquote: FC<BlockquoteProps> = ({ children, style }) => {
+  const { theme } = useMarkdownContext();
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        blockquote: {
+          borderLeftWidth: 4,
+          borderLeftColor: theme.colors.blockquote,
+          paddingLeft: theme.spacing.l,
+          marginVertical: theme.spacing.m,
+          backgroundColor: theme.colors.surfaceLight,
+          paddingVertical: theme.spacing.m,
+          paddingRight: theme.spacing.m,
+          borderRadius: theme.borderRadius.s,
+        },
+      }),
+    [theme]
+  );
+
+  return <View style={[styles.blockquote, style]}>{children}</View>;
+};

package/src/renderers/code.tsx

@@ -0,0 +1,112 @@
+import { ReactNode, useMemo, type FC } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  Platform,
+  type ViewStyle,
+  type TextStyle,
+} from "react-native";
+import { useMarkdownContext } from "../MarkdownContext";
+import type { MarkdownNode } from "../headless";
+import { getTextContent } from "../headless";
+
+interface CodeBlockProps {
+  language?: 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: theme.borderRadius.m,
+          padding: theme.spacing.l,
+          marginVertical: theme.spacing.m,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+        },
+        codeLanguage: {
+          color: theme.colors.codeLanguage,
+          fontSize: theme.fontSizes.xs,
+          fontWeight: "600",
+          marginBottom: theme.spacing.s,
+          textTransform: "uppercase",
+          letterSpacing: 0.5,
+        },
+        codeBlockText: {
+          fontFamily:
+            theme.fontFamilies.mono ??
+            Platform.select({ ios: "Courier", android: "monospace" }),
+          fontSize: theme.fontSizes.s,
+          color: theme.colors.text,
+          lineHeight: theme.fontSizes.s * 1.5,
+        },
+      }),
+    [theme]
+  );
+
+  const showLanguage = theme.showCodeLanguage && language;
+
+  return (
+    <View style={[styles.codeBlock, style]}>
+      {showLanguage && <Text style={styles.codeLanguage}>{language}</Text>}
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <Text style={styles.codeBlockText}>{displayContent}</Text>
+      </ScrollView>
+    </View>
+  );
+};
+
+interface InlineCodeProps {
+  content?: string;
+  node?: MarkdownNode;
+  children?: ReactNode;
+  style?: TextStyle;
+}
+
+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:
+            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: theme.borderRadius.s,
+          ...(Platform.OS === "android" && { includeFontPadding: false }),
+        },
+      }),
+    [theme]
+  );
+  return <Text style={[styles.codeInline, style]}>{displayContent}</Text>;
+};