react-native-nitro-markdown 0.1.2 → 0.2.1

package/src/default-markdown-renderer.tsx

@@ -0,0 +1,266 @@
+import { type ReactNode, type FC } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import type { MarkdownNode } from "./headless";
+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";
+import { defaultMarkdownTheme } from "./theme";
+
+interface MarkdownRendererProps {
+  node: MarkdownNode;
+  depth?: number;
+  inListItem?: boolean;
+}
+
+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 === "math_inline" ||
+    type === "html_inline"
+  );
+};
+
+const getTextContent = (node: MarkdownNode): string => {
+  if (node.content) return node.content;
+  return node.children?.map(getTextContent).join("") ?? "";
+};
+
+export const DefaultMarkdownRenderer: FC<MarkdownRendererProps> = ({
+  node,
+  depth = 0,
+  inListItem = false,
+}) => {
+  const renderChildren = (
+    children?: MarkdownNode[],
+    childInListItem = false
+  ) => {
+    if (!children || children.length === 0) return null;
+
+    const elements: ReactNode[] = [];
+    let currentInlineGroup: MarkdownNode[] = [];
+
+    const flushInlineGroup = () => {
+      if (currentInlineGroup.length > 0) {
+        elements.push(
+          <Text key={`inline-group-${elements.length}`} style={styles.text}>
+            {currentInlineGroup.map((child, index) => (
+              <DefaultMarkdownRenderer
+                key={`${child.type}-${index}`}
+                node={child}
+                depth={depth + 1}
+                inListItem={childInListItem}
+              />
+            ))}
+          </Text>
+        );
+        currentInlineGroup = [];
+      }
+    };
+
+    children.forEach((child, index) => {
+      if (isInline(child.type)) {
+        currentInlineGroup.push(child);
+      } else {
+        flushInlineGroup();
+        elements.push(
+          <DefaultMarkdownRenderer
+            key={`${child.type}-${index}`}
+            node={child}
+            depth={depth + 1}
+            inListItem={childInListItem}
+          />
+        );
+      }
+    });
+
+    flushInlineGroup();
+    return elements;
+  };
+
+  switch (node.type) {
+    case "document":
+      return (
+        <View style={styles.document}>
+          {renderChildren(node.children, false)}
+        </View>
+      );
+
+    case "heading":
+      return (
+        <Heading level={node.level ?? 1}>
+          {renderChildren(node.children, inListItem)}
+        </Heading>
+      );
+
+    case "paragraph":
+      return (
+        <Paragraph inListItem={inListItem}>
+          {renderChildren(node.children, inListItem)}
+        </Paragraph>
+      );
+
+    case "text":
+      return <Text style={styles.text}>{node.content}</Text>;
+
+    case "bold":
+      return (
+        <Text style={styles.bold}>
+          {renderChildren(node.children, inListItem)}
+        </Text>
+      );
+
+    case "italic":
+      return (
+        <Text style={styles.italic}>
+          {renderChildren(node.children, inListItem)}
+        </Text>
+      );
+
+    case "strikethrough":
+      return (
+        <Text style={styles.strikethrough}>
+          {renderChildren(node.children, inListItem)}
+        </Text>
+      );
+
+    case "link":
+      return (
+        <Link href={node.href ?? ""}>
+          {renderChildren(node.children, inListItem)}
+        </Link>
+      );
+
+    case "image":
+      return (
+        <Image
+          url={node.href ?? ""}
+          title={node.title}
+          alt={node.alt}
+          Renderer={DefaultMarkdownRenderer}
+        />
+      );
+
+    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)}</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": {
+      let mathContent = getTextContent(node);
+      if (!mathContent) return null;
+      mathContent = mathContent.replace(/^\$+|\$+$/g, "").trim();
+      return <MathBlock content={mathContent} />;
+    }
+
+    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 (
+                <DefaultMarkdownRenderer
+                  key={index}
+                  node={child}
+                  depth={depth + 1}
+                  inListItem={true}
+                />
+              );
+            }
+            return (
+              <ListItem
+                key={index}
+                index={index}
+                ordered={node.ordered ?? false}
+                start={node.start ?? 1}
+              >
+                <DefaultMarkdownRenderer
+                  node={child}
+                  depth={depth + 1}
+                  inListItem={true}
+                />
+              </ListItem>
+            );
+          })}
+        </List>
+      );
+
+    case "list_item":
+      return <>{renderChildren(node.children, true)}</>;
+
+    case "task_list_item":
+      return (
+        <TaskListItem checked={node.checked ?? false}>
+          {renderChildren(node.children, true)}
+        </TaskListItem>
+      );
+
+    case "table":
+      return <TableRenderer node={node} Renderer={DefaultMarkdownRenderer} />;
+
+    case "table_head":
+    case "table_body":
+    case "table_row":
+    case "table_cell":
+      // Handled by TableRenderer
+      return null;
+
+    default:
+      return null;
+  }
+};
+
+const styles = StyleSheet.create({
+  document: {
+    flex: 1,
+  },
+  text: {
+    color: defaultMarkdownTheme.colors.text,
+  },
+  bold: {
+    fontWeight: "700",
+  },
+  italic: {
+    fontStyle: "italic",
+  },
+  strikethrough: {
+    textDecorationLine: "line-through",
+  },
+});

package/src/headless.ts

@@ -0,0 +1,106 @@
+/**
+ * Headless entry point for react-native-nitro-markdown.
+ * Use this when you want to build your own renderer and minimize bundle size.
+ *
+ * @example
+ * ```tsx
+ * import { parseMarkdown } from 'react-native-nitro-markdown/headless';
+ *
+ * const ast = parseMarkdown('# Hello World');
+ * // Build your own renderer using the AST
+ * ```
+ */
+import { NitroModules } from "react-native-nitro-modules";
+import type { MarkdownParser, ParserOptions } from "./Markdown.nitro";
+
+export type { ParserOptions } from "./Markdown.nitro";
+
+/**
+ * Represents a node in the Markdown AST (Abstract Syntax Tree).
+ * Each node has a type and optional properties depending on the node type.
+ */
+export interface MarkdownNode {
+  /** The type of markdown element this node represents. Used to decide how to render the node. */
+  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";
+  /** Text content for text, code, and similar nodes. */
+  content?: string;
+  /** Heading level (1-6) for heading nodes. */
+  level?: number;
+  /** URL for link and image nodes. */
+  href?: string;
+  /** Title attribute for link and image nodes. */
+  title?: string;
+  /** Alt text for image nodes. */
+  alt?: string;
+  /** Programming language for code blocks (e.g., 'typescript', 'javascript'). */
+  language?: string;
+  /** Whether a list is ordered (numbered) or unordered. */
+  ordered?: boolean;
+  /** The starting number for ordered lists. */
+  start?: number;
+  /** Whether a task list item is currently checked. */
+  checked?: boolean;
+  /** Whether a table cell is part of the header row. */
+  isHeader?: boolean;
+  /** Text alignment for table cells: 'left', 'center', or 'right'. */
+  align?: string;
+  /** Nested child nodes for hierarchical elements like paragraphs, lists, and tables. */
+  children?: MarkdownNode[];
+}
+
+export const MarkdownParserModule =
+  NitroModules.createHybridObject<MarkdownParser>("MarkdownParser");
+
+/**
+ * Parse markdown text into an AST.
+ * @param text - The markdown text to parse
+ * @returns The root node of the parsed AST
+ */
+export function parseMarkdown(text: string): MarkdownNode {
+  const jsonStr = MarkdownParserModule.parse(text);
+  return JSON.parse(jsonStr) as MarkdownNode;
+}
+
+/**
+ * Parse markdown text with custom options.
+ * @param text - The markdown text to parse
+ * @param options - Parser options (gfm, math)
+ * @returns The root node of the parsed AST
+ */
+export function parseMarkdownWithOptions(
+  text: string,
+  options: ParserOptions
+): MarkdownNode {
+  const jsonStr = MarkdownParserModule.parseWithOptions(text, options);
+  return JSON.parse(jsonStr) as MarkdownNode;
+}
+
+export { MarkdownParser };
+

package/src/index.ts

@@ -1,65 +1,47 @@
-import { NitroModules } from 'react-native-nitro-modules';
-import type { MarkdownParser, ParserOptions } from './Markdown.nitro';
+export * from "./headless";
 
-export type { ParserOptions } from './Markdown.nitro';
+/** Low-level renderer component for custom implementations */
+export { DefaultMarkdownRenderer } from "./default-markdown-renderer";
 
-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[];
-}
+/**
+ * High-level Markdown component with optional custom renderers.
+ * @example
+ * ```tsx
+ * <Markdown>{'# Hello World'}</Markdown>
+ * ```
+ */
+export { Markdown } from "./markdown";
 
-export const MarkdownParserModule =
-  NitroModules.createHybridObject<MarkdownParser>('MarkdownParser');
+/**
+ * Markdown component that supports streaming updates.
+ */
+export { MarkdownStream } from "./markdown-stream";
 
-export function parseMarkdown(text: string): MarkdownNode {
-  const jsonStr = MarkdownParserModule.parse(text);
-  return JSON.parse(jsonStr) as MarkdownNode;
-}
+export { useMarkdownContext } from "./MarkdownContext";
+export type {
+  CustomRenderer,
+  CustomRenderers,
+  CustomRendererProps,
+  NodeRendererProps,
+} from "./MarkdownContext";
 
-export function parseMarkdownWithOptions(
-  text: string,
-  options: ParserOptions
-): MarkdownNode {
-  const jsonStr = MarkdownParserModule.parseWithOptions(text, options);
-  return JSON.parse(jsonStr) as MarkdownNode;
-}
+/** Default theme configuration */
+export { defaultMarkdownTheme } from "./theme";
+export type { MarkdownTheme } from "./theme";
 
-export { MarkdownParser };
+// Individual renderers for custom compositions
+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";
+
+// Streaming API
+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>;
+};