react-native-nitro-markdown 0.1.2 → 0.3.0

package/package.json

@@ -1,12 +1,36 @@
 {
   "name": "react-native-nitro-markdown",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "description": "High-performance Markdown parser for React Native using Nitro Modules and md4c",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/index.d.ts",
+  "types": "lib/typescript/commonjs/index.d.ts",
   "react-native": "src/index.ts",
   "source": "src/index.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      },
+      "react-native": "./src/index.ts"
+    },
+    "./headless": {
+      "import": {
+        "types": "./lib/typescript/module/headless.d.ts",
+        "default": "./lib/module/headless.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/headless.d.ts",
+        "default": "./lib/commonjs/headless.js"
+      },
+      "react-native": "./src/headless.ts"
+    }
+  },
   "files": [
     "src",
     "lib",
@@ -34,8 +58,8 @@
     "test": "jest",
     "test:coverage": "jest --coverage",
     "benchmark": "node ../../scripts/benchmark-comparison.js",
-    "prepack": "node -e \"require('fs').copyFileSync('../../README.md','./README.md')\"",
-    "postpack": "node -e \"const fs=require('fs');if(fs.existsSync('./README.md'))fs.unlinkSync('./README.md')\"",
+    "prepack": "node -e \"const fs=require('fs'); fs.copyFileSync('../../README.md','./README.md'); fs.copyFileSync('../../LICENSE','./LICENSE')\"",
+    "postpack": "node -e \"const fs=require('fs'); if(fs.existsSync('./README.md'))fs.unlinkSync('./README.md'); if(fs.existsSync('./LICENSE'))fs.unlinkSync('./LICENSE')\"",
     "test:cpp": "node scripts/test-cpp.js"
   },
   "keywords": [
@@ -52,7 +76,7 @@
     "type": "git",
     "url": "git+https://github.com/JoaoPauloCMarra/react-native-nitro-markdown.git"
   },
-  "author": "",
+  "author": "João Paulo C. Marra <joaopaulocmarra@gmail.com>",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/JoaoPauloCMarra/react-native-nitro-markdown/issues"
@@ -62,12 +86,26 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "react-native-nitro-modules": "^0.32.0"
+    "@types/react": "^19.2.7",
+    "@types/react-native": "^0.73.0",
+    "react-native-builder-bob": "^0.40.17",
+    "react-native-nitro-modules": "*",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": ">=0.75.0",
-    "react-native-nitro-modules": ">=0.31.0"
+    "react-native-nitro-modules": "*",
+    "react-native-mathjax-svg": ">=0.9.0",
+    "react-native-svg": ">=13.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-mathjax-svg": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    }
   },
   "codegenConfig": {
     "name": "NitroMarkdownSpec",

package/react-native-nitro-markdown.podspec

@@ -12,19 +12,20 @@ Pod::Spec.new do |s|
 
   s.platforms    = { :ios => "13.0" }
   s.source       = { :git => "https://github.com/JoaoPauloCMarra/react-native-nitro-markdown.git", :tag => "#{s.version}" }
+  s.module_name  = "NitroMarkdown"
 
-  # All source files including md4c and our C++ implementation
   s.source_files = [
     "ios/**/*.{h,m,mm,swift}",
     "cpp/**/*.{h,hpp,c,cpp}"
   ]
 
-  # Ensure md4c.c is compiled as C, not C++
   s.pod_target_xcconfig = {
     "CLANG_CXX_LANGUAGE_STANDARD" => "c++20",
     "CLANG_CXX_LIBRARY" => "libc++",
     "GCC_PREPROCESSOR_DEFINITIONS" => "$(inherited) MD4C_USE_UTF8=1",
     "HEADER_SEARCH_PATHS" => [
+      "\"$(inherited)\"",
+      "\"$(PODS_ROOT)/Headers/Private/Yoga\"",
       "\"$(PODS_TARGET_SRCROOT)/cpp/md4c\"",
       "\"$(PODS_TARGET_SRCROOT)/cpp/core\"",
       "\"$(PODS_TARGET_SRCROOT)/cpp/bindings\"",
@@ -33,10 +34,9 @@ Pod::Spec.new do |s|
     ].join(" ")
   }
 
-  # React Native dependency
   s.dependency "React-Core"
-  
-  # Add Nitro autolinking
+  s.dependency "React-Fabric"
+
   load 'nitrogen/generated/ios/NitroMarkdown+autolinking.rb'
   add_nitrogen_files(s)
 end

package/src/MarkdownContext.ts

@@ -0,0 +1,98 @@
+import {
+  createContext,
+  useContext,
+  type ReactNode,
+  type ComponentType,
+} from "react";
+import {
+  defaultMarkdownTheme,
+  type MarkdownTheme,
+  type NodeStyleOverrides,
+  type StylingStrategy,
+} from "./theme";
+import type { MarkdownNode } from "./headless";
+
+export interface NodeRendererProps {
+  node: MarkdownNode;
+  depth: number;
+  inListItem: boolean;
+  parentIsText?: boolean;
+}
+
+export interface BaseCustomRendererProps {
+  node: MarkdownNode;
+  children: ReactNode;
+  Renderer: ComponentType<NodeRendererProps>;
+}
+
+export interface EnhancedRendererProps extends BaseCustomRendererProps {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  href?: string;
+  title?: string;
+  url?: string;
+  alt?: string;
+  content?: string;
+  language?: string;
+  ordered?: boolean;
+  start?: number;
+  checked?: boolean;
+}
+
+export interface HeadingRendererProps extends BaseCustomRendererProps {
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+export interface LinkRendererProps extends BaseCustomRendererProps {
+  href: string;
+  title?: string;
+}
+
+export interface ImageRendererProps extends BaseCustomRendererProps {
+  url: string;
+  alt?: string;
+  title?: string;
+}
+
+export interface CodeBlockRendererProps extends BaseCustomRendererProps {
+  content: string;
+  language?: string;
+}
+
+export interface InlineCodeRendererProps extends BaseCustomRendererProps {
+  content: string;
+}
+
+export interface ListRendererProps extends BaseCustomRendererProps {
+  ordered: boolean;
+  start?: number;
+}
+
+export interface TaskListItemRendererProps extends BaseCustomRendererProps {
+  checked: boolean;
+}
+
+export interface CustomRendererProps extends EnhancedRendererProps {}
+
+export type CustomRenderer = (
+  props: EnhancedRendererProps
+) => ReactNode | undefined;
+
+export type CustomRenderers = Partial<
+  Record<MarkdownNode["type"], CustomRenderer>
+>;
+
+export interface MarkdownContextValue {
+  renderers: CustomRenderers;
+  theme: MarkdownTheme;
+  styles?: NodeStyleOverrides;
+  stylingStrategy: StylingStrategy;
+}
+
+export const MarkdownContext = createContext<MarkdownContextValue>({
+  renderers: {},
+  theme: defaultMarkdownTheme,
+  styles: undefined,
+  stylingStrategy: "opinionated",
+});
+
+export const useMarkdownContext = () => useContext(MarkdownContext);

package/src/MarkdownSession.ts

@@ -0,0 +1,8 @@
+import { NitroModules } from "react-native-nitro-modules";
+import type { MarkdownSession as MarkdownSessionSpec } from "./specs/MarkdownSession.nitro";
+
+export type MarkdownSession = MarkdownSessionSpec;
+
+export function createMarkdownSession(): MarkdownSession {
+  return NitroModules.createHybridObject<MarkdownSession>("MarkdownSession");
+}

package/src/default-markdown-renderer.tsx

@@ -0,0 +1,261 @@
+import { type ReactNode, type FC } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { type MarkdownNode, getTextContent } 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"
+  );
+};
+
+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,116 @@
+/**
+ * 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 type { MarkdownParser };
+
+/**
+ * Extract text content from a markdown node recursively.
+ * Useful for getting plain text from code blocks, headings, etc.
+ * @param node - The markdown node to extract text from
+ * @returns The concatenated text content
+ */
+export const getTextContent = (node: MarkdownNode): string => {
+  if (node.content) return node.content;
+  return node.children?.map(getTextContent).join("") ?? "";
+};