react-native-nitro-markdown 0.4.2 → 0.4.3

package/src/renderers/list.tsx

@@ -1,14 +1,14 @@
-import { ReactNode, useMemo, type FC } from "react";
+import { useMemo, type FC, type ReactNode } from "react";
 import { View, Text, StyleSheet, Platform, type ViewStyle } from "react-native";
 import { useMarkdownContext } from "../MarkdownContext";
 
-interface ListProps {
+type ListProps = {
   ordered: boolean;
   start?: number;
   depth: number;
   children: ReactNode;
   style?: ViewStyle;
-}
+};
 
 export const List: FC<ListProps> = ({ depth, children, style }) => {
   const { theme } = useMarkdownContext();
@@ -32,13 +32,13 @@ export const List: FC<ListProps> = ({ depth, children, style }) => {
   );
 };
 
-interface ListItemProps {
+type ListItemProps = {
   children: ReactNode;
   index: number;
   ordered: boolean;
   start: number;
   style?: ViewStyle;
-}
+};
 
 export const ListItem: FC<ListItemProps> = ({
   children,
@@ -82,11 +82,11 @@ export const ListItem: FC<ListItemProps> = ({
   );
 };
 
-interface TaskListItemProps {
+type TaskListItemProps = {
   children: ReactNode;
   checked: boolean;
   style?: ViewStyle;
-}
+};
 
 export const TaskListItem: FC<TaskListItemProps> = ({
   children,
@@ -134,12 +134,9 @@ export const TaskListItem: FC<TaskListItemProps> = ({
   return (
     <View style={[styles.taskListItem, style]}>
       <View
-        style={[
-          styles.taskCheckbox,
-          checked && styles.taskCheckboxChecked,
-        ]}
+        style={[styles.taskCheckbox, checked && styles.taskCheckboxChecked]}
       >
-        {checked && <Text style={styles.taskCheckboxText}>✓</Text>}
+        {checked ? <Text style={styles.taskCheckboxText}>✓</Text> : null}
       </View>
       <View style={styles.taskContent}>{children}</View>
     </View>

package/src/renderers/math.tsx

@@ -26,10 +26,10 @@ try {
   // ignored
 }
 
-interface MathInlineProps {
+type MathInlineProps = {
   content?: string;
   style?: ViewStyle;
-}
+};
 
 const createMathStyles = (theme: MarkdownTheme) =>
   StyleSheet.create({
@@ -115,10 +115,10 @@ export const MathInline: FC<MathInlineProps> = ({ content, style }) => {
   );
 };
 
-interface MathBlockProps {
+type MathBlockProps = {
   content?: string;
   style?: ViewStyle;
-}
+};
 
 export const MathBlock: FC<MathBlockProps> = ({ content, style }) => {
   const { theme } = useMarkdownContext();

package/src/renderers/paragraph.tsx

@@ -1,12 +1,12 @@
-import { ReactNode, useMemo, type FC } from "react";
+import { useMemo, type FC, type ReactNode } from "react";
 import { View, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
 import { useMarkdownContext } from "../MarkdownContext";
 
-interface ParagraphProps {
+type ParagraphProps = {
   children: ReactNode;
   inListItem?: boolean;
   style?: StyleProp<ViewStyle>;
-}
+};
 
 export const Paragraph: FC<ParagraphProps> = ({
   children,

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 { useMarkdownContext, type NodeRendererProps } from "../MarkdownContext";
-import { MarkdownTheme } from "../theme";
+import type { MarkdownNode } from "../headless";
+import type { MarkdownTheme } from "../theme";
 
 type TableData = {
   headers: MarkdownNode[];
@@ -60,11 +59,11 @@ 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";
@@ -84,7 +83,7 @@ export const TableRenderer: FC<TableRendererProps> = ({
   const { theme } = useMarkdownContext();
   const { headers, rows, alignments } = useMemo(
     () => extractTableData(node),
-    [node]
+    [node],
   );
 
   const columnCount = headers.length;
@@ -95,25 +94,44 @@ export const TableRenderer: FC<TableRendererProps> = ({
   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) => {
-      measuredWidths.current.set(cellKey, width);
-      measuredCells.current.add(cellKey);
+      if (widthsCalculated.current) 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);
 
@@ -124,6 +142,7 @@ 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);
@@ -136,11 +155,11 @@ export const TableRenderer: FC<TableRendererProps> = ({
       widthsCalculated.current = true;
       dispatch({ type: "SET_WIDTHS", payload: maxWidths });
     },
-    [columnCount, rows.length]
+    [columnCount, expectedCellKeys, rows],
   );
 
   const getAlignment = (
-    index: number
+    index: number,
   ): "flex-start" | "center" | "flex-end" => {
     const align = alignments[index];
     if (align === "center") return "center";
@@ -154,30 +173,17 @@ export const TableRenderer: FC<TableRendererProps> = ({
 
   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) => (
+      {!hasWidths && (
+        <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,17 +191,39 @@ export const TableRenderer: FC<TableRendererProps> = ({
               </View>
             ))}
           </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 && (
+      {hasWidths ? (
         <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
@@ -225,7 +253,7 @@ export const TableRenderer: FC<TableRendererProps> = ({
                 style={[
                   styles.bodyRow,
                   rowIndex === rows.length - 1 && styles.lastRow,
-                  rowIndex % 2 === 0 ? styles.evenRow : styles.oddRow,
+                  rowIndex % 2 === 1 && styles.oddRow,
                 ]}
               >
                 {row.map((cell, colIndex) => (
@@ -252,7 +280,7 @@ export const TableRenderer: FC<TableRendererProps> = ({
             ))}
           </View>
         </ScrollView>
-      )}
+      ) : null}
     </View>
   );
 };
@@ -311,6 +339,7 @@ const createTableStyles = (theme: MarkdownTheme) => {
       overflow: "hidden",
       borderWidth: 1,
       borderColor: colors.tableBorder || "#374151",
+      backgroundColor: colors.surface || "#111827",
     },
     headerRow: {
       flexDirection: "row",
@@ -323,9 +352,6 @@ 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/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 {

package/src/utils/link-security.ts

@@ -0,0 +1,22 @@
+const ALLOWED_LINK_PROTOCOLS = new Set([
+  "http:",
+  "https:",
+  "mailto:",
+  "tel:",
+  "sms:",
+]);
+
+export const normalizeLinkHref = (href: string): string | null => {
+  const normalizedHref = href.trim();
+  return normalizedHref.length > 0 ? normalizedHref : null;
+};
+
+export const getAllowedExternalHref = (href: string): string | null => {
+  const protocolMatch = href.match(/^([a-z][a-z0-9+.-]*):/i);
+  if (!protocolMatch) return null;
+
+  const protocol = `${protocolMatch[1].toLowerCase()}:`;
+  if (!ALLOWED_LINK_PROTOCOLS.has(protocol)) return null;
+
+  return href;
+};

package/src/utils/stream-timeline.ts

@@ -0,0 +1,72 @@
+export type TimestampEntry = {
+  index: number;
+  time: number;
+};
+
+export type TimestampTimeline = {
+  entries: TimestampEntry[];
+  monotonic: boolean;
+};
+
+export const createTimestampTimeline = (
+  timestamps?: Record<number, number>,
+): TimestampTimeline => {
+  if (!timestamps) {
+    return { entries: [], monotonic: true };
+  }
+
+  const entries = Object.keys(timestamps)
+    .map(Number)
+    .filter((index) => Number.isFinite(index))
+    .sort((a, b) => a - b)
+    .map((index) => ({
+      index,
+      time: timestamps[index],
+    }))
+    .filter((entry) => Number.isFinite(entry.time));
+
+  let monotonic = true;
+  for (let i = 1; i < entries.length; i += 1) {
+    if (entries[i].time < entries[i - 1].time) {
+      monotonic = false;
+      break;
+    }
+  }
+
+  return { entries, monotonic };
+};
+
+export const resolveHighlightPosition = (
+  timeline: TimestampTimeline,
+  currentTimeMs: number,
+): number => {
+  const { entries, monotonic } = timeline;
+  if (entries.length === 0) return 0;
+
+  if (!monotonic) {
+    let wordIndex = 0;
+    for (const entry of entries) {
+      if (currentTimeMs >= entry.time) {
+        wordIndex = entry.index + 1;
+      }
+    }
+    return wordIndex;
+  }
+
+  let left = 0;
+  let right = entries.length - 1;
+  let resolvedIndex = -1;
+
+  while (left <= right) {
+    const mid = (left + right) >> 1;
+    if (entries[mid].time <= currentTimeMs) {
+      resolvedIndex = mid;
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+
+  if (resolvedIndex === -1) return 0;
+  return entries[resolvedIndex].index + 1;
+};