react-native-nitro-markdown 0.1.2 → 0.2.1

package/src/renderers/table.tsx

@@ -0,0 +1,345 @@
+import {
+  useMemo,
+  useRef,
+  useState,
+  useCallback,
+  useEffect,
+  type FC,
+  type ComponentType,
+} from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  type StyleProp,
+  type TextStyle,
+} from "react-native";
+
+import type { MarkdownNode } from "../headless";
+import { useMarkdownContext, type NodeRendererProps } from "../MarkdownContext";
+import { MarkdownTheme } from "../theme";
+
+type TableData = {
+  headers: MarkdownNode[];
+  rows: MarkdownNode[][];
+  alignments: (string | undefined)[];
+};
+
+const extractTableData = (node: MarkdownNode): TableData => {
+  const headers: MarkdownNode[] = [];
+  const rows: MarkdownNode[][] = [];
+  const alignments: (string | undefined)[] = [];
+
+  const head = node.children?.find((c) => c.type === "table_head");
+  const body = node.children?.find((c) => c.type === "table_body");
+
+  // Extract Headers
+  head?.children?.forEach((row) => {
+    if (row.type === "table_row") {
+      row.children?.forEach((cell) => {
+        if (cell.type === "table_cell") {
+          headers.push(cell);
+          alignments.push(cell.align);
+        }
+      });
+    }
+  });
+
+  // Extract Body Rows
+  body?.children?.forEach((row) => {
+    if (row.type === "table_row") {
+      const rowCells: MarkdownNode[] = [];
+      row.children?.forEach((cell) => {
+        if (cell.type === "table_cell") {
+          rowCells.push(cell);
+        }
+      });
+      if (rowCells.length > 0) rows.push(rowCells);
+    }
+  });
+
+  return { headers, rows, alignments };
+};
+
+interface TableRendererProps {
+  node: MarkdownNode;
+  Renderer: ComponentType<NodeRendererProps>;
+}
+
+export const TableRenderer: FC<TableRendererProps> = ({
+  node,
+  Renderer,
+}) => {
+  const { theme } = useMarkdownContext();
+  const { headers, rows, alignments } = useMemo(
+    () => extractTableData(node),
+    [node]
+  );
+
+  const columnCount = headers.length;
+  const styles = useMemo(() => createTableStyles(theme), [theme]);
+
+  const [columnWidths, setColumnWidths] = useState<number[]>([]);
+  const measuredWidths = useRef<Map<string, number>>(new Map());
+  const hasAppliedWidths = useRef(false);
+
+  const calculateAndApplyWidths = useCallback(() => {
+    if (columnCount === 0) return;
+
+    const finalWidths = new Array(columnCount).fill(0);
+    for (let col = 0; col < columnCount; col++) {
+      let maxWidth = measuredWidths.current.get(`h-${col}`) || 0;
+      for (let row = 0; row < rows.length; row++) {
+        const cellWidth = measuredWidths.current.get(`c-${row}-${col}`) || 0;
+        if (cellWidth > maxWidth) maxWidth = cellWidth;
+      }
+      // Apply padding and min-width
+      finalWidths[col] = Math.max(maxWidth + 32, 100);
+    }
+
+    setColumnWidths(finalWidths);
+    hasAppliedWidths.current = true;
+  }, [columnCount, rows.length]);
+
+  useEffect(() => {
+    if (columnCount === 0) return;
+
+    const timer = setTimeout(() => {
+      if (!hasAppliedWidths.current) {
+        calculateAndApplyWidths();
+      }
+    }, 400);
+
+    return () => clearTimeout(timer);
+  }, [columnCount, rows.length, calculateAndApplyWidths]);
+
+  const onLayout = (key: string, width: number) => {
+    if (hasAppliedWidths.current) return;
+    measuredWidths.current.set(key, width);
+
+    const expectedCount = columnCount + rows.length * columnCount;
+    if (measuredWidths.current.size >= expectedCount) {
+      calculateAndApplyWidths();
+    }
+  };
+
+  const getAlignStyle = (index: number) => {
+    const align = alignments[index];
+    if (align === "center")
+      return { alignItems: "center", textAlign: "center" } as const;
+    if (align === "right")
+      return { alignItems: "flex-end", textAlign: "right" } as const;
+    return { alignItems: "flex-start", textAlign: "left" } as const;
+  };
+
+  if (columnCount === 0) return null;
+
+  return (
+    <View style={styles.container}>
+      {!hasAppliedWidths.current && (
+        <View style={styles.measurementWrapper} pointerEvents="none">
+          <View style={styles.row}>
+            {headers.map((cell, i) => (
+              <View
+                key={`m-h-${i}`}
+                onLayout={(e) => onLayout(`h-${i}`, e.nativeEvent.layout.width)}
+                style={styles.measuringCell}
+              >
+                <CellContent node={cell} Renderer={Renderer} styles={styles} />
+              </View>
+            ))}
+          </View>
+          {rows.map((row, ri) => (
+            <View key={`m-r-${ri}`} style={styles.row}>
+              {row.map((cell, ci) => (
+                <View
+                  key={`m-c-${ri}-${ci}`}
+                  onLayout={(e) =>
+                    onLayout(`c-${ri}-${ci}`, e.nativeEvent.layout.width)
+                  }
+                  style={styles.measuringCell}
+                >
+                  <CellContent
+                    node={cell}
+                    Renderer={Renderer}
+                    styles={styles}
+                  />
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+      )}
+
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={true}
+        bounces={false}
+        style={styles.tableScroll}
+      >
+        <View style={styles.table}>
+          {/* Header */}
+          <View style={styles.headerRow}>
+            {headers.map((cell, i) => (
+              <View
+                key={`h-${i}`}
+                style={[
+                  styles.headerCell,
+                  { width: columnWidths[i] || 120 },
+                  getAlignStyle(i),
+                  i === columnCount - 1 && styles.lastCell,
+                ]}
+              >
+                <CellContent
+                  node={cell}
+                  Renderer={Renderer}
+                  styles={styles}
+                  textStyle={styles.headerText}
+                />
+              </View>
+            ))}
+          </View>
+
+          {/* Body */}
+          {rows.map((row, ri) => (
+            <View
+              key={`r-${ri}`}
+              style={[
+                styles.bodyRow,
+                ri === rows.length - 1 && styles.lastRow,
+                ri % 2 === 1 && styles.oddRow,
+              ]}
+            >
+              {row.map((cell, ci) => (
+                <View
+                  key={`c-${ri}-${ci}`}
+                  style={[
+                    styles.bodyCell,
+                    { width: columnWidths[ci] || 120 },
+                    getAlignStyle(ci),
+                    ci === columnCount - 1 && styles.lastCell,
+                  ]}
+                >
+                  <CellContent
+                    node={cell}
+                    Renderer={Renderer}
+                    styles={styles}
+                    textStyle={styles.cellText}
+                  />
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+const CellContent: FC<{
+  node: MarkdownNode;
+  Renderer: ComponentType<NodeRendererProps>;
+  styles: ReturnType<typeof createTableStyles>;
+  textStyle?: StyleProp<TextStyle>;
+}> = ({ node, Renderer, styles, textStyle }) => {
+  if (!node.children || node.children.length === 0) {
+    return <Text style={textStyle}>{node.content ?? ""}</Text>;
+  }
+
+  return (
+    <View style={styles.cellContentWrapper}>
+      {node.children.map((child, idx) => (
+        <Renderer
+          key={idx}
+          node={child}
+          depth={0}
+          inListItem={false}
+          parentIsText={false}
+        />
+      ))}
+    </View>
+  );
+};
+
+const createTableStyles = (theme: MarkdownTheme) => {
+  const colors = theme?.colors || {};
+  return StyleSheet.create({
+    container: {
+      marginVertical: 12,
+    },
+    measurementWrapper: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      opacity: 0,
+      zIndex: -1,
+    },
+    measuringCell: {
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      alignSelf: "flex-start",
+    },
+    tableScroll: {
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: colors.tableBorder || "#374151",
+    },
+    table: {
+      backgroundColor: colors.surface || "#111827",
+    },
+    row: {
+      flexDirection: "row",
+    },
+    headerRow: {
+      flexDirection: "row",
+      backgroundColor: colors.tableHeader || "#1f2937",
+      borderBottomWidth: 2,
+      borderBottomColor: colors.tableBorder || "#374151",
+    },
+    bodyRow: {
+      flexDirection: "row",
+      borderBottomWidth: 1,
+      borderBottomColor: colors.tableBorder || "#374151",
+    },
+    oddRow: {
+      backgroundColor: colors.tableRowOdd || "rgba(255,255,255,0.02)",
+    },
+    lastRow: {
+      borderBottomWidth: 0,
+    },
+    headerCell: {
+      paddingVertical: 14,
+      paddingHorizontal: 16,
+      borderRightWidth: 1,
+      borderRightColor: colors.tableBorder || "#374151",
+    },
+    bodyCell: {
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      borderRightWidth: 1,
+      borderRightColor: colors.tableBorder || "#374151",
+      justifyContent: "center",
+    },
+    lastCell: {
+      borderRightWidth: 0,
+    },
+    headerText: {
+      color: colors.tableHeaderText || "#9ca3af",
+      fontSize: 12,
+      fontWeight: "700",
+      textTransform: "uppercase",
+      letterSpacing: 1,
+    },
+    cellText: {
+      color: colors.text || "#e5e7eb",
+      fontSize: 14,
+      lineHeight: 20,
+    },
+    cellContentWrapper: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      alignItems: "center",
+    },
+  });
+};

package/src/specs/MarkdownSession.nitro.ts

@@ -0,0 +1,16 @@
+import type { HybridObject } from "react-native-nitro-modules";
+
+export interface MarkdownSession
+  extends HybridObject<{ ios: "swift"; android: "kotlin" }> {
+  // Buffer operations
+  append(chunk: string): void;
+  clear(): void;
+  getAllText(): string;
+
+  // Karaoke highlighting (native rendering)
+  // Nitro generates getter/setter for properties automatically
+  highlightPosition: number;
+
+  // Listener for view updates
+  addListener(listener: () => void): () => void;
+}

package/src/theme.ts

@@ -0,0 +1,52 @@
+/**
+ * Default theme configuration for the Markdown components.
+ * Optimized for a modern dark mode aesthetic.
+ */
+export const defaultMarkdownTheme = {
+  /** Colors used throughout the markdown renderer */
+  colors: {
+    text: "#e0e0e0",
+    textMuted: "#888",
+    heading: "#f0f0f0",
+    link: "#60a5fa",
+    code: "#fbbf24",
+    codeBackground: "#1a1a2e",
+    blockquote: "#3b82f6",
+    border: "#252525",
+    surface: "#151515",
+    surfaceLight: "#1a1a1a",
+    accent: "#4ade80",
+    tableBorder: "#334155",
+    tableHeader: "#0f172a",
+    tableHeaderText: "#94a3b8",
+    tableRowEven: "#0f172a",
+    tableRowOdd: "#1e293b",
+  },
+  /** Standard spacing increments */
+  spacing: {
+    xs: 4,
+    s: 8,
+    m: 12,
+    l: 16,
+    xl: 24,
+  },
+  /** Font sizes for different text elements */
+  fontSizes: {
+    xs: 12,
+    s: 14,
+    m: 16,
+    l: 18,
+    xl: 22,
+    h1: 32,
+    h2: 26,
+    h3: 22,
+    h4: 18,
+    h5: 16,
+    h6: 14,
+  },
+};
+
+/**
+ * Type definition for the Markdown theme.
+ */
+export type MarkdownTheme = typeof defaultMarkdownTheme;

package/src/use-markdown-stream.ts

@@ -0,0 +1,83 @@
+import { useRef, useCallback, useState, useEffect } from "react";
+import { createMarkdownSession } from "./MarkdownSession";
+
+export type MarkdownSession = ReturnType<typeof createMarkdownSession>;
+
+export function useMarkdownSession() {
+  const sessionRef = useRef<MarkdownSession | null>(null);
+  if (sessionRef.current === null) {
+    sessionRef.current = createMarkdownSession();
+  }
+
+  const [isStreaming, setIsStreaming] = useState(false);
+
+  useEffect(() => {
+    const session = sessionRef.current!;
+    return () => {
+      session.clear();
+    };
+  }, []);
+
+  const stop = useCallback(() => {
+    setIsStreaming(false);
+  }, []);
+
+  const clear = useCallback(() => {
+    stop();
+    sessionRef.current!.clear();
+    sessionRef.current!.highlightPosition = 0;
+  }, [stop]);
+
+  const setHighlight = useCallback((position: number) => {
+    sessionRef.current!.highlightPosition = position;
+  }, []);
+
+  const getSession = useCallback(() => sessionRef.current!, []);
+
+  return {
+    getSession,
+    isStreaming,
+    setIsStreaming,
+    stop,
+    clear,
+    setHighlight,
+  };
+}
+
+export function useStream(timestamps?: Record<number, number>) {
+  const engine = useMarkdownSession();
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const sortedKeys = useRef<number[]>([]);
+  useEffect(() => {
+    if (timestamps) {
+      sortedKeys.current = Object.keys(timestamps)
+        .map(Number)
+        .sort((a, b) => a - b);
+    }
+  }, [timestamps]);
+
+  const sync = useCallback(
+    (currentTimeMs: number) => {
+      if (!timestamps) return;
+
+      let wordIdx = 0;
+      for (const idx of sortedKeys.current) {
+        if (currentTimeMs >= timestamps[idx]) {
+          wordIdx = idx + 1;
+        } else {
+          break;
+        }
+      }
+      engine.setHighlight(wordIdx);
+    },
+    [timestamps, engine]
+  );
+
+  return {
+    ...engine,
+    isPlaying,
+    setIsPlaying,
+    sync,
+  };
+}

package/ios/NitroMarkdown-Bridging-Header.h

@@ -1,14 +0,0 @@
-//
-//  NitroMarkdown-Bridging-Header.h
-//  react-native-nitro-markdown
-//
-//  Bridging header for Swift/ObjC interop (if needed)
-//
-
-#ifndef NitroMarkdown_Bridging_Header_h
-#define NitroMarkdown_Bridging_Header_h
-
-// Add any headers you want to expose to Swift here
-
-#endif /* NitroMarkdown_Bridging_Header_h */
-

package/lib/commonjs/MarkdownJS.reference.js

@@ -1,114 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.JSMarkdownParser = exports.JSINitroMarkdownParser = exports.HybridMarkdownParser = void 0;
-// Pure JavaScript implementation using JSI
-class JSMarkdownParser {
-  parseImpl(text, options) {
-    // Simple regex-based parser for comparison
-    // This is much slower than the C++ version but demonstrates JSI usage
-    const root = {
-      type: "document",
-      children: []
-    };
-    const lines = text.split("\n");
-    let i = 0;
-    while (i < lines.length) {
-      const line = lines[i].trim();
-      if (!line) {
-        i++;
-        continue;
-      }
-
-      // Headers
-      const headerMatch = line.match(/^(#{1,6})\s+(.+)$/);
-      if (headerMatch) {
-        root.children.push({
-          type: "heading",
-          level: headerMatch[1].length,
-          children: [{
-            type: "text",
-            content: headerMatch[2]
-          }]
-        });
-        i++;
-        continue;
-      }
-
-      // Bold
-      const boldMatch = line.match(/\*\*(.+?)\*\*/);
-      if (boldMatch) {
-        root.children.push({
-          type: "paragraph",
-          children: [{
-            type: "bold",
-            children: [{
-              type: "text",
-              content: boldMatch[1]
-            }]
-          }]
-        });
-        i++;
-        continue;
-      }
-
-      // Default paragraph
-      root.children.push({
-        type: "paragraph",
-        children: [{
-          type: "text",
-          content: line
-        }]
-      });
-      i++;
-    }
-    return root;
-  }
-  parse(text, options = {
-    gfm: true,
-    math: true
-  }) {
-    return this.parseImpl(text, options);
-  }
-}
-
-// JSI-enabled version using Nitro but with JS implementation
-exports.JSMarkdownParser = JSMarkdownParser;
-class JSINitroMarkdownParser {
-  parse(text, options = {
-    gfm: true,
-    math: true
-  }) {
-    // This would use JSI to call into JavaScriptCore
-    // For now, we'll simulate it
-    const parser = new JSMarkdownParser();
-    return parser.parse(text, options);
-  }
-}
-
-// Hybrid approach: C++ for complex parsing, JS for simple cases
-exports.JSINitroMarkdownParser = JSINitroMarkdownParser;
-class HybridMarkdownParser {
-  constructor() {
-    // In real implementation, this would be the Nitro C++ parser
-    this.cppParser = null;
-    this.jsParser = new JSMarkdownParser();
-  }
-  parse(text, options = {
-    gfm: true,
-    math: true
-  }) {
-    // Use C++ parser for complex cases, JS for simple
-    if (text.length > 1000 || options.gfm || options.math) {
-      // Would call C++ parser via Nitro
-      return this.jsParser.parse(text, options);
-    } else {
-      // Use JS parser for simple cases
-      return this.jsParser.parse(text, options);
-    }
-  }
-}
-exports.HybridMarkdownParser = HybridMarkdownParser;
-//# sourceMappingURL=MarkdownJS.reference.js.map

package/lib/commonjs/MarkdownJS.reference.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["JSMarkdownParser","parseImpl","text","options","root","type","children","lines","split","i","length","line","trim","headerMatch","match","push","level","content","boldMatch","parse","gfm","math","exports","JSINitroMarkdownParser","parser","HybridMarkdownParser","constructor","cppParser","jsParser"],"sourceRoot":"../../src","sources":["MarkdownJS.reference.ts"],"mappings":";;;;;;AAqBA;AACO,MAAMA,gBAAgB,CAAC;EACpBC,SAASA,CAACC,IAAY,EAAEC,OAAsB,EAAgB;IACpE;IACA;IACA,MAAMC,IAAkB,GAAG;MAAEC,IAAI,EAAE,UAAU;MAAEC,QAAQ,EAAE;IAAG,CAAC;IAC7D,MAAMC,KAAK,GAAGL,IAAI,CAACM,KAAK,CAAC,IAAI,CAAC;IAC9B,IAAIC,CAAC,GAAG,CAAC;IAET,OAAOA,CAAC,GAAGF,KAAK,CAACG,MAAM,EAAE;MACvB,MAAMC,IAAI,GAAGJ,KAAK,CAACE,CAAC,CAAC,CAACG,IAAI,CAAC,CAAC;MAC5B,IAAI,CAACD,IAAI,EAAE;QACTF,CAAC,EAAE;QACH;MACF;;MAEA;MACA,MAAMI,WAAW,GAAGF,IAAI,CAACG,KAAK,CAAC,mBAAmB,CAAC;MACnD,IAAID,WAAW,EAAE;QACfT,IAAI,CAACE,QAAQ,CAAES,IAAI,CAAC;UAClBV,IAAI,EAAE,SAAS;UACfW,KAAK,EAAEH,WAAW,CAAC,CAAC,CAAC,CAACH,MAAM;UAC5BJ,QAAQ,EAAE,CAAC;YAAED,IAAI,EAAE,MAAM;YAAEY,OAAO,EAAEJ,WAAW,CAAC,CAAC;UAAE,CAAC;QACtD,CAAC,CAAC;QACFJ,CAAC,EAAE;QACH;MACF;;MAEA;MACA,MAAMS,SAAS,GAAGP,IAAI,CAACG,KAAK,CAAC,eAAe,CAAC;MAC7C,IAAII,SAAS,EAAE;QACbd,IAAI,CAACE,QAAQ,CAAES,IAAI,CAAC;UAClBV,IAAI,EAAE,WAAW;UACjBC,QAAQ,EAAE,CACR;YACED,IAAI,EAAE,MAAM;YACZC,QAAQ,EAAE,CAAC;cAAED,IAAI,EAAE,MAAM;cAAEY,OAAO,EAAEC,SAAS,CAAC,CAAC;YAAE,CAAC;UACpD,CAAC;QAEL,CAAC,CAAC;QACFT,CAAC,EAAE;QACH;MACF;;MAEA;MACAL,IAAI,CAACE,QAAQ,CAAES,IAAI,CAAC;QAClBV,IAAI,EAAE,WAAW;QACjBC,QAAQ,EAAE,CAAC;UAAED,IAAI,EAAE,MAAM;UAAEY,OAAO,EAAEN;QAAK,CAAC;MAC5C,CAAC,CAAC;MACFF,CAAC,EAAE;IACL;IAEA,OAAOL,IAAI;EACb;EAEAe,KAAKA,CACHjB,IAAY,EACZC,OAAsB,GAAG;IAAEiB,GAAG,EAAE,IAAI;IAAEC,IAAI,EAAE;EAAK,CAAC,EACpC;IACd,OAAO,IAAI,CAACpB,SAAS,CAACC,IAAI,EAAEC,OAAO,CAAC;EACtC;AACF;;AAEA;AAAAmB,OAAA,CAAAtB,gBAAA,GAAAA,gBAAA;AACO,MAAMuB,sBAAsB,CAAC;EAClCJ,KAAKA,CACHjB,IAAY,EACZC,OAAsB,GAAG;IAAEiB,GAAG,EAAE,IAAI;IAAEC,IAAI,EAAE;EAAK,CAAC,EACpC;IACd;IACA;IACA,MAAMG,MAAM,GAAG,IAAIxB,gBAAgB,CAAC,CAAC;IACrC,OAAOwB,MAAM,CAACL,KAAK,CAACjB,IAAI,EAAEC,OAAO,CAAC;EACpC;AACF;;AAEA;AAAAmB,OAAA,CAAAC,sBAAA,GAAAA,sBAAA;AACO,MAAME,oBAAoB,CAAC;EAIhCC,WAAWA,CAAA,EAAG;IACZ;IACA,IAAI,CAACC,SAAS,GAAG,IAAI;IACrB,IAAI,CAACC,QAAQ,GAAG,IAAI5B,gBAAgB,CAAC,CAAC;EACxC;EAEAmB,KAAKA,CACHjB,IAAY,EACZC,OAAsB,GAAG;IAAEiB,GAAG,EAAE,IAAI;IAAEC,IAAI,EAAE;EAAK,CAAC,EACpC;IACd;IACA,IAAInB,IAAI,CAACQ,MAAM,GAAG,IAAI,IAAIP,OAAO,CAACiB,GAAG,IAAIjB,OAAO,CAACkB,IAAI,EAAE;MACrD;MACA,OAAO,IAAI,CAACO,QAAQ,CAACT,KAAK,CAACjB,IAAI,EAAEC,OAAO,CAAC;IAC3C,CAAC,MAAM;MACL;MACA,OAAO,IAAI,CAACyB,QAAQ,CAACT,KAAK,CAACjB,IAAI,EAAEC,OAAO,CAAC;IAC3C;EACF;AACF;AAACmB,OAAA,CAAAG,oBAAA,GAAAA,oBAAA","ignoreList":[]}