react-native-nitro-markdown 0.4.2 → 0.5.0

package/src/renderers/table.tsx

@@ -1,11 +1,11 @@
 import {
+  useEffect,
   useMemo,
   useRef,
   useReducer,
   useCallback,
   type FC,
   type ComponentType,
-  type ReactNode,
 } from "react";
 import {
   View,
@@ -18,10 +18,9 @@ import {
   type ViewStyle,
   type LayoutChangeEvent,
 } from "react-native";
-
-import type { MarkdownNode } from "../headless";
+import { getTextContent, type MarkdownNode } from "../headless";
 import { useMarkdownContext, type NodeRendererProps } from "../MarkdownContext";
-import { MarkdownTheme } from "../theme";
+import type { MarkdownTheme } from "../theme";
 
 type TableData = {
   headers: MarkdownNode[];
@@ -60,22 +59,93 @@ const extractTableData = (node: MarkdownNode): TableData => {
   return { headers, rows, alignments };
 };
 
-interface TableRendererProps {
+type TableRendererProps = {
   node: MarkdownNode;
   Renderer: ComponentType<NodeRendererProps>;
   style?: ViewStyle;
-}
+};
 
 type ColumnWidthsAction = {
-  type: "SET_WIDTHS";
+  type: "RESET_WIDTHS" | "SET_MONOTONIC_WIDTHS";
   payload: number[];
 };
 
+const MIN_COLUMN_WIDTH = 60;
+const COLUMN_MEASUREMENT_PADDING = 8;
+const APPROX_CHAR_WIDTH = 7;
+const MAX_ESTIMATED_CHARS = 120;
+const ESTIMATED_WIDTH_STEP = 24;
+const MEASUREMENT_STABILIZE_MS = 140;
+const IS_ACT_TEST_ENVIRONMENT =
+  Reflect.get(globalThis, "IS_REACT_ACT_ENVIRONMENT") === true;
+const SHOULD_DEBOUNCE_MEASUREMENT = !IS_ACT_TEST_ENVIRONMENT;
+
 const columnWidthsReducer = (state: number[], action: ColumnWidthsAction) => {
-  if (action.type === "SET_WIDTHS") return action.payload;
+  if (action.type === "RESET_WIDTHS") {
+    if (
+      state.length === action.payload.length &&
+      state.every((width, index) => width === action.payload[index])
+    ) {
+      return state;
+    }
+    return action.payload;
+  }
+
+  if (action.type === "SET_MONOTONIC_WIDTHS") {
+    if (state.length !== action.payload.length) {
+      return action.payload;
+    }
+
+    const merged = action.payload.map((width, index) =>
+      Math.max(width, state[index] ?? width),
+    );
+
+    if (state.every((width, index) => width === merged[index])) {
+      return state;
+    }
+    return merged;
+  }
+
   return state;
 };
 
+const estimateColumnWidths = (
+  headers: MarkdownNode[],
+  rows: MarkdownNode[][],
+  columnCount: number,
+) => {
+  const widths = new Array<number>(columnCount).fill(MIN_COLUMN_WIDTH);
+
+  for (let col = 0; col < columnCount; col++) {
+    const headerChars = Math.min(
+      getTextContent(headers[col] ?? { type: "text", content: "" }).trim()
+        .length,
+      MAX_ESTIMATED_CHARS,
+    );
+    let maxChars = headerChars;
+
+    for (let row = 0; row < rows.length; row++) {
+      const cell = rows[row][col];
+      if (!cell) continue;
+      const cellChars = Math.min(
+        getTextContent(cell).trim().length,
+        MAX_ESTIMATED_CHARS,
+      );
+      if (cellChars > maxChars) {
+        maxChars = cellChars;
+      }
+    }
+
+    const estimatedWidth =
+      maxChars * APPROX_CHAR_WIDTH + COLUMN_MEASUREMENT_PADDING;
+    const steppedEstimatedWidth =
+      Math.ceil(estimatedWidth / ESTIMATED_WIDTH_STEP) * ESTIMATED_WIDTH_STEP;
+    widths[col] = Math.max(MIN_COLUMN_WIDTH, steppedEstimatedWidth);
+  }
+
+  return widths;
+};
+
 export const TableRenderer: FC<TableRendererProps> = ({
   node,
   Renderer,
@@ -84,38 +154,119 @@ export const TableRenderer: FC<TableRendererProps> = ({
   const { theme } = useMarkdownContext();
   const { headers, rows, alignments } = useMemo(
     () => extractTableData(node),
-    [node]
+    [node],
   );
 
   const columnCount = headers.length;
   const styles = useMemo(() => createTableStyles(theme), [theme]);
+  const estimatedColumnWidths = useMemo(
+    () => estimateColumnWidths(headers, rows, columnCount),
+    [headers, rows, columnCount],
+  );
 
-  const [columnWidths, dispatch] = useReducer(columnWidthsReducer, []);
+  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", payload: estimatedColumnWidths });
+    } else {
+      dispatch({
+        type: "SET_MONOTONIC_WIDTHS",
+        payload: estimatedColumnWidths,
+      });
+      if (widthsCalculated.current) {
+        return;
+      }
+    }
+
+    if (!SHOULD_DEBOUNCE_MEASUREMENT) {
+      setNeedsMeasurement(true);
+      return;
+    }
+
+    measurementTimerRef.current = setTimeout(() => {
+      measurementTimerRef.current = null;
+      setNeedsMeasurement(true);
+    }, MEASUREMENT_STABILIZE_MS);
+
+    return () => {
+      if (measurementTimerRef.current) {
+        clearTimeout(measurementTimerRef.current);
+        measurementTimerRef.current = null;
+      }
+    };
+  }, [estimatedColumnWidths, expectedCellKeySignature]);
 
   const onCellLayout = useCallback(
     (cellKey: string, width: number) => {
-      measuredWidths.current.set(cellKey, width);
-      measuredCells.current.add(cellKey);
+      if (width <= 0 || widthsCalculated.current || !needsMeasurement) return;
 
-      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}`);
-        }
+      measuredWidths.current.set(cellKey, width);
+      if (!measuredCells.current.has(cellKey)) {
+        measuredCells.current.add(cellKey);
       }
 
-      const allCellsMeasured = [...expectedCells].every((key) =>
-        measuredCells.current.has(key)
+      if (measuredCells.current.size < expectedCellKeys.length) return;
+
+      const allCellsMeasured = expectedCellKeys.every((key) =>
+        measuredCells.current.has(key),
       );
-      if (!allCellsMeasured || widthsCalculated.current) return;
+      if (!allCellsMeasured) return;
 
-      const maxWidths: number[] = new Array(columnCount).fill(0);
+      const maxWidths: number[] = [...columnWidthsRef.current];
 
       for (let col = 0; col < columnCount; col++) {
         const headerWidth = measuredWidths.current.get(`header-${col}`);
@@ -124,23 +275,28 @@ export const TableRenderer: FC<TableRendererProps> = ({
         }
 
         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);
+        maxWidths[col] = Math.max(
+          maxWidths[col] + COLUMN_MEASUREMENT_PADDING,
+          MIN_COLUMN_WIDTH,
+        );
       }
 
       widthsCalculated.current = true;
-      dispatch({ type: "SET_WIDTHS", payload: maxWidths });
+      setNeedsMeasurement(false);
+      dispatch({ type: "RESET_WIDTHS", payload: maxWidths });
     },
-    [columnCount, rows.length]
+    [columnCount, expectedCellKeys, needsMeasurement, rows],
   );
 
   const getAlignment = (
-    index: number
+    index: number,
   ): "flex-start" | "center" | "flex-end" => {
     const align = alignments[index];
     if (align === "center") return "center";
@@ -151,33 +307,21 @@ export const TableRenderer: FC<TableRendererProps> = ({
   if (columnCount === 0) return null;
 
   const hasWidths = columnWidths.length === columnCount;
+  const resolvedWidths = hasWidths ? columnWidths : estimatedColumnWidths;
 
   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) => (
+      {needsMeasurement ? (
+        <View style={styles.measurementContainer}>
+          <View style={styles.measurementRow}>
+            {headers.map((cell, colIndex) => (
               <View
-                key={`measure-cell-${rowIndex}-${colIndex}`}
+                key={`measure-header-${colIndex}`}
                 style={styles.measurementCell}
                 onLayout={(e: LayoutChangeEvent) => {
                   onCellLayout(
-                    `cell-${rowIndex}-${colIndex}`,
-                    e.nativeEvent.layout.width
+                    `header-${colIndex}`,
+                    e.nativeEvent.layout.width,
                   );
                 }}
               >
@@ -185,74 +329,102 @@ export const TableRenderer: FC<TableRendererProps> = ({
               </View>
             ))}
           </View>
-        ))}
-      </View>
-
-      {hasWidths && (
-        <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) => (
+          {rows.map((row, rowIndex) => (
+            <View key={`measure-row-${rowIndex}`} style={styles.measurementRow}>
+              {row.map((cell, colIndex) => (
                 <View
-                  key={`header-${colIndex}`}
-                  style={[
-                    styles.headerCell,
-                    {
-                      width: columnWidths[colIndex],
-                      alignItems: getAlignment(colIndex),
-                    },
-                    colIndex === columnCount - 1 && styles.lastCell,
-                  ]}
+                  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}
-                    textStyle={styles.headerText}
                   />
                 </View>
               ))}
             </View>
+          ))}
+        </View>
+      ) : null}
 
-            {rows.map((row, rowIndex) => (
+      <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={`row-${rowIndex}`}
+                key={`header-${colIndex}`}
                 style={[
-                  styles.bodyRow,
-                  rowIndex === rows.length - 1 && styles.lastRow,
-                  rowIndex % 2 === 0 ? styles.evenRow : styles.oddRow,
+                  styles.headerCell,
+                  {
+                    width: resolvedWidths[colIndex] ?? MIN_COLUMN_WIDTH,
+                    alignItems: getAlignment(colIndex),
+                  },
+                  colIndex === columnCount - 1 && styles.lastCell,
                 ]}
               >
-                {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>
-                ))}
+                <CellContent
+                  node={cell}
+                  Renderer={Renderer}
+                  styles={styles}
+                  textStyle={styles.headerText}
+                />
               </View>
             ))}
           </View>
-        </ScrollView>
-      )}
+
+          {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] ?? MIN_COLUMN_WIDTH,
+                      alignItems: getAlignment(colIndex),
+                    },
+                    colIndex === columnCount - 1 && styles.lastCell,
+                  ]}
+                >
+                  <CellContent
+                    node={cell}
+                    Renderer={Renderer}
+                    styles={styles}
+                    textStyle={styles.cellText}
+                  />
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+      </ScrollView>
     </View>
   );
 };

package/src/specs/MarkdownSession.nitro.ts

@@ -1,14 +1,18 @@
 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;
 }

package/src/theme.ts

@@ -1,7 +1,7 @@
 import { Platform, type TextStyle, type ViewStyle } from "react-native";
 import type { MarkdownNode } from "./headless";
 
-export interface MarkdownTheme {
+export type MarkdownTheme = {
   colors: {
     text: string | undefined;
     textMuted: string | undefined;
@@ -53,7 +53,7 @@ export interface MarkdownTheme {
     l: number;
   };
   showCodeLanguage: boolean;
-}
+};
 
 export const defaultMarkdownTheme: MarkdownTheme = {
   colors: {
@@ -191,7 +191,7 @@ export const minimalMarkdownTheme: MarkdownTheme = {
 
 export const mergeThemes = (
   base: MarkdownTheme,
-  partial?: PartialMarkdownTheme
+  partial?: PartialMarkdownTheme,
 ): MarkdownTheme => {
   if (!partial) return base;
   return {

package/src/use-markdown-stream.ts

@@ -1,5 +1,10 @@
 import { useRef, useCallback, useState, useEffect } from "react";
 import { createMarkdownSession } from "./MarkdownSession";
+import {
+  createTimestampTimeline,
+  resolveHighlightPosition,
+  type TimestampTimeline,
+} from "./utils/stream-timeline";
 
 export type MarkdownSession = ReturnType<typeof createMarkdownSession>;
 
@@ -46,32 +51,33 @@ export function useMarkdownSession() {
 
 export function useStream(timestamps?: Record<number, number>) {
   const engine = useMarkdownSession();
+  const { setHighlight } = engine;
   const [isPlaying, setIsPlaying] = useState(false);
+  const timelineRef = useRef<TimestampTimeline>({
+    entries: [],
+    monotonic: true,
+  });
+  const lastHighlightRef = useRef<number>(-1);
 
-  const sortedKeys = useRef<number[]>([]);
   useEffect(() => {
-    if (timestamps) {
-      sortedKeys.current = Object.keys(timestamps)
-        .map(Number)
-        .sort((a, b) => a - b);
-    }
+    timelineRef.current = createTimestampTimeline(timestamps);
+    lastHighlightRef.current = -1;
   }, [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);
+      const nextHighlight = resolveHighlightPosition(
+        timelineRef.current,
+        currentTimeMs,
+      );
+      if (nextHighlight === lastHighlightRef.current) return;
+
+      lastHighlightRef.current = nextHighlight;
+      setHighlight(nextHighlight);
     },
-    [timestamps, engine]
+    [setHighlight, timestamps],
   );
 
   return {