react-native-nitro-markdown 0.4.3 → 0.5.1

package/src/renderers/table.tsx

@@ -1,401 +1 @@
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useReducer,
-  useCallback,
-  type FC,
-  type ComponentType,
-} from "react";
-import {
-  View,
-  Text,
-  StyleSheet,
-  ScrollView,
-  Platform,
-  type StyleProp,
-  type TextStyle,
-  type ViewStyle,
-  type LayoutChangeEvent,
-} from "react-native";
-import { useMarkdownContext, type NodeRendererProps } from "../MarkdownContext";
-import type { MarkdownNode } from "../headless";
-import type { 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 };
-};
-
-type 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 expectedCellKeys = useMemo(() => {
-    const keys: string[] = [];
-
-    headers.forEach((_, colIndex) => {
-      keys.push(`header-${colIndex}`);
-    });
-
-    rows.forEach((row, rowIndex) => {
-      row.forEach((_, colIndex) => {
-        keys.push(`cell-${rowIndex}-${colIndex}`);
-      });
-    });
-
-    return keys;
-  }, [headers, rows]);
-
-  useEffect(() => {
-    measuredWidths.current.clear();
-    measuredCells.current.clear();
-    widthsCalculated.current = false;
-    dispatch({ type: "SET_WIDTHS", payload: [] });
-  }, [expectedCellKeys]);
-
-  const onCellLayout = useCallback(
-    (cellKey: string, width: number) => {
-      if (widthsCalculated.current) return;
-
-      measuredWidths.current.set(cellKey, width);
-      if (!measuredCells.current.has(cellKey)) {
-        measuredCells.current.add(cellKey);
-      }
-
-      if (measuredCells.current.size < expectedCellKeys.length) return;
-
-      const allCellsMeasured = expectedCellKeys.every((key) =>
-        measuredCells.current.has(key),
-      );
-      if (!allCellsMeasured) 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++) {
-          if (col >= rows[row].length) continue;
-          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, expectedCellKeys, rows],
-  );
-
-  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]}>
-      {!hasWidths && (
-        <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>
-      ) : null}
-    </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,
-      ...(Platform.OS === "android" && { includeFontPadding: false }),
-    },
-    cellText: {
-      color: colors.text || "#e5e7eb",
-      fontSize: 14,
-      lineHeight: 20,
-      fontFamily: theme.fontFamilies?.regular,
-      ...(Platform.OS === "android" && { includeFontPadding: false }),
-    },
-    cellContentWrapper: {
-      flexDirection: "row",
-      flexWrap: "wrap",
-      alignItems: "center",
-    },
-  });
-};
+export { TableRenderer } from "./table/index";

package/src/specs/MarkdownSession.nitro.ts

@@ -1,14 +1,28 @@
 import type { HybridObject } from "react-native-nitro-modules";
 
+export type MarkdownSessionListener = (from: number, to: number) => void;
+
 export interface MarkdownSession extends HybridObject<{
   ios: "swift";
   android: "kotlin";
 }> {
-  append(chunk: string): void;
+  append(chunk: string): number;
   clear(): void;
   getAllText(): string;
+  getLength(): number;
+  getTextRange(from: number, to: number): string;
 
   highlightPosition: number;
 
-  addListener(listener: () => void): () => void;
+  addListener(listener: MarkdownSessionListener): () => void;
+
+  /**
+   * Replaces the entire buffer with new text and notifies listeners with (0, newLength).
+   */
+  reset(text: string): void;
+  /**
+   * Replaces the text in [from, to) with the given text.
+   * Returns the new total buffer length.
+   */
+  replace(from: number, to: number, text: string): number;
 }

package/src/theme.ts

@@ -20,6 +20,16 @@ export type MarkdownTheme = {
     tableHeaderText: string | undefined;
     tableRowEven: string | undefined;
     tableRowOdd: string | undefined;
+    codeTokenColors?: {
+      keyword?: string;
+      string?: string;
+      comment?: string;
+      number?: string;
+      operator?: string;
+      punctuation?: string;
+      type?: string;
+      default?: string;
+    };
   };
   spacing: {
     xs: number;
@@ -74,6 +84,15 @@ export const defaultMarkdownTheme: MarkdownTheme = {
     tableHeaderText: "#64748b",
     tableRowEven: "transparent",
     tableRowOdd: "#f8fafc",
+    codeTokenColors: {
+      keyword: '#c792ea',
+      string: '#c3e88d',
+      comment: '#546e7a',
+      number: '#f78c6c',
+      operator: '#89ddff',
+      punctuation: '#89ddff',
+      type: '#ffcb6b',
+    },
   },
   spacing: {
     xs: 4,
@@ -129,8 +148,17 @@ export type PartialMarkdownTheme = {
       : MarkdownTheme[K];
 };
 
+type TextNodeType =
+  | "text" | "bold" | "italic" | "strikethrough" | "link"
+  | "code_inline" | "heading" | "paragraph" | "math_inline" | "html_inline";
+type ViewNodeType =
+  | "document" | "blockquote" | "code_block" | "horizontal_rule"
+  | "image" | "list" | "list_item" | "task_list_item" | "table"
+  | "table_head" | "table_body" | "table_row" | "table_cell"
+  | "math_block" | "html_block" | "line_break" | "soft_break";
+
 export type NodeStyleOverrides = Partial<
-  Record<MarkdownNode["type"], ViewStyle | TextStyle>
+  { [K in TextNodeType]: TextStyle } & { [K in ViewNodeType]: ViewStyle }
 >;
 
 export type StylingStrategy = "opinionated" | "minimal";

package/src/use-markdown-stream.ts

@@ -39,6 +39,14 @@ export function useMarkdownSession() {
 
   const getSession = useCallback(() => sessionRef.current!, []);
 
+  const reset = useCallback((text: string) => {
+    sessionRef.current!.reset(text);
+  }, []);
+
+  const replace = useCallback((from: number, to: number, text: string) => {
+    return sessionRef.current!.replace(from, to, text);
+  }, []);
+
   return {
     getSession,
     isStreaming,
@@ -46,6 +54,8 @@ export function useMarkdownSession() {
     stop,
     clear,
     setHighlight,
+    reset,
+    replace,
   };
 }
 

package/src/utils/code-highlight.ts

@@ -0,0 +1,102 @@
+export type TokenType =
+  | 'keyword'
+  | 'string'
+  | 'comment'
+  | 'number'
+  | 'operator'
+  | 'punctuation'
+  | 'type'
+  | 'default';
+
+export type HighlightedToken = { text: string; type: TokenType };
+export type CodeHighlighter = (language: string, code: string) => HighlightedToken[];
+
+const JS_KEYWORDS = new Set([
+  'const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while',
+  'class', 'extends', 'import', 'export', 'from', 'default', 'new', 'this',
+  'typeof', 'instanceof', 'null', 'undefined', 'true', 'false', 'async',
+  'await', 'try', 'catch', 'throw', 'switch', 'case', 'break', 'continue',
+  'type', 'interface', 'enum', 'as', 'in', 'of', 'void',
+]);
+
+const PYTHON_KEYWORDS = new Set([
+  'def', 'class', 'import', 'from', 'return', 'if', 'elif', 'else', 'for',
+  'while', 'try', 'except', 'finally', 'with', 'as', 'pass', 'break',
+  'continue', 'and', 'or', 'not', 'in', 'is', 'None', 'True', 'False',
+  'lambda', 'yield', 'async', 'await',
+]);
+
+const SHELL_KEYWORDS = new Set([
+  'if', 'then', 'else', 'elif', 'fi', 'for', 'do', 'done', 'while',
+  'case', 'esac', 'function', 'return', 'exit', 'echo', 'export',
+]);
+
+function getKeywords(language: string): Set<string> {
+  const lang = language.toLowerCase();
+  if (lang === 'python' || lang === 'py') return PYTHON_KEYWORDS;
+  if (lang === 'bash' || lang === 'sh' || lang === 'shell' || lang === 'zsh') return SHELL_KEYWORDS;
+  return JS_KEYWORDS; // default for js/ts/jsx/tsx/java/c/cpp etc.
+}
+
+// Tokenize a single line into tokens
+function tokenizeLine(line: string, language: string): HighlightedToken[] {
+  const keywords = getKeywords(language);
+  const tokens: HighlightedToken[] = [];
+
+  // Full-line comment detection
+  const trimmed = line.trimStart();
+  const lang = language.toLowerCase();
+  const isPythonLike = lang === 'python' || lang === 'py';
+  const isShellLike = lang === 'bash' || lang === 'sh' || lang === 'shell' || lang === 'zsh';
+
+  if (trimmed.startsWith('//') || trimmed.startsWith('#') && (isShellLike || isPythonLike)) {
+    return [{ text: line, type: 'comment' }];
+  }
+
+  // Simple token regex: strings, numbers, operators, identifiers, punctuation
+  const tokenRegex = /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)|(\b\d+(?:\.\d+)?\b)|(\/\/[^\n]*|#[^\n]*)|([a-zA-Z_$][a-zA-Z0-9_$]*)|([+\-*/%=<>!&|^~?:]+)|([()\[\]{},;.])|(\s+)|(.)/g;
+
+  let match: RegExpExecArray | null;
+  while ((match = tokenRegex.exec(line)) !== null) {
+    const [full, str, num, comment, ident, op, punct] = match;
+    if (str) {
+      tokens.push({ text: full, type: 'string' });
+    } else if (num) {
+      tokens.push({ text: full, type: 'number' });
+    } else if (comment) {
+      tokens.push({ text: full, type: 'comment' });
+    } else if (ident) {
+      const type: TokenType = keywords.has(ident)
+        ? 'keyword'
+        : /^[A-Z][A-Za-z0-9]*$/.test(ident)
+          ? 'type'
+          : 'default';
+      tokens.push({ text: full, type });
+    } else if (op) {
+      tokens.push({ text: full, type: 'operator' });
+    } else if (punct) {
+      tokens.push({ text: full, type: 'punctuation' });
+    } else {
+      tokens.push({ text: full, type: 'default' });
+    }
+  }
+
+  return tokens;
+}
+
+export function defaultHighlighter(language: string, code: string): HighlightedToken[] {
+  if (!language || language === 'text' || language === 'plain') {
+    return [{ text: code, type: 'default' }];
+  }
+
+  // Process line by line, re-inserting newlines as default tokens
+  const lines = code.split('\n');
+  const result: HighlightedToken[] = [];
+  for (let i = 0; i < lines.length; i++) {
+    result.push(...tokenizeLine(lines[i]!, language));
+    if (i < lines.length - 1) {
+      result.push({ text: '\n', type: 'default' });
+    }
+  }
+  return result;
+}