react-native-nitro-markdown 0.4.3 → 0.5.0

package/src/renderers/table.tsx

@@ -18,8 +18,8 @@ import {
   type ViewStyle,
   type LayoutChangeEvent,
 } from "react-native";
+import { getTextContent, type MarkdownNode } from "../headless";
 import { useMarkdownContext, type NodeRendererProps } from "../MarkdownContext";
-import type { MarkdownNode } from "../headless";
 import type { MarkdownTheme } from "../theme";
 
 type TableData = {
@@ -66,15 +66,86 @@ type TableRendererProps = {
 };
 
 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,
@@ -88,11 +159,27 @@ export const TableRenderer: FC<TableRendererProps> = ({
 
   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[] = [];
@@ -110,16 +197,62 @@ export const TableRenderer: FC<TableRendererProps> = ({
     return keys;
   }, [headers, rows]);
 
+  const expectedCellKeySignature = useMemo(
+    () => expectedCellKeys.join("|"),
+    [expectedCellKeys],
+  );
+
   useEffect(() => {
-    measuredWidths.current.clear();
-    measuredCells.current.clear();
-    widthsCalculated.current = false;
-    dispatch({ type: "SET_WIDTHS", payload: [] });
-  }, [expectedCellKeys]);
+    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) => {
-      if (widthsCalculated.current) return;
+      if (width <= 0 || widthsCalculated.current || !needsMeasurement) return;
 
       measuredWidths.current.set(cellKey, width);
       if (!measuredCells.current.has(cellKey)) {
@@ -133,7 +266,7 @@ export const TableRenderer: FC<TableRendererProps> = ({
       );
       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}`);
@@ -149,13 +282,17 @@ export const TableRenderer: FC<TableRendererProps> = ({
           }
         }
 
-        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, expectedCellKeys, rows],
+    [columnCount, expectedCellKeys, needsMeasurement, rows],
   );
 
   const getAlignment = (
@@ -170,10 +307,11 @@ 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]}>
-      {!hasWidths && (
+      {needsMeasurement ? (
         <View style={styles.measurementContainer}>
           <View style={styles.measurementRow}>
             {headers.map((cell, colIndex) => (
@@ -214,24 +352,62 @@ export const TableRenderer: FC<TableRendererProps> = ({
             </View>
           ))}
         </View>
-      )}
-
-      {hasWidths ? (
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator
-          style={styles.tableScroll}
-          bounces={false}
+      ) : null}
+
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator
+        style={styles.tableScroll}
+        bounces={false}
+      >
+        <View
+          style={[
+            styles.table,
+            {
+              backgroundColor:
+                style?.backgroundColor ?? theme.colors.surface ?? "#111827",
+            },
+          ]}
         >
-          <View style={styles.table}>
-            <View style={styles.headerRow}>
-              {headers.map((cell, colIndex) => (
+          <View style={styles.headerRow}>
+            {headers.map((cell, colIndex) => (
+              <View
+                key={`header-${colIndex}`}
+                style={[
+                  styles.headerCell,
+                  {
+                    width: resolvedWidths[colIndex] ?? MIN_COLUMN_WIDTH,
+                    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={`header-${colIndex}`}
+                  key={`cell-${rowIndex}-${colIndex}`}
                   style={[
-                    styles.headerCell,
+                    styles.bodyCell,
                     {
-                      width: columnWidths[colIndex],
+                      width: resolvedWidths[colIndex] ?? MIN_COLUMN_WIDTH,
                       alignItems: getAlignment(colIndex),
                     },
                     colIndex === columnCount - 1 && styles.lastCell,
@@ -241,46 +417,14 @@ export const TableRenderer: FC<TableRendererProps> = ({
                     node={cell}
                     Renderer={Renderer}
                     styles={styles}
-                    textStyle={styles.headerText}
+                    textStyle={styles.cellText}
                   />
                 </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>
+      </ScrollView>
     </View>
   );
 };
@@ -339,7 +483,6 @@ const createTableStyles = (theme: MarkdownTheme) => {
       overflow: "hidden",
       borderWidth: 1,
       borderColor: colors.tableBorder || "#374151",
-      backgroundColor: colors.surface || "#111827",
     },
     headerRow: {
       flexDirection: "row",
@@ -352,6 +495,9 @@ const createTableStyles = (theme: MarkdownTheme) => {
       borderBottomWidth: 1,
       borderBottomColor: colors.tableBorder || "#374151",
     },
+    evenRow: {
+      backgroundColor: colors.tableRowEven || "transparent",
+    },
     oddRow: {
       backgroundColor: colors.tableRowOdd || "rgba(255,255,255,0.02)",
     },

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/utils/incremental-ast.ts

@@ -0,0 +1,224 @@
+import {
+  parseMarkdown,
+  parseMarkdownWithOptions,
+  type MarkdownNode,
+} from "../headless";
+import type { ParserOptions } from "../Markdown.nitro";
+
+const PLAIN_TEXT_APPEND_PATTERN = /[`*_~[\]#!<>()|$\n\r]/;
+const FENCE_LINE_PATTERN = /^ {0,3}(```+|~~~+)/;
+
+const parseAst = (text: string, options?: ParserOptions): MarkdownNode => {
+  if (options) {
+    return parseMarkdownWithOptions(text, options);
+  }
+  return parseMarkdown(text);
+};
+
+const isInsideFencedCodeBlock = (text: string): boolean => {
+  const lines = text.split(/\r?\n/);
+  let openFenceChar: "`" | "~" | null = null;
+  let openFenceLength = 0;
+
+  for (const line of lines) {
+    const fenceMatch = line.match(FENCE_LINE_PATTERN);
+    if (!fenceMatch) continue;
+
+    const marker = fenceMatch[1];
+    const markerChar = marker[0] as "`" | "~";
+    const markerLength = marker.length;
+
+    if (!openFenceChar) {
+      openFenceChar = markerChar;
+      openFenceLength = markerLength;
+      continue;
+    }
+
+    if (markerChar === openFenceChar && markerLength >= openFenceLength) {
+      openFenceChar = null;
+      openFenceLength = 0;
+    }
+  }
+
+  return openFenceChar !== null;
+};
+
+const containsFenceLine = (text: string): boolean => {
+  return text.split(/\r?\n/).some((line) => FENCE_LINE_PATTERN.test(line));
+};
+
+const getTrailingLine = (text: string): string => {
+  const lastLineBreak = Math.max(
+    text.lastIndexOf("\n"),
+    text.lastIndexOf("\r"),
+  );
+  if (lastLineBreak === -1) return text;
+  return text.slice(lastLineBreak + 1);
+};
+
+const getLeadingLine = (text: string): string => {
+  const newlineIndex = text.indexOf("\n");
+  const carriageReturnIndex = text.indexOf("\r");
+
+  const hasNewline = newlineIndex !== -1;
+  const hasCarriageReturn = carriageReturnIndex !== -1;
+
+  if (!hasNewline && !hasCarriageReturn) return text;
+  if (!hasNewline) return text.slice(0, carriageReturnIndex);
+  if (!hasCarriageReturn) return text.slice(0, newlineIndex);
+
+  return text.slice(0, Math.min(newlineIndex, carriageReturnIndex));
+};
+
+const hasSplitFenceBoundary = (
+  previousText: string,
+  appendedChunk: string,
+): boolean => {
+  if (appendedChunk.length === 0) return false;
+
+  const candidateLine = `${getTrailingLine(previousText)}${getLeadingLine(
+    appendedChunk,
+  )}`;
+  if (candidateLine.length === 0) return false;
+
+  return FENCE_LINE_PATTERN.test(candidateLine);
+};
+
+const findTrailingLeafPath = (
+  node: MarkdownNode,
+  path: number[] = [],
+): number[] => {
+  const children = node.children;
+  if (!children || children.length === 0) {
+    return path;
+  }
+
+  const lastIndex = children.length - 1;
+  return findTrailingLeafPath(children[lastIndex], [...path, lastIndex]);
+};
+
+const getNodeAtPath = (
+  node: MarkdownNode,
+  path: readonly number[],
+): MarkdownNode | null => {
+  let current: MarkdownNode = node;
+  for (const index of path) {
+    const child = current.children?.[index];
+    if (!child) return null;
+    current = child;
+  }
+  return current;
+};
+
+const appendPlainTextToAst = (
+  ast: MarkdownNode,
+  appendedChunk: string,
+  previousTextLength: number,
+): MarkdownNode | null => {
+  if (appendedChunk.length === 0) return ast;
+  const path = findTrailingLeafPath(ast);
+  const leaf = getNodeAtPath(ast, path);
+  if (leaf?.type !== "text") return null;
+  if (typeof leaf.end !== "number" || leaf.end !== previousTextLength) {
+    return null;
+  }
+
+  const delta = appendedChunk.length;
+  const update = (node: MarkdownNode, depth: number): MarkdownNode => {
+    if (depth === path.length) {
+      return {
+        ...node,
+        content: (node.content ?? "") + appendedChunk,
+        end: typeof node.end === "number" ? node.end + delta : node.end,
+      };
+    }
+
+    const childIndex = path[depth];
+    const children = node.children?.map((child, index) =>
+      index === childIndex ? update(child, depth + 1) : child,
+    );
+
+    return {
+      ...node,
+      end: typeof node.end === "number" ? node.end + delta : node.end,
+      children,
+    };
+  };
+
+  return update(ast, 0);
+};
+
+const endsAtBlockBoundary = (text: string): boolean => {
+  return text.endsWith("\n") || text.endsWith("\r");
+};
+
+export type IncrementalAstInput = {
+  allowIncremental?: boolean;
+  nextText: string;
+  options?: ParserOptions;
+  previousAst: MarkdownNode;
+  previousText: string;
+};
+
+export const getNextStreamAst = ({
+  allowIncremental = true,
+  nextText,
+  options,
+  previousAst,
+  previousText,
+}: IncrementalAstInput): MarkdownNode => {
+  if (!allowIncremental || !nextText.startsWith(previousText)) {
+    return parseAst(nextText, options);
+  }
+
+  const appendedChunk = nextText.slice(previousText.length);
+  if (appendedChunk.length === 0) {
+    return previousAst;
+  }
+
+  const insideFencedCodeBlock = isInsideFencedCodeBlock(previousText);
+  const hasFenceBoundary =
+    containsFenceLine(appendedChunk) ||
+    hasSplitFenceBoundary(previousText, appendedChunk);
+
+  if (insideFencedCodeBlock && !hasFenceBoundary) {
+    const fencedTextAppendAst = appendPlainTextToAst(
+      previousAst,
+      appendedChunk,
+      previousText.length,
+    );
+    if (fencedTextAppendAst) {
+      return fencedTextAppendAst;
+    }
+  }
+
+  if (!PLAIN_TEXT_APPEND_PATTERN.test(appendedChunk)) {
+    if (endsAtBlockBoundary(previousText)) {
+      return parseAst(nextText, options);
+    }
+
+    const textAppendedAst = appendPlainTextToAst(
+      previousAst,
+      appendedChunk,
+      previousText.length,
+    );
+    if (textAppendedAst) {
+      return textAppendedAst;
+    }
+  }
+
+  if (insideFencedCodeBlock) {
+    return parseAst(nextText, options);
+  }
+
+  // Correctness-first fallback: full reparse for all non-trivial appends.
+  // Incremental append is only used for plain text chunks at the true trailing leaf.
+  return parseAst(nextText, options);
+};
+
+export const parseMarkdownAst = (
+  text: string,
+  options?: ParserOptions,
+): MarkdownNode => {
+  return parseAst(text, options);
+};