react-native-nitro-markdown 0.6.0 → 0.6.2

package/src/MarkdownContext.ts

@@ -12,6 +12,7 @@ import {
   type StylingStrategy,
 } from "./theme";
 import type { CodeHighlighter } from "./utils/code-highlight";
+import type { UrlSafetyOptions } from "./utils/link-security";
 
 export type NodeRendererProps = {
   node: MarkdownNode;
@@ -72,19 +73,60 @@ export type TaskListItemRendererProps = {
   checked: boolean;
 } & BaseCustomRendererProps;
 
-export type CustomRendererProps = {} & EnhancedRendererProps;
+export type MathRendererProps = {
+  content: string;
+} & BaseCustomRendererProps;
+
+export type CustomRendererProps = EnhancedRendererProps;
 
 export type LinkPressHandler = (
   href: string,
 ) => void | boolean | Promise<void | boolean>;
 
-export type CustomRenderer = (
-  props: EnhancedRendererProps,
-) => ReactNode | undefined;
+export type CustomRenderer<
+  Props extends EnhancedRendererProps = EnhancedRendererProps,
+> = (props: Props) => ReactNode | undefined;
+
+export type CustomRendererPropsByNode = {
+  document: CustomRendererProps;
+  heading: HeadingRendererProps;
+  paragraph: CustomRendererProps;
+  text: CustomRendererProps;
+  bold: CustomRendererProps;
+  italic: CustomRendererProps;
+  strikethrough: CustomRendererProps;
+  link: LinkRendererProps;
+  image: ImageRendererProps;
+  code_inline: InlineCodeRendererProps;
+  code_block: CodeBlockRendererProps;
+  blockquote: CustomRendererProps;
+  horizontal_rule: CustomRendererProps;
+  line_break: CustomRendererProps;
+  soft_break: CustomRendererProps;
+  table: CustomRendererProps;
+  table_head: CustomRendererProps;
+  table_body: CustomRendererProps;
+  table_row: CustomRendererProps;
+  table_cell: CustomRendererProps;
+  list: ListRendererProps;
+  list_item: CustomRendererProps;
+  task_list_item: TaskListItemRendererProps;
+  math_inline: MathRendererProps;
+  math_block: MathRendererProps;
+  html_block: CustomRendererProps;
+  html_inline: CustomRendererProps;
+};
+
+export type CustomRenderers = Partial<{
+  [Type in MarkdownNode["type"]]: CustomRenderer<
+    CustomRendererPropsByNode[Type]
+  >;
+}>;
 
-export type CustomRenderers = Partial<
-  Record<MarkdownNode["type"], CustomRenderer>
->;
+export type TableOptions = {
+  minColumnWidth?: number;
+  measurementStabilizeMs?: number;
+};
 
 export type MarkdownContextValue = {
   renderers: CustomRenderers;
@@ -93,10 +135,8 @@ export type MarkdownContextValue = {
   stylingStrategy: StylingStrategy;
   onLinkPress?: LinkPressHandler;
   highlightCode?: boolean | CodeHighlighter;
-  tableOptions?: {
-    minColumnWidth?: number;
-    measurementStabilizeMs?: number;
-  };
+  tableOptions?: TableOptions;
+  imageOptions?: UrlSafetyOptions;
 };
 
 export const MarkdownContext = createContext<MarkdownContextValue>({

package/src/index.ts

@@ -15,6 +15,8 @@ export type {
   MarkdownProps,
   AstTransform,
   MarkdownPlugin,
+  MarkdownErrorPhase,
+  MarkdownParseCompleteResult,
   MarkdownVirtualizationOptions,
 } from "./markdown";
 export { MarkdownStream } from "./markdown-stream";
@@ -35,8 +37,11 @@ export type {
   InlineCodeRendererProps,
   ListRendererProps,
   TaskListItemRendererProps,
+  MathRendererProps,
   LinkPressHandler,
   MarkdownContextValue,
+  CustomRendererPropsByNode,
+  TableOptions,
 } from "./MarkdownContext";
 
 export {
@@ -72,3 +77,4 @@ export type {
   CodeHighlighter,
 } from "./utils/code-highlight";
 export { defaultHighlighter } from "./utils/code-highlight";
+export type { UrlSafetyOptions } from "./utils/link-security";

package/src/markdown-stream.tsx

@@ -58,6 +58,15 @@ const resolveStreamText = ({
   return session.getAllText();
 };
 
+function warnStreamError(message: string, error: unknown): void {
+  if (!__DEV__) return;
+
+  const warn = Reflect.get(console, "warn");
+  if (typeof warn === "function") {
+    warn.call(console, message, error);
+  }
+}
+
 export type MarkdownStreamProps = {
   /**
    * The active MarkdownSession to stream content from.
@@ -124,12 +133,20 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
   const forceFullSyncRef = useRef(false);
   const updateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const rafRef = useRef<number | null>(null);
+  const mountedRef = useRef(true);
   const allowIncremental = incrementalParsing && !hasBeforeParsePlugins;
 
   useEffect(() => {
     renderStateRef.current = renderState;
   }, [renderState]);
 
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
   useEffect(() => {
     const initialText = session.getAllText();
     const initialState = {
@@ -185,9 +202,11 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
         ast: nextAst,
       };
       renderStateRef.current = nextState;
+      if (!mountedRef.current) return;
 
       if (useTransitionUpdates) {
         startTransition(() => {
+          if (!mountedRef.current) return;
           setRenderState(nextState);
         });
       } else {
@@ -208,28 +227,41 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
       }
     };
 
-    const unsubscribe = session.addListener((from, to) => {
-      const nextFrom = normalizeOffset(from);
-      const nextTo = normalizeOffset(to);
+    let unsubscribe: (() => void) | null = null;
 
-      if (nextFrom === null || nextTo === null || nextTo < nextFrom) {
-        forceFullSyncRef.current = true;
-      } else {
-        const currentFrom = pendingFromRef.current;
-        const currentTo = pendingToRef.current;
+    try {
+      unsubscribe = session.addListener((from, to) => {
+        const nextFrom = normalizeOffset(from);
+        const nextTo = normalizeOffset(to);
 
-        pendingFromRef.current =
-          currentFrom === null ? nextFrom : Math.min(currentFrom, nextFrom);
-        pendingToRef.current =
-          currentTo === null ? nextTo : Math.max(currentTo, nextTo);
-      }
+        if (nextFrom === null || nextTo === null || nextTo < nextFrom) {
+          forceFullSyncRef.current = true;
+        } else {
+          const currentFrom = pendingFromRef.current;
+          const currentTo = pendingToRef.current;
 
-      pendingUpdateRef.current = true;
-      scheduleFlush();
-    });
+          pendingFromRef.current =
+            currentFrom === null ? nextFrom : Math.min(currentFrom, nextFrom);
+          pendingToRef.current =
+            currentTo === null ? nextTo : Math.max(currentTo, nextTo);
+        }
+
+        pendingUpdateRef.current = true;
+        scheduleFlush();
+      });
+    } catch (error) {
+      warnStreamError("[NitroMarkdown] Failed to subscribe to stream:", error);
+    }
 
     return () => {
-      unsubscribe();
+      try {
+        unsubscribe?.();
+      } catch (error) {
+        warnStreamError(
+          "[NitroMarkdown] Failed to unsubscribe from stream:",
+          error,
+        );
+      }
       if (updateTimerRef.current) {
         clearTimeout(updateTimerRef.current);
         updateTimerRef.current = null;

package/src/markdown.tsx

@@ -31,9 +31,11 @@ import type { ParserOptions } from "./Markdown.nitro";
 import {
   MarkdownContext,
   useMarkdownContext,
+  type CustomRenderer,
   type CustomRenderers,
   type LinkPressHandler,
   type NodeRendererProps,
+  type TableOptions,
 } from "./MarkdownContext";
 import { Blockquote } from "./renderers/blockquote";
 import { CodeBlock, InlineCode } from "./renderers/code";
@@ -55,6 +57,7 @@ import {
   type StylingStrategy,
 } from "./theme";
 import type { CodeHighlighter } from "./utils/code-highlight";
+import type { UrlSafetyOptions } from "./utils/link-security";
 
 function hashString(str: string): number {
   let hash = 0;
@@ -144,6 +147,14 @@ export type MarkdownPlugin = {
   afterParse?: AstTransform;
 };
 
+export type MarkdownErrorPhase = "parse" | "before-plugin" | "after-plugin";
+
+export type MarkdownParseCompleteResult = {
+  raw: string;
+  ast: MarkdownNode;
+  text: string;
+};
+
 const isMarkdownNode = (value: unknown): value is MarkdownNode => {
   if (typeof value !== "object" || value === null) return false;
   return typeof Reflect.get(value, "type") === "string";
@@ -355,11 +366,7 @@ export type MarkdownProps = {
   /**
    * Callback fired when parsing completes.
    */
-  onParseComplete?: (result: {
-    raw: string;
-    ast: MarkdownNode;
-    text: string;
-  }) => void;
+  onParseComplete?: (result: MarkdownParseCompleteResult) => void;
   /**
    * Called when a parse error or plugin error occurs.
    * @param error - The thrown error.
@@ -368,7 +375,7 @@ export type MarkdownProps = {
    */
   onError?: (
     error: Error,
-    phase: "parse" | "before-plugin" | "after-plugin",
+    phase: MarkdownErrorPhase,
     pluginName?: string,
   ) => void;
   /**
@@ -426,10 +433,8 @@ export type MarkdownProps = {
   /**
    * Optional configuration for the table renderer.
    */
-  tableOptions?: {
-    minColumnWidth?: number;
-    measurementStabilizeMs?: number;
-  };
+  tableOptions?: TableOptions;
+  imageOptions?: UrlSafetyOptions;
   /**
    * Enable built-in syntax highlighting for code blocks.
    * Pass `true` to use the built-in tokenizer, or a custom highlighter function.
@@ -457,6 +462,7 @@ export const Markdown: FC<MarkdownProps> = ({
   virtualizationMinBlocks = 40,
   virtualization,
   tableOptions,
+  imageOptions,
   highlightCode,
 }) => {
   const parserOptionGfm = options?.gfm;
@@ -563,6 +569,7 @@ export const Markdown: FC<MarkdownProps> = ({
       stylingStrategy,
       onLinkPress,
       tableOptions,
+      imageOptions,
       highlightCode,
     }),
     [
@@ -572,6 +579,7 @@ export const Markdown: FC<MarkdownProps> = ({
       stylingStrategy,
       onLinkPress,
       tableOptions,
+      imageOptions,
       highlightCode,
     ],
   );
@@ -625,7 +633,7 @@ export const Markdown: FC<MarkdownProps> = ({
               virtualization?.updateCellsBatchingPeriod ?? 16
             }
             removeClippedSubviews={
-              virtualization?.removeClippedSubviews ?? true
+              virtualization?.removeClippedSubviews ?? Platform.OS === "android"
             }
             bounces={false}
             alwaysBounceVertical={false}
@@ -747,7 +755,7 @@ const NodeRendererComponent: FC<NodeRendererProps> = ({
     return elements;
   };
 
-  const customRenderer = renderers[node.type];
+  const customRenderer = renderers[node.type] as CustomRenderer | undefined;
   if (customRenderer) {
     const childrenRendered = renderChildren(
       node.children,

package/src/renderers/heading.tsx

@@ -34,7 +34,11 @@ export const Heading: FC<HeadingProps> = ({ level, children, style }) => {
     level === 6 && styles.h6,
   ];
 
-  return <Text style={[...headingStyles, style]}>{children}</Text>;
+  return (
+    <Text style={[...headingStyles, style]} accessibilityRole="header">
+      {children}
+    </Text>
+  );
 };
 
 type HeadingStyles = ReturnType<typeof createStyles>;

package/src/renderers/image.tsx

@@ -16,6 +16,7 @@ import {
 } from "react-native";
 import { parseMarkdownWithOptions, type MarkdownNode } from "../headless";
 import { useMarkdownContext } from "../MarkdownContext";
+import { getAllowedImageHref } from "../utils/link-security";
 import type { NodeRendererProps } from "../MarkdownContext";
 
 const renderInlineContent = (
@@ -46,7 +47,11 @@ 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 { theme } = useMarkdownContext();
+  const { theme, imageOptions } = useMarkdownContext();
+  const allowedImageHref = useMemo(
+    () => getAllowedImageHref(url, imageOptions),
+    [imageOptions, url],
+  );
 
   const styles = useMemo(
     () =>
@@ -113,10 +118,18 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
   useEffect(() => {
     let isMounted = true;
     setLoading(true);
-    setError(false);
+    setError(!allowedImageHref);
     setAspectRatio(undefined);
 
-    const picsumMatch = url.match(/picsum\.photos\/.*\/(\d+)\/(\d+)/);
+    if (!allowedImageHref) {
+      return () => {
+        isMounted = false;
+      };
+    }
+
+    const picsumMatch = allowedImageHref.match(
+      /picsum\.photos\/.*\/(\d+)\/(\d+)/,
+    );
     if (picsumMatch) {
       const w = parseInt(picsumMatch[1], 10);
       const h = parseInt(picsumMatch[2], 10);
@@ -129,7 +142,7 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
     }
 
     RNImage.getSize(
-      url,
+      allowedImageHref,
       (width, height) => {
         if (isMounted && width > 0 && height > 0) {
           setAspectRatio(width / height);
@@ -149,7 +162,7 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
     return () => {
       isMounted = false;
     };
-  }, [url]);
+  }, [allowedImageHref]);
 
   const altContent = useMemo(() => {
     if (!alt || !Renderer) return null;
@@ -180,9 +193,16 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
     return <Text style={styles.imageErrorText}>{alt}</Text>;
   }, [alt, Renderer, styles.imageErrorText]);
 
-  if (error) {
+  const accessibilityLabel = alt || title;
+
+  if (error || !allowedImageHref) {
     return (
-      <View style={[styles.imageError, style]}>
+      <View
+        style={[styles.imageError, style]}
+        accessible={Boolean(accessibilityLabel)}
+        accessibilityRole={accessibilityLabel ? "image" : undefined}
+        accessibilityLabel={accessibilityLabel}
+      >
         <View
           style={{
             flexDirection: "row",
@@ -210,9 +230,12 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
         </View>
       ) : null}
       <RNImage
-        source={{ uri: url }}
+        source={{ uri: allowedImageHref ?? "" }}
         style={[styles.image, loading && !aspectRatio && styles.imageHidden]}
         resizeMode="contain"
+        accessible={Boolean(accessibilityLabel)}
+        accessibilityRole={accessibilityLabel ? "image" : undefined}
+        accessibilityLabel={accessibilityLabel}
         onLoad={() => {
           setLoading(false);
         }}

package/src/renderers/link.tsx

@@ -59,7 +59,11 @@ export const Link: FC<LinkProps> = ({ href, children, style }) => {
   };
 
   return (
-    <Text style={[styles.link, style]} onPress={handlePress}>
+    <Text
+      style={[styles.link, style]}
+      onPress={handlePress}
+      accessibilityRole="link"
+    >
       {children}
     </Text>
   );

package/src/renderers/list.tsx

@@ -71,7 +71,11 @@ export const TaskListItem: FC<TaskListItemProps> = ({
     createTaskListItemStyles,
   );
   return (
-    <View style={[styles.taskListItem, style]}>
+    <View
+      style={[styles.taskListItem, style]}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked }}
+    >
       <View
         style={[styles.taskCheckbox, checked && styles.taskCheckboxChecked]}
       >

package/src/use-markdown-stream.ts

@@ -19,7 +19,15 @@ export function useMarkdownSession() {
   useEffect(() => {
     const session = sessionRef.current!;
     return () => {
-      session.clear();
+      try {
+        session.clear();
+      } finally {
+        try {
+          session.dispose();
+        } finally {
+          sessionRef.current = null;
+        }
+      }
     };
   }, []);
 

package/src/utils/link-security.ts

@@ -6,17 +6,81 @@ const ALLOWED_LINK_PROTOCOLS = new Set([
   "sms:",
 ]);
 
+const DEFAULT_IMAGE_PROTOCOLS = ["http:", "https:"] as const;
+const CONTROL_CHARACTER_PATTERN = /[\u0000-\u001F\u007F]/;
+
+export type UrlSafetyOptions = {
+  allowedProtocols?: readonly string[];
+  allowedHosts?: readonly string[];
+};
+
 export const normalizeLinkHref = (href: string): string | null => {
   const normalizedHref = href.trim();
+  if (CONTROL_CHARACTER_PATTERN.test(normalizedHref)) return null;
   return normalizedHref.length > 0 ? normalizedHref : null;
 };
 
-export const getAllowedExternalHref = (href: string): string | null => {
+const parseAbsoluteHref = (
+  href: string,
+): { protocol: string; hostname: 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;
+  const protocol = normalizeProtocol(protocolMatch[1]);
+  const rest = href.slice(protocolMatch[0].length);
+  const authorityMatch = rest.match(/^\/\/([^/?#]*)/);
+  const rawHost = authorityMatch?.[1] ?? "";
+  const hostname = rawHost
+    .replace(/^[^@]*@/, "")
+    .replace(/^\[|\]$/g, "")
+    .split(":")[0]
+    .toLowerCase();
+
+  return { protocol, hostname };
+};
+
+const normalizeProtocol = (protocol: string): string => {
+  const normalized = protocol.trim().toLowerCase();
+  return normalized.endsWith(":") ? normalized : `${normalized}:`;
+};
+
+export const getAllowedExternalHref = (href: string): string | null => {
+  const normalizedHref = normalizeLinkHref(href);
+  if (!normalizedHref) return null;
+
+  const parsed = parseAbsoluteHref(normalizedHref);
+  if (!parsed) return null;
+
+  if (!ALLOWED_LINK_PROTOCOLS.has(parsed.protocol)) return null;
+
+  return normalizedHref;
+};
+
+export const getAllowedImageHref = (
+  href: string,
+  options?: UrlSafetyOptions,
+): string | null => {
+  const normalizedHref = normalizeLinkHref(href);
+  if (!normalizedHref) return null;
+
+  const parsed = parseAbsoluteHref(normalizedHref);
+  if (!parsed) return null;
+
+  const allowedProtocols = new Set(
+    (options?.allowedProtocols ?? DEFAULT_IMAGE_PROTOCOLS).map(
+      normalizeProtocol,
+    ),
+  );
+  if (!allowedProtocols.has(parsed.protocol)) return null;
+
+  const allowedHosts = options?.allowedHosts;
+  if (allowedHosts && allowedHosts.length > 0) {
+    const normalizedHost = parsed.hostname.toLowerCase();
+    const allowedHostSet = new Set(
+      allowedHosts.map((host) => host.trim().toLowerCase()).filter(Boolean),
+    );
+    if (!allowedHostSet.has(normalizedHost)) return null;
+  }
 
-  return href;
+  return normalizedHref;
 };