react-native-nitro-markdown 0.1.2 → 0.3.0

package/src/renderers/paragraph.tsx

@@ -0,0 +1,47 @@
+import { ReactNode, useMemo, type FC } from "react";
+import { View, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
+import { useMarkdownContext } from "../MarkdownContext";
+
+interface ParagraphProps {
+  children: ReactNode;
+  inListItem?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const Paragraph: FC<ParagraphProps> = ({
+  children,
+  inListItem,
+  style,
+}) => {
+  const { theme } = useMarkdownContext();
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        paragraph: {
+          flexDirection: "row",
+          flexWrap: "wrap",
+          alignItems: "baseline",
+          marginBottom: theme.spacing.l,
+          gap: 0,
+        },
+        paragraphInListItem: {
+          marginBottom: 0,
+          marginTop: 0,
+          flexShrink: 1,
+        },
+      }),
+    [theme]
+  );
+
+  return (
+    <View
+      style={[
+        styles.paragraph,
+        inListItem && styles.paragraphInListItem,
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};

package/src/renderers/table.tsx

@@ -0,0 +1,370 @@
+import {
+  useMemo,
+  useRef,
+  useReducer,
+  useCallback,
+  type FC,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+  type LayoutChangeEvent,
+} 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)[] = [];
+
+  for (const child of node.children ?? []) {
+    if (child.type === "table_head") {
+      for (const row of child.children ?? []) {
+        if (row.type === "table_row") {
+          for (const cell of row.children ?? []) {
+            headers.push(cell);
+            alignments.push(cell.align);
+          }
+        }
+      }
+    } else if (child.type === "table_body") {
+      for (const row of child.children ?? []) {
+        if (row.type === "table_row") {
+          const rowCells: MarkdownNode[] = [];
+          for (const cell of row.children ?? []) {
+            rowCells.push(cell);
+          }
+          rows.push(rowCells);
+        }
+      }
+    }
+  }
+
+  return { headers, rows, alignments };
+};
+
+interface TableRendererProps {
+  node: MarkdownNode;
+  Renderer: ComponentType<NodeRendererProps>;
+  style?: ViewStyle;
+}
+
+type ColumnWidthsAction = {
+  type: "SET_WIDTHS";
+  payload: number[];
+};
+
+const columnWidthsReducer = (state: number[], action: ColumnWidthsAction) => {
+  if (action.type === "SET_WIDTHS") return action.payload;
+  return state;
+};
+
+export const TableRenderer: FC<TableRendererProps> = ({
+  node,
+  Renderer,
+  style,
+}) => {
+  const { theme } = useMarkdownContext();
+  const { headers, rows, alignments } = useMemo(
+    () => extractTableData(node),
+    [node]
+  );
+
+  const columnCount = headers.length;
+  const styles = useMemo(() => createTableStyles(theme), [theme]);
+
+  const [columnWidths, dispatch] = useReducer(columnWidthsReducer, []);
+  const measuredWidths = useRef<Map<string, number>>(new Map());
+  const measuredCells = useRef<Set<string>>(new Set());
+  const widthsCalculated = useRef(false);
+
+  const onCellLayout = useCallback(
+    (cellKey: string, width: number) => {
+      measuredWidths.current.set(cellKey, width);
+      measuredCells.current.add(cellKey);
+
+      const expectedCells = new Set<string>();
+      for (let col = 0; col < columnCount; col++) {
+        expectedCells.add(`header-${col}`);
+      }
+      for (let row = 0; row < rows.length; row++) {
+        for (let col = 0; col < columnCount; col++) {
+          expectedCells.add(`cell-${row}-${col}`);
+        }
+      }
+
+      const allCellsMeasured = [...expectedCells].every((key) =>
+        measuredCells.current.has(key)
+      );
+      if (!allCellsMeasured || widthsCalculated.current) return;
+
+      const maxWidths: number[] = new Array(columnCount).fill(0);
+
+      for (let col = 0; col < columnCount; col++) {
+        const headerWidth = measuredWidths.current.get(`header-${col}`);
+        if (headerWidth && headerWidth > 0) {
+          maxWidths[col] = Math.max(maxWidths[col], headerWidth);
+        }
+
+        for (let row = 0; row < rows.length; row++) {
+          const cellWidth = measuredWidths.current.get(`cell-${row}-${col}`);
+          if (cellWidth && cellWidth > 0) {
+            maxWidths[col] = Math.max(maxWidths[col], cellWidth);
+          }
+        }
+
+        maxWidths[col] = Math.max(maxWidths[col] + 8, 60);
+      }
+
+      widthsCalculated.current = true;
+      dispatch({ type: "SET_WIDTHS", payload: maxWidths });
+    },
+    [columnCount, rows.length]
+  );
+
+  const getAlignment = (
+    index: number
+  ): "flex-start" | "center" | "flex-end" => {
+    const align = alignments[index];
+    if (align === "center") return "center";
+    if (align === "right") return "flex-end";
+    return "flex-start";
+  };
+
+  if (columnCount === 0) return null;
+
+  const hasWidths = columnWidths.length === columnCount;
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.measurementContainer}>
+        <View style={styles.measurementRow}>
+          {headers.map((cell, colIndex) => (
+            <View
+              key={`measure-header-${colIndex}`}
+              style={styles.measurementCell}
+              onLayout={(e: LayoutChangeEvent) => {
+                onCellLayout(`header-${colIndex}`, e.nativeEvent.layout.width);
+              }}
+            >
+              <CellContent node={cell} Renderer={Renderer} styles={styles} />
+            </View>
+          ))}
+        </View>
+        {rows.map((row, rowIndex) => (
+          <View key={`measure-row-${rowIndex}`} style={styles.measurementRow}>
+            {row.map((cell, colIndex) => (
+              <View
+                key={`measure-cell-${rowIndex}-${colIndex}`}
+                style={styles.measurementCell}
+                onLayout={(e: LayoutChangeEvent) => {
+                  onCellLayout(
+                    `cell-${rowIndex}-${colIndex}`,
+                    e.nativeEvent.layout.width
+                  );
+                }}
+              >
+                <CellContent node={cell} Renderer={Renderer} styles={styles} />
+              </View>
+            ))}
+          </View>
+        ))}
+      </View>
+
+      {hasWidths && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator
+          style={styles.tableScroll}
+          bounces={false}
+        >
+          <View style={styles.table}>
+            <View style={styles.headerRow}>
+              {headers.map((cell, colIndex) => (
+                <View
+                  key={`header-${colIndex}`}
+                  style={[
+                    styles.headerCell,
+                    {
+                      width: columnWidths[colIndex],
+                      alignItems: getAlignment(colIndex),
+                    },
+                    colIndex === columnCount - 1 && styles.lastCell,
+                  ]}
+                >
+                  <CellContent
+                    node={cell}
+                    Renderer={Renderer}
+                    styles={styles}
+                    textStyle={styles.headerText}
+                  />
+                </View>
+              ))}
+            </View>
+
+            {rows.map((row, rowIndex) => (
+              <View
+                key={`row-${rowIndex}`}
+                style={[
+                  styles.bodyRow,
+                  rowIndex === rows.length - 1 && styles.lastRow,
+                  rowIndex % 2 === 1 && styles.oddRow,
+                ]}
+              >
+                {row.map((cell, colIndex) => (
+                  <View
+                    key={`cell-${rowIndex}-${colIndex}`}
+                    style={[
+                      styles.bodyCell,
+                      {
+                        width: columnWidths[colIndex],
+                        alignItems: getAlignment(colIndex),
+                      },
+                      colIndex === 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 || {};
+  const borderRadius = theme?.borderRadius || { m: 8 };
+
+  return StyleSheet.create({
+    container: {
+      marginVertical: theme.spacing.s,
+    },
+    measurementContainer: {
+      position: "absolute",
+      opacity: 0,
+      pointerEvents: "none",
+      left: -9999,
+    },
+    measurementRow: {
+      flexDirection: "row",
+    },
+    measurementCell: {
+      paddingVertical: 10,
+      paddingHorizontal: 12,
+    },
+    tableScroll: {
+      flexGrow: 0,
+    },
+    table: {
+      borderRadius: borderRadius.m,
+      overflow: "hidden",
+      borderWidth: 1,
+      borderColor: colors.tableBorder || "#374151",
+      backgroundColor: colors.surface || "#111827",
+    },
+    headerRow: {
+      flexDirection: "row",
+      backgroundColor: colors.tableHeader || "#1f2937",
+      borderBottomWidth: 1,
+      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: {
+      flexShrink: 0,
+      paddingVertical: 10,
+      paddingHorizontal: 12,
+      minWidth: 60,
+      borderRightWidth: 1,
+      borderRightColor: colors.tableBorder || "#374151",
+    },
+    bodyCell: {
+      flexShrink: 0,
+      paddingVertical: 10,
+      paddingHorizontal: 12,
+      minWidth: 60,
+      borderRightWidth: 1,
+      borderRightColor: colors.tableBorder || "#374151",
+      justifyContent: "center",
+    },
+    lastCell: {
+      borderRightWidth: 0,
+    },
+    headerText: {
+      color: colors.tableHeaderText || "#9ca3af",
+      fontSize: 12,
+      fontWeight: "600",
+      fontFamily: theme.fontFamilies?.regular,
+    },
+    cellText: {
+      color: colors.text || "#e5e7eb",
+      fontSize: 14,
+      lineHeight: 20,
+      fontFamily: theme.fontFamilies?.regular,
+    },
+    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,243 @@
+import type { TextStyle, ViewStyle } from "react-native";
+import type { MarkdownNode } from "./headless";
+
+export interface MarkdownTheme {
+  colors: {
+    text: string | undefined;
+    textMuted: string | undefined;
+    heading: string | undefined;
+    link: string | undefined;
+    code: string | undefined;
+    codeBackground: string | undefined;
+    codeLanguage: string | undefined;
+    blockquote: string | undefined;
+    border: string | undefined;
+    surface: string | undefined;
+    surfaceLight: string | undefined;
+    accent: string | undefined;
+    tableBorder: string | undefined;
+    tableHeader: string | undefined;
+    tableHeaderText: string | undefined;
+    tableRowEven: string | undefined;
+    tableRowOdd: string | undefined;
+  };
+  spacing: {
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+  };
+  fontSizes: {
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    h1: number;
+    h2: number;
+    h3: number;
+    h4: number;
+    h5: number;
+    h6: number;
+  };
+  fontFamilies: {
+    regular: string | undefined;
+    heading: string | undefined;
+    mono: string | undefined;
+  };
+  borderRadius: {
+    s: number;
+    m: number;
+    l: number;
+  };
+  showCodeLanguage: boolean;
+}
+
+export const defaultMarkdownTheme: MarkdownTheme = {
+  colors: {
+    text: "#e0e0e0",
+    textMuted: "#888",
+    heading: "#f0f0f0",
+    link: "#60a5fa",
+    code: "#fbbf24",
+    codeBackground: "#1a1a2e",
+    codeLanguage: "#4ade80",
+    blockquote: "#3b82f6",
+    border: "#252525",
+    surface: "#151515",
+    surfaceLight: "#1a1a1a",
+    accent: "#4ade80",
+    tableBorder: "#334155",
+    tableHeader: "#0f172a",
+    tableHeaderText: "#94a3b8",
+    tableRowEven: "#0f172a",
+    tableRowOdd: "#1e293b",
+  },
+  spacing: {
+    xs: 4,
+    s: 8,
+    m: 12,
+    l: 16,
+    xl: 24,
+  },
+  fontSizes: {
+    xs: 12,
+    s: 14,
+    m: 16,
+    l: 18,
+    xl: 22,
+    h1: 32,
+    h2: 26,
+    h3: 22,
+    h4: 18,
+    h5: 16,
+    h6: 14,
+  },
+  fontFamilies: {
+    regular: undefined,
+    heading: undefined,
+    mono: undefined,
+  },
+  borderRadius: {
+    s: 4,
+    m: 8,
+    l: 12,
+  },
+  showCodeLanguage: true,
+};
+
+export type PartialMarkdownTheme = {
+  [K in keyof MarkdownTheme]?: K extends "showCodeLanguage"
+    ? MarkdownTheme[K]
+    : Partial<MarkdownTheme[K]>;
+};
+
+export type NodeStyleOverrides = Partial<
+  Record<MarkdownNode["type"], ViewStyle | TextStyle>
+>;
+
+export type StylingStrategy = "opinionated" | "minimal";
+
+export const minimalMarkdownTheme: MarkdownTheme = {
+  colors: {
+    text: undefined,
+    textMuted: undefined,
+    heading: undefined,
+    link: "#0066cc",
+    code: undefined,
+    codeBackground: "transparent",
+    codeLanguage: "#888888",
+    blockquote: "#cccccc",
+    border: "#cccccc",
+    surface: "transparent",
+    surfaceLight: "transparent",
+    accent: "#0066cc",
+    tableBorder: "#cccccc",
+    tableHeader: "transparent",
+    tableHeaderText: undefined,
+    tableRowEven: "transparent",
+    tableRowOdd: "transparent",
+  },
+  spacing: {
+    xs: 0,
+    s: 0,
+    m: 0,
+    l: 0,
+    xl: 0,
+  },
+  fontSizes: {
+    xs: 12,
+    s: 14,
+    m: 16,
+    l: 18,
+    xl: 22,
+    h1: 32,
+    h2: 26,
+    h3: 22,
+    h4: 18,
+    h5: 16,
+    h6: 14,
+  },
+  fontFamilies: {
+    regular: undefined,
+    heading: undefined,
+    mono: undefined,
+  },
+  borderRadius: {
+    s: 0,
+    m: 0,
+    l: 0,
+  },
+  showCodeLanguage: false,
+};
+
+export const lightMarkdownTheme: MarkdownTheme = {
+  colors: {
+    text: "#1a1a1a",
+    textMuted: "#6b7280",
+    heading: "#000000",
+    link: "#2563eb",
+    code: "#ea580c",
+    codeBackground: "#f3f4f6",
+    codeLanguage: "#10b981",
+    blockquote: "#3b82f6",
+    border: "#e5e7eb",
+    surface: "#ffffff",
+    surfaceLight: "#f9fafb",
+    accent: "#10b981",
+    tableBorder: "#e5e7eb",
+    tableHeader: "#f3f4f6",
+    tableHeaderText: "#6b7280",
+    tableRowEven: "#ffffff",
+    tableRowOdd: "#f9fafb",
+  },
+  spacing: {
+    xs: 4,
+    s: 8,
+    m: 12,
+    l: 16,
+    xl: 24,
+  },
+  fontSizes: {
+    xs: 12,
+    s: 14,
+    m: 16,
+    l: 18,
+    xl: 22,
+    h1: 32,
+    h2: 26,
+    h3: 22,
+    h4: 18,
+    h5: 16,
+    h6: 14,
+  },
+  fontFamilies: {
+    regular: undefined,
+    heading: undefined,
+    mono: undefined,
+  },
+  borderRadius: {
+    s: 4,
+    m: 8,
+    l: 12,
+  },
+  showCodeLanguage: true,
+};
+
+export const darkMarkdownTheme = defaultMarkdownTheme;
+
+export const mergeThemes = (
+  base: MarkdownTheme,
+  partial?: PartialMarkdownTheme
+): MarkdownTheme => {
+  if (!partial) return base;
+  return {
+    colors: { ...base.colors, ...partial.colors },
+    spacing: { ...base.spacing, ...partial.spacing },
+    fontSizes: { ...base.fontSizes, ...partial.fontSizes },
+    fontFamilies: { ...base.fontFamilies, ...partial.fontFamilies },
+    borderRadius: { ...base.borderRadius, ...partial.borderRadius },
+    showCodeLanguage: partial.showCodeLanguage ?? base.showCodeLanguage,
+  };
+};