react-native-nitro-markdown 0.7.2 → 0.8.0

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,11 +477,14 @@ 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) ||
@@ -566,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,
@@ -779,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") && {
@@ -795,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 }),
     };
@@ -816,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>
       );
@@ -859,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>
       );
@@ -868,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>;
@@ -910,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 }
+            : {})}
+        />
       );
     }
 
@@ -918,7 +950,7 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
       return (
         <MathBlock
           content={getTextContent(node)}
-          style={nodeStyles?.math_block}
+          {...(nodeStyles?.math_block ? { style: nodeStyles.math_block } : {})}
         />
       );
 
@@ -926,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") {
@@ -968,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>
@@ -979,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

@@ -140,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 () => {

package/src/renderers/math.tsx

@@ -265,8 +265,8 @@ 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);
@@ -314,8 +314,8 @@ 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,

package/src/utils/code-highlight.ts

@@ -182,7 +182,7 @@ export function defaultHighlighter(
   const lines = code.split("\n");
   const result: HighlightedToken[] = [];
   for (let i = 0; i < lines.length; i++) {
-    result.push(...tokenizeLine(lines[i], language));
+    result.push(...tokenizeLine(lines[i] ?? "", language));
     if (i < lines.length - 1) {
       result.push({ text: "\n", type: "default" });
     }

package/src/utils/incremental-ast.ts

@@ -24,7 +24,7 @@ const isInsideFencedCodeBlock = (text: string): boolean => {
     const fenceMatch = line.match(FENCE_LINE_PATTERN);
     if (!fenceMatch) continue;
 
-    const marker = fenceMatch[1];
+    const marker = fenceMatch[1] ?? "";
     const markerChar = marker[0] as "`" | "~";
     const markerLength = marker.length;
 
@@ -94,7 +94,11 @@ const findTrailingLeafPath = (
   }
 
   const lastIndex = children.length - 1;
-  return findTrailingLeafPath(children[lastIndex], [...path, lastIndex]);
+  const lastChild = children[lastIndex];
+  if (lastChild === undefined) {
+    return path;
+  }
+  return findTrailingLeafPath(lastChild, [...path, lastIndex]);
 };
 
 const getNodeAtPath = (
@@ -126,11 +130,14 @@ const appendPlainTextToAst = (
   const delta = appendedChunk.length;
   const update = (node: MarkdownNode, depth: number): MarkdownNode => {
     if (depth === path.length) {
-      return {
+      const updatedNode: MarkdownNode = {
         ...node,
         content: (node.content ?? "") + appendedChunk,
-        end: typeof node.end === "number" ? node.end + delta : node.end,
       };
+      if (typeof node.end === "number") {
+        updatedNode.end = node.end + delta;
+      }
+      return updatedNode;
     }
 
     const childIndex = path[depth];
@@ -138,11 +145,16 @@ const appendPlainTextToAst = (
       index === childIndex ? update(child, depth + 1) : child,
     );
 
-    return {
+    const updatedNode: MarkdownNode = {
       ...node,
-      end: typeof node.end === "number" ? node.end + delta : node.end,
-      children,
     };
+    if (typeof node.end === "number") {
+      updatedNode.end = node.end + delta;
+    }
+    if (children) {
+      updatedNode.children = children;
+    }
+    return updatedNode;
   };
 
   return update(ast, 0);
@@ -206,8 +218,12 @@ export const reuseStableAstNodes = (
 
   let hasChildChange = false;
   const children = nextChildren.map((nextChild, index) => {
-    const child = reuseStableAstNodes(previousChildren[index], nextChild);
-    hasChildChange ||= child !== previousChildren[index];
+    const previousChild = previousChildren[index];
+    const child =
+      previousChild === undefined
+        ? nextChild
+        : reuseStableAstNodes(previousChild, nextChild);
+    hasChildChange ||= child !== previousChild;
     return child;
   });
 

package/src/utils/link-security.ts

@@ -26,14 +26,14 @@ const parseAbsoluteHref = (
   const protocolMatch = href.match(/^([a-z][a-z0-9+.-]*):/i);
   if (!protocolMatch) return null;
 
-  const protocol = normalizeProtocol(protocolMatch[1]);
+  const protocol = normalizeProtocol(protocolMatch[1] ?? "");
   const rest = href.slice(protocolMatch[0].length);
   const authorityMatch = rest.match(/^\/\/([^/?#]*)/);
   const rawHost = authorityMatch?.[1] ?? "";
-  const hostname = rawHost
+  const hostname = (rawHost
     .replace(/^[^@]*@/, "")
     .replace(/^\[|\]$/g, "")
-    .split(":")[0]
+    .split(":")[0] ?? "")
     .toLowerCase();
 
   return { protocol, hostname };

package/src/utils/stream-timeline.ts

@@ -19,15 +19,17 @@ export const createTimestampTimeline = (
     .map(Number)
     .filter((index) => Number.isFinite(index))
     .sort((a, b) => a - b)
-    .map((index) => ({
-      index,
-      time: timestamps[index],
-    }))
+    .flatMap((index) => {
+      const time = timestamps[index];
+      return time === undefined ? [] : [{ index, time }];
+    })
     .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) {
+    const current = entries[i];
+    const previous = entries[i - 1];
+    if (current && previous && current.time < previous.time) {
       monotonic = false;
       break;
     }
@@ -59,7 +61,8 @@ export const resolveHighlightPosition = (
 
   while (left <= right) {
     const mid = (left + right) >> 1;
-    if (entries[mid].time <= currentTimeMs) {
+    const entry = entries[mid];
+    if (entry !== undefined && entry.time <= currentTimeMs) {
       resolvedIndex = mid;
       left = mid + 1;
     } else {
@@ -68,5 +71,5 @@ export const resolveHighlightPosition = (
   }
 
   if (resolvedIndex === -1) return 0;
-  return entries[resolvedIndex].index + 1;
+  return (entries[resolvedIndex]?.index ?? 0) + 1;
 };