react-native-nitro-markdown 0.7.1 → 0.7.2

package/src/index.ts

@@ -48,6 +48,7 @@ export type {
   LinkPressHandler,
   MarkdownContextValue,
   CustomRendererPropsByNode,
+  MarkdownRenderers,
   TableOptions,
 } from "./MarkdownContext";
 

package/src/markdown-stream.tsx

@@ -3,10 +3,12 @@ import {
   useEffect,
   useRef,
   useCallback,
+  useMemo,
   startTransition,
   type FC,
 } from "react";
 import type { MarkdownNode } from "./headless";
+import type { ParserOptions } from "./Markdown.nitro";
 import { Markdown, type MarkdownProps } from "./markdown";
 import type { MarkdownSession } from "./specs/MarkdownSession.nitro";
 import {
@@ -21,6 +23,22 @@ 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;
+  }
+
+  return { gfm, math, html };
+};
+
 const resolveStreamText = ({
   forceFullSync,
   pendingFrom,
@@ -115,9 +133,21 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
   ...props
 }) => {
   const activeSession = resolveMarkdownSession(session);
+  const parserOptionGfm = options?.gfm;
+  const parserOptionMath = options?.math;
+  const parserOptionHtml = options?.html;
+  const parserOptions = useMemo(
+    () =>
+      normalizeParserOptions({
+        gfm: parserOptionGfm,
+        math: parserOptionMath,
+        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",
@@ -184,13 +214,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,7 +234,7 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
         : getNextStreamAst({
             allowIncremental,
             nextText: latest,
-            options,
+            options: parserOptions,
             previousAst: previousState.ast,
             previousText: previousState.text,
           });
@@ -236,6 +272,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 +297,10 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
     }
 
     return () => {
+      pendingUpdateRef.current = false;
+      pendingFromRef.current = null;
+      pendingToRef.current = null;
+      forceFullSyncRef.current = false;
       try {
         unsubscribe?.();
       } catch (error) {
@@ -279,8 +321,7 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
   }, [
     allowIncremental,
     hasBeforeParsePlugins,
-    options,
-    plugins,
+    parserOptions,
     activeSession,
     updateIntervalMs,
     updateStrategy,

package/src/markdown.tsx

@@ -483,8 +483,14 @@ export const Markdown: FC<MarkdownProps> = ({
         math: parserOptionMath,
         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);

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);
@@ -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;
 
@@ -260,6 +268,7 @@ export const MathInline: FC<MathInlineProps> = ({ content, style }) => {
           color={theme.colors.text}
           style={styles.ratexInline}
           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;
 
@@ -300,6 +317,7 @@ export const MathBlock: FC<MathBlockProps> = ({ content, style }) => {
             color={theme.colors.text}
             style={styles.ratexBlock}
             onError={() => {
+              if (!mountedRef.current) return;
               setHasRenderError(true);
             }}
           />

package/src/use-markdown-stream.ts

@@ -21,13 +21,9 @@ export function useMarkdownSession(initialText?: string) {
     const session = sessionRef.current!;
     return () => {
       try {
-        session.clear();
+        session.dispose();
       } finally {
-        try {
-          session.dispose();
-        } finally {
-          sessionRef.current = null;
-        }
+        sessionRef.current = null;
       }
     };
   }, []);

package/src/utils/incremental-ast.ts

@@ -152,6 +152,83 @@ const endsAtBlockBoundary = (text: string): boolean => {
   return text.endsWith("\n") || text.endsWith("\r");
 };
 
+const nodesHaveMatchingMetadata = (
+  previousNode: MarkdownNode,
+  nextNode: MarkdownNode,
+): boolean => {
+  return (
+    previousNode.type === nextNode.type &&
+    previousNode.content === nextNode.content &&
+    previousNode.level === nextNode.level &&
+    previousNode.href === nextNode.href &&
+    previousNode.title === nextNode.title &&
+    previousNode.alt === nextNode.alt &&
+    previousNode.language === nextNode.language &&
+    previousNode.ordered === nextNode.ordered &&
+    previousNode.start === nextNode.start &&
+    previousNode.checked === nextNode.checked &&
+    previousNode.isHeader === nextNode.isHeader &&
+    previousNode.align === nextNode.align &&
+    previousNode.beg === nextNode.beg &&
+    previousNode.end === nextNode.end
+  );
+};
+
+export const reuseStableAstNodes = (
+  previousNode: MarkdownNode,
+  nextNode: MarkdownNode,
+): MarkdownNode => {
+  if (previousNode.type !== nextNode.type) {
+    return nextNode;
+  }
+
+  const hasMatchingMetadata = nodesHaveMatchingMetadata(previousNode, nextNode);
+  const previousChildren = previousNode.children;
+  const nextChildren = nextNode.children;
+
+  if (!previousChildren || !nextChildren) {
+    return hasMatchingMetadata && previousChildren === nextChildren
+      ? previousNode
+      : nextNode;
+  }
+
+  if (previousChildren.length !== nextChildren.length) {
+    return {
+      ...nextNode,
+      children: nextChildren.map((nextChild, index) => {
+        const previousChild = previousChildren[index];
+        return previousChild
+          ? reuseStableAstNodes(previousChild, nextChild)
+          : nextChild;
+      }),
+    };
+  }
+
+  let hasChildChange = false;
+  const children = nextChildren.map((nextChild, index) => {
+    const child = reuseStableAstNodes(previousChildren[index], nextChild);
+    hasChildChange ||= child !== previousChildren[index];
+    return child;
+  });
+
+  if (hasMatchingMetadata && !hasChildChange) {
+    return previousNode;
+  }
+
+  return {
+    ...nextNode,
+    children,
+  };
+};
+
+const parseAstWithStableNodes = (
+  previousAst: MarkdownNode,
+  text: string,
+  options?: ParserOptions,
+): MarkdownNode => {
+  return reuseStableAstNodes(previousAst, parseAst(text, options));
+};
+
 export type IncrementalAstInput = {
   allowIncremental?: boolean;
   nextText: string;
@@ -168,7 +245,7 @@ export const getNextStreamAst = ({
   previousText,
 }: IncrementalAstInput): MarkdownNode => {
   if (!allowIncremental || !nextText.startsWith(previousText)) {
-    return parseAst(nextText, options);
+    return parseAstWithStableNodes(previousAst, nextText, options);
   }
 
   const appendedChunk = nextText.slice(previousText.length);
@@ -194,7 +271,7 @@ export const getNextStreamAst = ({
 
   if (!PLAIN_TEXT_APPEND_PATTERN.test(appendedChunk)) {
     if (endsAtBlockBoundary(previousText)) {
-      return parseAst(nextText, options);
+      return parseAstWithStableNodes(previousAst, nextText, options);
     }
 
     const textAppendedAst = appendPlainTextToAst(
@@ -208,12 +285,12 @@ export const getNextStreamAst = ({
   }
 
   if (insideFencedCodeBlock) {
-    return parseAst(nextText, options);
+    return parseAstWithStableNodes(previousAst, 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);
+  return parseAstWithStableNodes(previousAst, nextText, options);
 };
 
 export const parseMarkdownAst = (