react-native-nitro-markdown 0.1.2 → 0.3.0

package/src/index.ts

@@ -1,65 +1,52 @@
-import { NitroModules } from 'react-native-nitro-modules';
-import type { MarkdownParser, ParserOptions } from './Markdown.nitro';
+export * from "./headless";
 
-export type { ParserOptions } from './Markdown.nitro';
+export { DefaultMarkdownRenderer } from "./default-markdown-renderer";
+export { Markdown } from "./markdown";
+export { MarkdownStream } from "./markdown-stream";
 
-export interface MarkdownNode {
-  type:
-    | 'document'
-    | 'heading'
-    | 'paragraph'
-    | 'text'
-    | 'bold'
-    | 'italic'
-    | 'strikethrough'
-    | 'link'
-    | 'image'
-    | 'code_inline'
-    | 'code_block'
-    | 'blockquote'
-    | 'horizontal_rule'
-    | 'line_break'
-    | 'soft_break'
-    | 'table'
-    | 'table_head'
-    | 'table_body'
-    | 'table_row'
-    | 'table_cell'
-    | 'list'
-    | 'list_item'
-    | 'task_list_item'
-    | 'math_inline'
-    | 'math_block'
-    | 'html_block'
-    | 'html_inline';
-  content?: string;
-  level?: number;
-  href?: string;
-  title?: string;
-  alt?: string;
-  language?: string;
-  ordered?: boolean;
-  start?: number;
-  checked?: boolean;
-  isHeader?: boolean;
-  align?: string;
-  children?: MarkdownNode[];
-}
+export { useMarkdownContext, MarkdownContext } from "./MarkdownContext";
+export type {
+  CustomRenderer,
+  CustomRenderers,
+  CustomRendererProps,
+  NodeRendererProps,
+  BaseCustomRendererProps,
+  EnhancedRendererProps,
+  HeadingRendererProps,
+  LinkRendererProps,
+  ImageRendererProps,
+  CodeBlockRendererProps,
+  InlineCodeRendererProps,
+  ListRendererProps,
+  TaskListItemRendererProps,
+  MarkdownContextValue,
+} from "./MarkdownContext";
 
-export const MarkdownParserModule =
-  NitroModules.createHybridObject<MarkdownParser>('MarkdownParser');
+export {
+  defaultMarkdownTheme,
+  lightMarkdownTheme,
+  darkMarkdownTheme,
+  minimalMarkdownTheme,
+  mergeThemes,
+} from "./theme";
+export type {
+  MarkdownTheme,
+  PartialMarkdownTheme,
+  NodeStyleOverrides,
+  StylingStrategy,
+} from "./theme";
 
-export function parseMarkdown(text: string): MarkdownNode {
-  const jsonStr = MarkdownParserModule.parse(text);
-  return JSON.parse(jsonStr) as MarkdownNode;
-}
+export { Heading } from "./renderers/heading";
+export { Paragraph } from "./renderers/paragraph";
+export { Link } from "./renderers/link";
+export { Blockquote } from "./renderers/blockquote";
+export { HorizontalRule } from "./renderers/horizontal-rule";
+export { CodeBlock, InlineCode } from "./renderers/code";
+export { List, ListItem, TaskListItem } from "./renderers/list";
+export { TableRenderer } from "./renderers/table";
+export { Image } from "./renderers/image";
+export { MathInline, MathBlock } from "./renderers/math";
 
-export function parseMarkdownWithOptions(
-  text: string,
-  options: ParserOptions
-): MarkdownNode {
-  const jsonStr = MarkdownParserModule.parseWithOptions(text, options);
-  return JSON.parse(jsonStr) as MarkdownNode;
-}
-
-export { MarkdownParser };
+export { createMarkdownSession } from "./MarkdownSession";
+export type { MarkdownSession } from "./MarkdownSession";
+export { useMarkdownSession, useStream } from "./use-markdown-stream";

package/src/markdown-stream.tsx

@@ -0,0 +1,32 @@
+import { useState, useEffect, type FC } from "react";
+import { Markdown, type MarkdownProps } from "./markdown";
+import type { MarkdownSession } from "./specs/MarkdownSession.nitro";
+
+export interface MarkdownStreamProps extends Omit<MarkdownProps, "children"> {
+  /**
+   * The active MarkdownSession to stream content from.
+   */
+  session: MarkdownSession;
+}
+
+/**
+ * A component that renders streaming Markdown from a MarkdownSession.
+ * It efficiently subscribes to session updates to minimize parent re-renders.
+ */
+export const MarkdownStream: FC<MarkdownStreamProps> = ({
+  session,
+  ...props
+}) => {
+  const [text, setText] = useState(() => session.getAllText());
+
+  useEffect(() => {
+    // Ensure initial state is synced
+    setText(session.getAllText());
+
+    return session.addListener(() => {
+      setText(session.getAllText());
+    });
+  }, [session]);
+
+  return <Markdown {...props}>{text}</Markdown>;
+};

package/src/markdown.tsx

@@ -0,0 +1,497 @@
+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,
+  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;
+  /**
+   * 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,
+}) => {
+  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(() => {
+    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,
+      // 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, 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>;
+};