react-native-nitro-markdown 0.7.1 → 0.8.0

package/src/markdown-stream.tsx

@@ -3,11 +3,14 @@ import {
   useEffect,
   useRef,
   useCallback,
+  useMemo,
   startTransition,
   type FC,
+  type ReactNode,
 } from "react";
 import type { MarkdownNode } from "./headless";
-import { Markdown, type MarkdownProps } from "./markdown";
+import type { ParserOptions } from "./Markdown.nitro";
+import { Markdown, type MarkdownPlugin, type MarkdownProps } from "./markdown";
 import type { MarkdownSession } from "./specs/MarkdownSession.nitro";
 import {
   resolveMarkdownSession,
@@ -21,6 +24,26 @@ const normalizeOffset = (value: number): number | null => {
   return Math.floor(value);
 };
 
+const normalizeParserOptions = (
+  options?: ParserOptions,
+): ParserOptions | undefined => {
+  if (!options) return undefined;
+
+  const gfm = options.gfm;
+  const math = options.math;
+  const html = options.html;
+
+  if (gfm === undefined && math === undefined && html === undefined) {
+    return undefined;
+  }
+
+  const normalized: ParserOptions = {};
+  if (gfm !== undefined) normalized.gfm = gfm;
+  if (math !== undefined) normalized.math = math;
+  if (html !== undefined) normalized.html = html;
+  return normalized;
+};
+
 const resolveStreamText = ({
   forceFullSync,
   pendingFrom,
@@ -71,7 +94,11 @@ function warnStreamError(message: string, error: unknown): void {
   }
 }
 
-export type MarkdownStreamProps = {
+export type MarkdownStreamSourceAstStatus = "available" | "disabled";
+
+export type MarkdownStreamSourceAstDisabledReason = "beforeParse-plugin";
+
+export type UseMarkdownStreamStateOptions = {
   /**
    * The active MarkdownSession to stream content from.
    */
@@ -98,13 +125,32 @@ export type MarkdownStreamProps = {
    * Automatically falls back to full parse when updates are not safely mergeable.
    */
   incrementalParsing?: boolean;
+  /**
+   * Parser options used for the stream source AST.
+   */
+  options?: ParserOptions;
+  /**
+   * Plugins determine whether an optimized source AST can be passed through.
+   */
+  plugins?: MarkdownPlugin[];
+};
+
+export type MarkdownStreamState = {
+  text: string;
+  sourceAst?: MarkdownNode;
+  sourceAstStatus: MarkdownStreamSourceAstStatus;
+  sourceAstDisabledReason?: MarkdownStreamSourceAstDisabledReason;
+};
+
+export type MarkdownStreamRenderProps = MarkdownStreamState & {
+  markdownProps: MarkdownProps;
+};
+
+export type MarkdownStreamProps = UseMarkdownStreamStateOptions & {
+  renderMarkdown?: (props: MarkdownStreamRenderProps) => ReactNode;
 } & Omit<MarkdownProps, "children" | "sourceAst">;
 
-/**
- * A component that renders streaming Markdown from a MarkdownSession.
- * It efficiently subscribes to session updates to minimize parent re-renders.
- */
-export const MarkdownStream: FC<MarkdownStreamProps> = ({
+export function useMarkdownStreamState({
   session,
   updateIntervalMs = 50,
   updateStrategy = "interval",
@@ -112,26 +158,43 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
   incrementalParsing = true,
   options,
   plugins,
-  ...props
-}) => {
+}: UseMarkdownStreamStateOptions): MarkdownStreamState {
   const activeSession = resolveMarkdownSession(session);
+  const parserOptionGfm = options?.gfm;
+  const parserOptionMath = options?.math;
+  const parserOptionHtml = options?.html;
+  const parserOptions = useMemo(
+    () =>
+      normalizeParserOptions(
+        Object.assign(
+          {},
+          parserOptionGfm === undefined ? null : { gfm: parserOptionGfm },
+          parserOptionMath === undefined ? null : { math: parserOptionMath },
+          parserOptionHtml === undefined ? null : { html: parserOptionHtml },
+        ),
+      ),
+    [parserOptionGfm, parserOptionMath, parserOptionHtml],
+  );
   const parseText = useCallback(
-    (text: string): MarkdownNode => parseMarkdownAst(text, options),
-    [options],
+    (text: string): MarkdownNode => parseMarkdownAst(text, parserOptions),
+    [parserOptions],
   );
   const createEmptyAst = (): MarkdownNode => ({
     type: "document",
     children: [],
   });
-  const initialText = activeSession.getAllText();
   const hasBeforeParsePlugins =
     plugins?.some((plugin) => typeof plugin.beforeParse === "function") ??
     false;
-  const [renderState, setRenderState] = useState(() => ({
-    text: initialText,
-    ast: hasBeforeParsePlugins ? createEmptyAst() : parseText(initialText),
-  }));
+  const [renderState, setRenderState] = useState(() => {
+    const initialText = activeSession.getAllText();
+    return {
+      text: initialText,
+      ast: hasBeforeParsePlugins ? createEmptyAst() : parseText(initialText),
+    };
+  });
   const renderStateRef = useRef(renderState);
+  const didMountRef = useRef(false);
   const pendingUpdateRef = useRef(false);
   const pendingFromRef = useRef<number | null>(null);
   const pendingToRef = useRef<number | null>(null);
@@ -153,6 +216,11 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
   }, []);
 
   useEffect(() => {
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      return;
+    }
+
     const initialText = activeSession.getAllText();
     const initialState = {
       text: initialText,
@@ -184,13 +252,19 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
       pendingToRef.current = null;
       forceFullSyncRef.current = false;
 
-      const latest = resolveStreamText({
-        forceFullSync,
-        pendingFrom,
-        pendingTo,
-        previousText: previousState.text,
-        session: activeSession,
-      });
+      let latest: string;
+      try {
+        latest = resolveStreamText({
+          forceFullSync,
+          pendingFrom,
+          pendingTo,
+          previousText: previousState.text,
+          session: activeSession,
+        });
+      } catch (error) {
+        warnStreamError("[NitroMarkdown] Failed to read stream session:", error);
+        return;
+      }
       if (latest === previousState.text) return;
 
       const nextAst = hasBeforeParsePlugins
@@ -198,9 +272,9 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
         : getNextStreamAst({
             allowIncremental,
             nextText: latest,
-            options,
             previousAst: previousState.ast,
             previousText: previousState.text,
+            ...(parserOptions ? { options: parserOptions } : {}),
           });
       const nextState = {
         text: latest,
@@ -236,6 +310,8 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
 
     try {
       unsubscribe = activeSession.addListener((from, to) => {
+        if (!mountedRef.current) return;
+
         const nextFrom = normalizeOffset(from);
         const nextTo = normalizeOffset(to);
 
@@ -259,6 +335,10 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
     }
 
     return () => {
+      pendingUpdateRef.current = false;
+      pendingFromRef.current = null;
+      pendingToRef.current = null;
+      forceFullSyncRef.current = false;
       try {
         unsubscribe?.();
       } catch (error) {
@@ -279,22 +359,59 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
   }, [
     allowIncremental,
     hasBeforeParsePlugins,
-    options,
-    plugins,
+    parserOptions,
     activeSession,
     updateIntervalMs,
     updateStrategy,
     useTransitionUpdates,
   ]);
 
-  return (
-    <Markdown
-      {...props}
-      options={options}
-      plugins={plugins}
-      sourceAst={hasBeforeParsePlugins ? undefined : renderState.ast}
-    >
-      {renderState.text}
-    </Markdown>
-  );
+  const streamState: MarkdownStreamState = {
+    text: renderState.text,
+    sourceAstStatus: hasBeforeParsePlugins ? "disabled" : "available",
+  };
+  if (hasBeforeParsePlugins) {
+    streamState.sourceAstDisabledReason = "beforeParse-plugin";
+  } else {
+    streamState.sourceAst = renderState.ast;
+  }
+  return streamState;
+}
+
+export const MarkdownStream: FC<MarkdownStreamProps> = ({
+  session,
+  updateIntervalMs = 50,
+  updateStrategy = "interval",
+  useTransitionUpdates = false,
+  incrementalParsing = true,
+  options,
+  plugins,
+  renderMarkdown,
+  ...props
+}) => {
+  const streamState = useMarkdownStreamState({
+    session,
+    updateIntervalMs,
+    updateStrategy,
+    useTransitionUpdates,
+    incrementalParsing,
+    ...(options ? { options } : {}),
+    ...(plugins ? { plugins } : {}),
+  });
+  const markdownProps: MarkdownProps = {
+    ...props,
+    children: streamState.text,
+  };
+  if (options) markdownProps.options = options;
+  if (plugins) markdownProps.plugins = plugins;
+  if (streamState.sourceAst) markdownProps.sourceAst = streamState.sourceAst;
+
+  if (renderMarkdown) {
+    return renderMarkdown({
+      ...streamState,
+      markdownProps,
+    });
+  }
+
+  return <Markdown {...markdownProps} />;
 };

package/src/markdown.tsx

@@ -34,6 +34,7 @@ import {
   type CustomRenderer,
   type CustomRenderers,
   type LinkPressHandler,
+  type MarkdownContextValue,
   type NodeRendererProps,
   type TableOptions,
 } from "./MarkdownContext";
@@ -174,10 +175,8 @@ const warnInDev = (message: string, error?: unknown): void => {
 };
 
 const cloneMarkdownNode = (node: MarkdownNode): MarkdownNode => {
-  return {
-    ...node,
-    children: node.children?.map(cloneMarkdownNode),
-  };
+  const children = node.children?.map(cloneMarkdownNode);
+  return children ? { ...node, children } : { ...node };
 };
 
 const getParserOptionsKey = (options?: ParserOptions): string => {
@@ -204,11 +203,11 @@ const normalizeParserOptions = (
     return undefined;
   }
 
-  return {
-    gfm,
-    math,
-    html,
-  };
+  const normalized: ParserOptions = {};
+  if (gfm !== undefined) normalized.gfm = gfm;
+  if (math !== undefined) normalized.math = math;
+  if (html !== undefined) normalized.html = html;
+  return normalized;
 };
 
 const parseWithNativeParser = (
@@ -478,13 +477,22 @@ export const Markdown: FC<MarkdownProps> = ({
       const markdownToParse = sourceAst
         ? children
         : applyBeforeParsePlugins(children, sortedPlugins, onErrorRef.current);
-      const parserOptions = normalizeParserOptions({
-        gfm: parserOptionGfm,
-        math: parserOptionMath,
-        html: parserOptionHtml,
-      });
+      const parserOptions = normalizeParserOptions(
+        Object.assign(
+          {},
+          parserOptionGfm === undefined ? null : { gfm: parserOptionGfm },
+          parserOptionMath === undefined ? null : { math: parserOptionMath },
+          parserOptionHtml === undefined ? null : { html: parserOptionHtml },
+        ),
+      );
+      const shouldCloneSourceAst =
+        sourceAst &&
+        (Boolean(astTransform) ||
+          sortedPlugins?.some((plugin) => plugin.afterParse) === true);
       let parsedAst = sourceAst
-        ? cloneMarkdownNode(sourceAst)
+        ? shouldCloneSourceAst
+          ? cloneMarkdownNode(sourceAst)
+          : sourceAst
         : parseCache
           ? getCachedParsedAst(markdownToParse, parserOptions)
           : parseWithNativeParser(markdownToParse, parserOptions);
@@ -560,16 +568,16 @@ export const Markdown: FC<MarkdownProps> = ({
   }, [userTheme, stylingStrategy]);
 
   const baseStyles = getBaseStyles(theme);
-  const contextValue = useMemo(
+  const contextValue = useMemo<MarkdownContextValue>(
     () => ({
       renderers,
       theme,
-      styles: nodeStyles,
       stylingStrategy,
-      onLinkPress,
-      tableOptions,
-      imageOptions,
-      highlightCode,
+      ...(nodeStyles ? { styles: nodeStyles } : {}),
+      ...(onLinkPress ? { onLinkPress } : {}),
+      ...(tableOptions ? { tableOptions } : {}),
+      ...(imageOptions ? { imageOptions } : {}),
+      ...(highlightCode === undefined ? {} : { highlightCode }),
     }),
     [
       renderers,
@@ -773,15 +781,18 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
       ...(node.type === "heading" && {
         level: (node.level ?? 1) as 1 | 2 | 3 | 4 | 5 | 6,
       }),
-      ...(node.type === "link" && { href: node.href ?? "", title: node.title }),
+      ...(node.type === "link" && {
+        href: node.href ?? "",
+        ...(node.title ? { title: node.title } : {}),
+      }),
       ...(node.type === "image" && {
         url: node.href ?? "",
-        alt: node.alt,
-        title: node.title,
+        ...(node.alt ? { alt: node.alt } : {}),
+        ...(node.title ? { title: node.title } : {}),
       }),
       ...(node.type === "code_block" && {
         content: getTextContent(node),
-        language: node.language,
+        ...(node.language ? { language: node.language } : {}),
       }),
       ...(node.type === "code_inline" && { content: node.content ?? "" }),
       ...((node.type === "math_inline" || node.type === "math_block") && {
@@ -789,7 +800,7 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
       }),
       ...(node.type === "list" && {
         ordered: node.ordered ?? false,
-        start: node.start,
+        ...(node.start === undefined ? {} : { start: node.start }),
       }),
       ...(node.type === "task_list_item" && { checked: node.checked ?? false }),
     };
@@ -810,7 +821,10 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
 
     case "heading":
       return (
-        <Heading level={node.level ?? 1} style={nodeStyles?.heading}>
+        <Heading
+          level={node.level ?? 1}
+          {...(nodeStyles?.heading ? { style: nodeStyles.heading } : {})}
+        >
           {renderChildren(node.children, inListItem, true)}
         </Heading>
       );
@@ -853,7 +867,10 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
 
     case "link":
       return (
-        <Link href={node.href ?? ""} style={nodeStyles?.link}>
+        <Link
+          href={node.href ?? ""}
+          {...(nodeStyles?.link ? { style: nodeStyles.link } : {})}
+        >
           {renderChildren(node.children, inListItem, true)}
         </Link>
       );
@@ -862,36 +879,52 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
       return (
         <Image
           url={node.href ?? ""}
-          title={node.title}
-          alt={node.alt}
           Renderer={NodeRenderer}
-          style={nodeStyles?.image}
+          {...(node.title ? { title: node.title } : {})}
+          {...(node.alt ? { alt: node.alt } : {})}
+          {...(nodeStyles?.image ? { style: nodeStyles.image } : {})}
         />
       );
 
     case "code_inline":
       return (
-        <InlineCode style={nodeStyles?.code_inline}>{node.content}</InlineCode>
+        <InlineCode
+          {...(nodeStyles?.code_inline
+            ? { style: nodeStyles.code_inline }
+            : {})}
+        >
+          {node.content}
+        </InlineCode>
       );
 
     case "code_block":
       return (
         <CodeBlock
-          language={node.language}
           content={getTextContent(node)}
-          style={nodeStyles?.code_block}
+          {...(node.language ? { language: node.language } : {})}
+          {...(nodeStyles?.code_block ? { style: nodeStyles.code_block } : {})}
         />
       );
 
     case "blockquote":
       return (
-        <Blockquote style={nodeStyles?.blockquote}>
+        <Blockquote
+          {...(nodeStyles?.blockquote
+            ? { style: nodeStyles.blockquote }
+            : {})}
+        >
           {renderChildren(node.children, inListItem, false)}
         </Blockquote>
       );
 
     case "horizontal_rule":
-      return <HorizontalRule style={nodeStyles?.horizontal_rule} />;
+      return (
+        <HorizontalRule
+          {...(nodeStyles?.horizontal_rule
+            ? { style: nodeStyles.horizontal_rule }
+            : {})}
+        />
+      );
 
     case "line_break":
       return <Text>{"\n"}</Text>;
@@ -904,7 +937,12 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
       if (!mathContent) return null;
       mathContent = mathContent.replace(/^\$+|\$+$/g, "").trim();
       return (
-        <MathInline content={mathContent} style={nodeStyles?.math_inline} />
+        <MathInline
+          content={mathContent}
+          {...(nodeStyles?.math_inline
+            ? { style: nodeStyles.math_inline }
+            : {})}
+        />
       );
     }
 
@@ -912,7 +950,7 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
       return (
         <MathBlock
           content={getTextContent(node)}
-          style={nodeStyles?.math_block}
+          {...(nodeStyles?.math_block ? { style: nodeStyles.math_block } : {})}
         />
       );
 
@@ -920,9 +958,9 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
       return (
         <List
           ordered={node.ordered ?? false}
-          start={node.start}
           depth={depth}
-          style={nodeStyles?.list}
+          {...(node.start === undefined ? {} : { start: node.start })}
+          {...(nodeStyles?.list ? { style: nodeStyles.list } : {})}
         >
           {node.children?.map((child, index) => {
             if (child.type === "task_list_item") {
@@ -962,7 +1000,9 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
       return (
         <TaskListItem
           checked={node.checked ?? false}
-          style={nodeStyles?.task_list_item}
+          {...(nodeStyles?.task_list_item
+            ? { style: nodeStyles.task_list_item }
+            : {})}
         >
           {renderChildren(node.children, true, false)}
         </TaskListItem>
@@ -973,7 +1013,7 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
         <TableRenderer
           node={node}
           Renderer={NodeRenderer}
-          style={nodeStyles?.table}
+          {...(nodeStyles?.table ? { style: nodeStyles.table } : {})}
         />
       );
 

package/src/renderers/image.tsx

@@ -2,6 +2,7 @@ import {
   useState,
   useEffect,
   useMemo,
+  useRef,
   type ReactNode,
   type FC,
   type ComponentType,
@@ -47,6 +48,7 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
   const [aspectRatio, setAspectRatio] = useState<number | undefined>(undefined);
+  const mountedRef = useRef(true);
   const { theme, imageOptions } = useMarkdownContext();
   const allowedImageHref = useMemo(
     () => getAllowedImageHref(url, imageOptions),
@@ -115,6 +117,13 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
     [theme, aspectRatio],
   );
 
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
   useEffect(() => {
     let isMounted = true;
     setLoading(true);
@@ -131,8 +140,8 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
       /picsum\.photos\/.*\/(\d+)\/(\d+)/,
     );
     if (picsumMatch) {
-      const w = parseInt(picsumMatch[1], 10);
-      const h = parseInt(picsumMatch[2], 10);
+      const w = parseInt(picsumMatch[1] ?? "", 10);
+      const h = parseInt(picsumMatch[2] ?? "", 10);
       if (!isNaN(w) && !isNaN(h) && h !== 0) {
         setAspectRatio(w / h);
         return () => {
@@ -236,9 +245,11 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
         accessibilityRole={accessibilityLabel ? "image" : undefined}
         accessibilityLabel={accessibilityLabel}
         onLoad={() => {
+          if (!mountedRef.current) return;
           setLoading(false);
         }}
         onError={() => {
+          if (!mountedRef.current) return;
           setLoading(false);
           setError(true);
         }}

package/src/renderers/math.tsx

@@ -247,6 +247,14 @@ export const MathInline: FC<MathInlineProps> = ({ content, style }) => {
   const { theme } = useMarkdownContext();
   const styles = getCachedStyles(mathStylesCache, theme, createMathStyles);
   const [hasRenderError, setHasRenderError] = useState(false);
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
 
   if (!content) return null;
 
@@ -257,9 +265,10 @@ export const MathInline: FC<MathInlineProps> = ({ content, style }) => {
           latex={content}
           fontSize={getInlineMathFontSize(content, theme)}
           displayMode={false}
-          color={theme.colors.text}
           style={styles.ratexInline}
+          {...(theme.colors.text ? { color: theme.colors.text } : {})}
           onError={() => {
+            if (!mountedRef.current) return;
             setHasRenderError(true);
           }}
         />
@@ -283,6 +292,14 @@ export const MathBlock: FC<MathBlockProps> = ({ content, style }) => {
   const { theme } = useMarkdownContext();
   const styles = getCachedStyles(mathStylesCache, theme, createMathStyles);
   const [hasRenderError, setHasRenderError] = useState(false);
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
 
   if (!content) return null;
 
@@ -297,9 +314,10 @@ export const MathBlock: FC<MathBlockProps> = ({ content, style }) => {
             latex={content}
             fontSize={theme.fontSizes.xl}
             displayMode
-            color={theme.colors.text}
             style={styles.ratexBlock}
+            {...(theme.colors.text ? { color: theme.colors.text } : {})}
             onError={() => {
+              if (!mountedRef.current) return;
               setHasRenderError(true);
             }}
           />

package/src/renderers/table/index.tsx

@@ -181,19 +181,19 @@ export const TableRenderer: FC<TableRendererProps> = ({
       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);
+          maxWidths[col] = Math.max(maxWidths[col] ?? 0, headerWidth);
         }
 
         for (let row = 0; row < rows.length; row++) {
-          if (col >= rows[row].length) continue;
+          if (col >= (rows[row]?.length ?? 0)) 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] ?? 0, cellWidth);
           }
         }
 
         maxWidths[col] = Math.max(
-          maxWidths[col] + COLUMN_MEASUREMENT_PADDING,
+          (maxWidths[col] ?? 0) + COLUMN_MEASUREMENT_PADDING,
           minColumnWidth,
         );
       }

package/src/renderers/table/table-utils.ts

@@ -59,7 +59,7 @@ export const estimateColumnWidths = (
     let maxChars = headerChars;
 
     for (let row = 0; row < rows.length; row++) {
-      const cell = rows[row][col];
+      const cell = rows[row]?.[col];
       if (!cell) continue;
       const cellChars = Math.min(
         getTextContent(cell).trim().length,