react-native-nitro-markdown 0.5.0 → 0.5.2

package/src/headless.ts

@@ -207,3 +207,15 @@ export const getFlattenedText = (node: MarkdownNode): string => {
       return childrenText;
   }
 };
+
+/**
+ * Recursively removes `beg`/`end` source offset fields from an AST.
+ * Useful to reduce memory in environments that don't need source mapping.
+ */
+export function stripSourceOffsets(node: MarkdownNode): MarkdownNode {
+  const { beg: _beg, end: _end, children, ...rest } = node;
+  return {
+    ...rest,
+    ...(children ? { children: children.map(stripSourceOffsets) } : {}),
+  };
+}

package/src/index.ts

@@ -55,3 +55,6 @@ export { MathInline, MathBlock } from "./renderers/math";
 export { createMarkdownSession } from "./MarkdownSession";
 export type { MarkdownSession } from "./MarkdownSession";
 export { useMarkdownSession, useStream } from "./use-markdown-stream";
+
+export type { HighlightedToken, TokenType, CodeHighlighter } from "./utils/code-highlight";
+export { defaultHighlighter } from "./utils/code-highlight";

package/src/markdown.tsx

@@ -17,6 +17,7 @@ import {
   type ListRenderItemInfo,
   type FlatListProps,
   type StyleProp,
+  type TextStyle,
   type ViewStyle,
 } from "react-native";
 import {
@@ -53,6 +54,7 @@ import {
   type NodeStyleOverrides,
   type StylingStrategy,
 } from "./theme";
+import type { CodeHighlighter } from "./utils/code-highlight";
 
 const baseStylesCache = new WeakMap<MarkdownTheme, BaseStyles>();
 const parseAstCache = new Map<string, MarkdownNode>();
@@ -78,6 +80,10 @@ export type MarkdownPlugin = {
    * Optional plugin version metadata for diagnostics.
    */
   version?: string | number;
+  /**
+   * Execution priority. Higher values run first (default: 0).
+   */
+  priority?: number;
   /**
    * Optional text preprocessor executed before native parsing.
    * Should return a full markdown string.
@@ -183,13 +189,15 @@ const getCachedParsedAst = (
 const applyBeforeParsePlugins = (
   markdown: string,
   plugins?: MarkdownPlugin[],
+  onError?: (error: Error, phase: 'before-plugin', pluginName?: string) => void,
 ): string => {
   if (!plugins || plugins.length === 0) {
     return markdown;
   }
 
+  const sorted = [...plugins].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
   let nextMarkdown = markdown;
-  for (const plugin of plugins) {
+  for (const plugin of sorted) {
     if (!plugin.beforeParse) continue;
 
     try {
@@ -203,6 +211,7 @@ const applyBeforeParsePlugins = (
         `[react-native-nitro-markdown] plugin beforeParse${pluginLabel} threw; using previous markdown.`,
         error,
       );
+      onError?.(error instanceof Error ? error : new Error(String(error)), 'before-plugin', plugin.name);
     }
   }
 
@@ -212,13 +221,15 @@ const applyBeforeParsePlugins = (
 const applyAfterParsePlugins = (
   ast: MarkdownNode,
   plugins?: MarkdownPlugin[],
+  onError?: (error: Error, phase: 'after-plugin', pluginName?: string) => void,
 ): MarkdownNode => {
   if (!plugins || plugins.length === 0) {
     return ast;
   }
 
+  const sorted = [...plugins].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
   let nextAst = ast;
-  for (const plugin of plugins) {
+  for (const plugin of sorted) {
     if (!plugin.afterParse) continue;
 
     try {
@@ -232,6 +243,7 @@ const applyAfterParsePlugins = (
         `[react-native-nitro-markdown] plugin afterParse${pluginLabel} threw; using previous AST.`,
         error,
       );
+      onError?.(error instanceof Error ? error : new Error(String(error)), 'after-plugin', plugin.name);
     }
   }
 
@@ -273,6 +285,13 @@ export type MarkdownProps = {
     ast: MarkdownNode;
     text: string;
   }) => void;
+  /**
+   * Called when a parse error or plugin error occurs.
+   * @param error - The thrown error.
+   * @param phase - Where the error occurred.
+   * @param pluginName - The plugin name, if applicable.
+   */
+  onError?: (error: Error, phase: 'parse' | 'before-plugin' | 'after-plugin', pluginName?: string) => void;
   /**
    * Custom renderers for specific markdown node types.
    * Each renderer receives { node, children, Renderer } plus type-specific props.
@@ -325,6 +344,18 @@ export type MarkdownProps = {
    * Optional FlatList tuning for virtualization.
    */
   virtualization?: MarkdownVirtualizationOptions;
+  /**
+   * Optional configuration for the table renderer.
+   */
+  tableOptions?: {
+    minColumnWidth?: number;
+    measurementStabilizeMs?: number;
+  };
+  /**
+   * Enable built-in syntax highlighting for code blocks.
+   * Pass `true` to use the built-in tokenizer, or a custom highlighter function.
+   */
+  highlightCode?: boolean | CodeHighlighter;
 };
 
 export const Markdown: FC<MarkdownProps> = ({
@@ -341,16 +372,19 @@ export const Markdown: FC<MarkdownProps> = ({
   onParsingInProgress,
   onParseComplete,
   onLinkPress,
+  onError,
   virtualize = false,
   virtualizationMinBlocks = 40,
   virtualization,
+  tableOptions,
+  highlightCode,
 }) => {
   const parserOptionGfm = options?.gfm;
   const parserOptionMath = options?.math;
 
   const parseResult = useMemo(() => {
     try {
-      const markdownToParse = applyBeforeParsePlugins(children, plugins);
+      const markdownToParse = applyBeforeParsePlugins(children, plugins, onError ? (e, phase, name) => onError(e, phase, name) : undefined);
       const parserOptions = normalizeParserOptions({
         gfm: parserOptionGfm,
         math: parserOptionMath,
@@ -358,7 +392,7 @@ export const Markdown: FC<MarkdownProps> = ({
       let parsedAst = sourceAst
         ? cloneMarkdownNode(sourceAst)
         : getCachedParsedAst(markdownToParse, parserOptions);
-      parsedAst = applyAfterParsePlugins(parsedAst, plugins);
+      parsedAst = applyAfterParsePlugins(parsedAst, plugins, onError ? (e, phase, name) => onError(e, phase, name) : undefined);
 
       let ast = parsedAst;
       if (astTransform) {
@@ -379,7 +413,8 @@ export const Markdown: FC<MarkdownProps> = ({
       return {
         ast,
       };
-    } catch {
+    } catch (parseError) {
+      onError?.(parseError instanceof Error ? parseError : new Error(String(parseError)), 'parse');
       return {
         ast: null,
       };
@@ -391,6 +426,7 @@ export const Markdown: FC<MarkdownProps> = ({
     plugins,
     sourceAst,
     astTransform,
+    onError,
   ]);
 
   useEffect(() => {
@@ -429,8 +465,10 @@ export const Markdown: FC<MarkdownProps> = ({
       styles: nodeStyles,
       stylingStrategy,
       onLinkPress,
+      tableOptions,
+      highlightCode,
     }),
-    [renderers, theme, nodeStyles, stylingStrategy, onLinkPress],
+    [renderers, theme, nodeStyles, stylingStrategy, onLinkPress, tableOptions, highlightCode],
   );
 
   const topLevelBlocks =
@@ -644,7 +682,9 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
     }
   }
 
-  const nodeStyleOverride = nodeStyles?.[node.type];
+  const nodeStyleOverride = nodeStyles?.[node.type] as
+    | (ViewStyle & TextStyle)
+    | undefined;
 
   switch (node.type) {
     case "document":

package/src/renderers/code.tsx

@@ -11,6 +11,7 @@ import {
 import { getTextContent } from "../headless";
 import { useMarkdownContext } from "../MarkdownContext";
 import type { MarkdownNode } from "../headless";
+import { defaultHighlighter, type HighlightedToken } from "../utils/code-highlight";
 
 type CodeBlockProps = {
   language?: string;
@@ -25,7 +26,14 @@ export const CodeBlock: FC<CodeBlockProps> = ({
   node,
   style,
 }) => {
-  const { theme } = useMarkdownContext();
+  const ctx = useMarkdownContext();
+  const { theme } = ctx;
+
+  const highlighter = ctx.highlightCode === true
+    ? defaultHighlighter
+    : typeof ctx.highlightCode === 'function'
+      ? ctx.highlightCode
+      : null;
 
   const displayContent = content ?? (node ? getTextContent(node) : "");
 
@@ -75,7 +83,24 @@ export const CodeBlock: FC<CodeBlockProps> = ({
         showsHorizontalScrollIndicator={false}
         bounces={false}
       >
-        <Text style={styles.codeBlockText}>{displayContent}</Text>
+        {highlighter && language ? (
+          <Text style={styles.codeBlockText} selectable>
+            {highlighter(language, displayContent).map((token: HighlightedToken, i: number) => {
+              const tokenColor = ctx.theme.colors.codeTokenColors?.[token.type];
+              return tokenColor ? (
+                <Text key={i} style={{ color: tokenColor }}>
+                  {token.text}
+                </Text>
+              ) : (
+                <Text key={i}>{token.text}</Text>
+              );
+            })}
+          </Text>
+        ) : (
+          <Text style={styles.codeBlockText} selectable>
+            {displayContent}
+          </Text>
+        )}
       </ScrollView>
     </View>
   );

package/src/renderers/table/cell-content.tsx

@@ -0,0 +1,38 @@
+import { type FC, type ComponentType } from "react";
+import { View, Text, type StyleProp, type TextStyle } from "react-native";
+import type { MarkdownNode } from "../../headless";
+import type { NodeRendererProps } from "../../MarkdownContext";
+
+type CellContentProps = {
+  node: MarkdownNode;
+  Renderer: ComponentType<NodeRendererProps>;
+  styles: {
+    cellContentWrapper: object;
+  };
+  textStyle?: StyleProp<TextStyle>;
+};
+
+export const CellContent: FC<CellContentProps> = ({
+  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>
+  );
+};

package/src/renderers/table/index.tsx

@@ -0,0 +1,419 @@
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useReducer,
+  useCallback,
+  type FC,
+  type ComponentType,
+} from "react";
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  Platform,
+  type ViewStyle,
+  type LayoutChangeEvent,
+} from "react-native";
+import { useMarkdownContext, type NodeRendererProps } from "../../MarkdownContext";
+import type { MarkdownTheme } from "../../theme";
+import { CellContent } from "./cell-content";
+import { extractTableData, estimateColumnWidths } from "./table-utils";
+import {
+  columnWidthsReducer,
+  DEFAULT_MIN_COLUMN_WIDTH,
+  DEFAULT_MEASUREMENT_STABILIZE_MS,
+} from "./table-reducer";
+
+type TableRendererProps = {
+  node: import("../../headless").MarkdownNode;
+  Renderer: ComponentType<NodeRendererProps>;
+  style?: ViewStyle;
+};
+
+const COLUMN_MEASUREMENT_PADDING = 8;
+
+const IS_ACT_TEST_ENVIRONMENT =
+  Reflect.get(globalThis, "IS_REACT_ACT_ENVIRONMENT") === true;
+const SHOULD_DEBOUNCE_MEASUREMENT = !IS_ACT_TEST_ENVIRONMENT;
+
+export const TableRenderer: FC<TableRendererProps> = ({
+  node,
+  Renderer,
+  style,
+}) => {
+  const { theme, tableOptions } = useMarkdownContext();
+
+  const minColumnWidth =
+    tableOptions?.minColumnWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+  const measurementStabilizeMs =
+    tableOptions?.measurementStabilizeMs ?? DEFAULT_MEASUREMENT_STABILIZE_MS;
+
+  const { headers, rows, alignments } = useMemo(
+    () => extractTableData(node),
+    [node],
+  );
+
+  const columnCount = headers.length;
+  const styles = useMemo(() => createTableStyles(theme), [theme]);
+  const estimatedColumnWidths = useMemo(
+    () => estimateColumnWidths(headers, rows, columnCount, minColumnWidth),
+    [headers, rows, columnCount, minColumnWidth],
+  );
+
+  const [columnWidths, dispatch] = useReducer(
+    columnWidthsReducer,
+    estimatedColumnWidths,
+  );
+  const measuredWidths = useRef<Map<string, number>>(new Map());
+  const measuredCells = useRef<Set<string>>(new Set());
+  const widthsCalculated = useRef(false);
+  const columnWidthsRef = useRef(columnWidths);
+  const lastCellKeySignatureRef = useRef("");
+  const measurementTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+  const [needsMeasurement, setNeedsMeasurement] = useReducer(
+    (_previous: boolean, nextValue: boolean) => nextValue,
+    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]);
+
+  const expectedCellKeySignature = useMemo(
+    () => expectedCellKeys.join("|"),
+    [expectedCellKeys],
+  );
+
+  useEffect(() => {
+    columnWidthsRef.current = columnWidths;
+  }, [columnWidths]);
+
+  useEffect(() => {
+    const structureChanged =
+      lastCellKeySignatureRef.current !== expectedCellKeySignature;
+    lastCellKeySignatureRef.current = expectedCellKeySignature;
+
+    if (measurementTimerRef.current) {
+      clearTimeout(measurementTimerRef.current);
+      measurementTimerRef.current = null;
+    }
+
+    if (structureChanged) {
+      measuredWidths.current.clear();
+      measuredCells.current.clear();
+      widthsCalculated.current = false;
+      setNeedsMeasurement(false);
+      dispatch({ type: "RESET_WIDTHS", widths: estimatedColumnWidths });
+    } else {
+      dispatch({
+        type: "SET_MONOTONIC_WIDTHS",
+        widths: estimatedColumnWidths,
+      });
+      if (widthsCalculated.current) {
+        return;
+      }
+    }
+
+    if (!SHOULD_DEBOUNCE_MEASUREMENT) {
+      setNeedsMeasurement(true);
+      return;
+    }
+
+    measurementTimerRef.current = setTimeout(() => {
+      measurementTimerRef.current = null;
+      setNeedsMeasurement(true);
+    }, measurementStabilizeMs);
+
+    return () => {
+      if (measurementTimerRef.current) {
+        clearTimeout(measurementTimerRef.current);
+        measurementTimerRef.current = null;
+      }
+    };
+  }, [estimatedColumnWidths, expectedCellKeySignature, measurementStabilizeMs]);
+
+  const onCellLayout = useCallback(
+    (cellKey: string, width: number) => {
+      if (width <= 0 || widthsCalculated.current || !needsMeasurement) 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[] = [...columnWidthsRef.current];
+
+      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] + COLUMN_MEASUREMENT_PADDING,
+          minColumnWidth,
+        );
+      }
+
+      widthsCalculated.current = true;
+      setNeedsMeasurement(false);
+      dispatch({ type: "RESET_WIDTHS", widths: maxWidths });
+    },
+    [columnCount, expectedCellKeys, needsMeasurement, rows, minColumnWidth],
+  );
+
+  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;
+  const resolvedWidths = hasWidths ? columnWidths : estimatedColumnWidths;
+
+  return (
+    <View style={[styles.container, style]}>
+      {needsMeasurement ? (
+        <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>
+      ) : null}
+
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator
+        style={styles.tableScroll}
+        bounces={false}
+      >
+        <View
+          style={[
+            styles.table,
+            {
+              backgroundColor:
+                style?.backgroundColor ?? theme.colors.surface ?? "#111827",
+            },
+          ]}
+        >
+          <View style={styles.headerRow}>
+            {headers.map((cell, colIndex) => (
+              <View
+                key={`header-${colIndex}`}
+                style={[
+                  styles.headerCell,
+                  {
+                    width: resolvedWidths[colIndex] ?? minColumnWidth,
+                    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 === 0 ? styles.evenRow : styles.oddRow,
+              ]}
+            >
+              {row.map((cell, colIndex) => (
+                <View
+                  key={`cell-${rowIndex}-${colIndex}`}
+                  style={[
+                    styles.bodyCell,
+                    {
+                      width: resolvedWidths[colIndex] ?? minColumnWidth,
+                      alignItems: getAlignment(colIndex),
+                    },
+                    colIndex === columnCount - 1 && styles.lastCell,
+                  ]}
+                >
+                  <CellContent
+                    node={cell}
+                    Renderer={Renderer}
+                    styles={styles}
+                    textStyle={styles.cellText}
+                  />
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    </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",
+    },
+    headerRow: {
+      flexDirection: "row",
+      backgroundColor: colors.tableHeader || "#1f2937",
+      borderBottomWidth: 1,
+      borderBottomColor: colors.tableBorder || "#374151",
+    },
+    bodyRow: {
+      flexDirection: "row",
+      borderBottomWidth: 1,
+      borderBottomColor: colors.tableBorder || "#374151",
+    },
+    evenRow: {
+      backgroundColor: colors.tableRowEven || "transparent",
+    },
+    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",
+    },
+  });
+};