react-native-nitro-markdown 0.1.2 → 0.2.1

package/src/markdown.tsx

@@ -0,0 +1,415 @@
+import { defaultMarkdownTheme, type MarkdownTheme } 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,
+  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;
+  /**
+   * Custom renderers for specific markdown node types.
+   */
+  renderers?: CustomRenderers;
+  /**
+   * Custom theme to override default styles.
+   */
+  theme?: Partial<MarkdownTheme>;
+  /**
+   * Optional style for the container view.
+   */
+  style?: StyleProp<ViewStyle>;
+}
+
+export const Markdown: FC<MarkdownProps> = ({
+  children,
+  options,
+  renderers = {},
+  theme: userTheme,
+  style,
+}) => {
+  const ast = useMemo(() => {
+    try {
+      if (options) {
+        return parseMarkdownWithOptions(children, options);
+      }
+      return parseMarkdown(children);
+    } catch (error) {
+      console.error("Failed to parse markdown:", error);
+      return null;
+    }
+  }, [children, options]);
+
+  const theme = useMemo(
+    () => ({ ...defaultMarkdownTheme, ...userTheme }),
+    [userTheme]
+  );
+
+  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 }}>
+      <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 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 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: "baseline",
+                flexWrap: "wrap",
+                flexShrink: 1,
+                marginVertical: 0,
+                paddingVertical: 0,
+              }}
+            >
+              {currentInlineGroup.map((node, idx) => (
+                <NodeRenderer
+                  key={`${node.type}-${idx}`}
+                  node={node}
+                  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((node, idx) => (
+                <NodeRenderer
+                  key={`${node.type}-${idx}`}
+                  node={node}
+                  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 result = customRenderer({
+      node,
+      children: childrenRendered,
+      Renderer: NodeRenderer,
+    });
+    if (result !== undefined) return <>{result}</>;
+  }
+
+  switch (node.type) {
+    case "document":
+      return (
+        <View style={baseStyles.document}>
+          {renderChildren(node.children, false, false)}
+        </View>
+      );
+
+    case "heading":
+      return (
+        <Heading level={node.level ?? 1}>
+          {renderChildren(node.children, inListItem, true)}
+        </Heading>
+      );
+
+    case "paragraph":
+      return (
+        <Paragraph inListItem={inListItem}>
+          {renderChildren(node.children, inListItem, false)}
+        </Paragraph>
+      );
+
+    case "text":
+      if (parentIsText) {
+        return <Text>{node.content}</Text>;
+      }
+      return <Text style={baseStyles.text}>{node.content}</Text>;
+
+    case "bold":
+      return (
+        <Text style={baseStyles.bold}>
+          {renderChildren(node.children, inListItem, true)}
+        </Text>
+      );
+
+    case "italic":
+      return (
+        <Text style={baseStyles.italic}>
+          {renderChildren(node.children, inListItem, true)}
+        </Text>
+      );
+
+    case "strikethrough":
+      return (
+        <Text style={baseStyles.strikethrough}>
+          {renderChildren(node.children, inListItem, true)}
+        </Text>
+      );
+
+    case "link":
+      return (
+        <Link href={node.href ?? ""}>
+          {renderChildren(node.children, inListItem, true)}
+        </Link>
+      );
+
+    case "image":
+      return (
+        <Image
+          url={node.href ?? ""}
+          title={node.title}
+          alt={node.alt}
+          Renderer={NodeRenderer}
+        />
+      );
+
+    case "code_inline":
+      return <InlineCode>{node.content}</InlineCode>;
+
+    case "code_block":
+      return (
+        <CodeBlock language={node.language} content={getTextContent(node)} />
+      );
+
+    case "blockquote":
+      return (
+        <Blockquote>
+          {renderChildren(node.children, inListItem, false)}
+        </Blockquote>
+      );
+
+    case "horizontal_rule":
+      return <HorizontalRule />;
+
+    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} />;
+    }
+
+    case "math_block":
+      return <MathBlock content={getTextContent(node)} />;
+
+    case "list":
+      return (
+        <List ordered={node.ordered ?? false} start={node.start} depth={depth}>
+          {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}>
+          {renderChildren(node.children, true, false)}
+        </TaskListItem>
+      );
+
+    case "table":
+      return <TableRenderer node={node} Renderer={NodeRenderer} />;
+
+    case "table_head":
+    case "table_body":
+    case "table_row":
+    case "table_cell":
+      // Handled by TableRenderer
+      return null;
+
+    default:
+      return null;
+  }
+};
+
+const createBaseStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    document: {
+      flex: 1,
+    },
+    errorText: {
+      color: "#f87171",
+      fontSize: 14,
+      fontFamily: "monospace",
+    },
+    text: {
+      color: theme.colors.text,
+      fontSize: theme.fontSizes.m,
+      lineHeight: theme.fontSizes.m * 1.6,
+    },
+    bold: {
+      fontWeight: "700",
+    },
+    italic: {
+      fontStyle: "italic",
+    },
+    strikethrough: {
+      textDecorationLine: "line-through",
+    },
+  });

package/src/renderers/blockquote.tsx

@@ -0,0 +1,31 @@
+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: 4,
+        },
+      }),
+    [theme]
+  );
+
+  return <View style={[styles.blockquote, style]}>{children}</View>;
+};
+

package/src/renderers/code.tsx

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

package/src/renderers/heading.tsx

@@ -0,0 +1,66 @@
+import { ReactNode, useMemo, type FC } from "react";
+import { Text, StyleSheet, type TextStyle } from "react-native";
+import { useMarkdownContext } from "../MarkdownContext";
+
+interface HeadingProps {
+  level: number;
+  children: ReactNode;
+  style?: TextStyle;
+}
+
+export const Heading: FC<HeadingProps> = ({ level, children, style }) => {
+  const { theme } = useMarkdownContext();
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        heading: {
+          color: theme.colors.heading,
+          fontWeight: "700",
+          marginTop: theme.spacing.xl,
+          marginBottom: theme.spacing.m,
+        },
+        h1: {
+          fontSize: theme.fontSizes.h1,
+          lineHeight: theme.fontSizes.h1 * 1.3,
+          borderBottomWidth: 1,
+          borderBottomColor: theme.colors.border,
+          paddingBottom: theme.spacing.s,
+        },
+        h2: {
+          fontSize: theme.fontSizes.h2,
+          lineHeight: theme.fontSizes.h2 * 1.3,
+        },
+        h3: {
+          fontSize: theme.fontSizes.h3,
+          lineHeight: theme.fontSizes.h3 * 1.3,
+        },
+        h4: {
+          fontSize: theme.fontSizes.h4,
+          lineHeight: theme.fontSizes.h4 * 1.3,
+        },
+        h5: {
+          fontSize: theme.fontSizes.h5,
+          lineHeight: theme.fontSizes.h5 * 1.3,
+        },
+        h6: {
+          fontSize: theme.fontSizes.h6,
+          lineHeight: theme.fontSizes.h6 * 1.3,
+          color: theme.colors.textMuted,
+        },
+      }),
+    [theme]
+  );
+
+  const headingStyles = [
+    styles.heading,
+    level === 1 && styles.h1,
+    level === 2 && styles.h2,
+    level === 3 && styles.h3,
+    level === 4 && styles.h4,
+    level === 5 && styles.h5,
+    level === 6 && styles.h6,
+  ];
+
+  return <Text style={[...headingStyles, style]}>{children}</Text>;
+};
+

package/src/renderers/horizontal-rule.tsx

@@ -0,0 +1,20 @@
+import { useMemo, type FC } from "react";
+import { View, StyleSheet } from "react-native";
+import { useMarkdownContext } from "../MarkdownContext";
+
+export const HorizontalRule: FC = () => {
+  const { theme } = useMarkdownContext();
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        horizontalRule: {
+          height: 1,
+          backgroundColor: theme.colors.border,
+          marginVertical: theme.spacing.xl,
+        },
+      }),
+    [theme]
+  );
+  return <View style={styles.horizontalRule} />;
+};
+