react-native-nitro-markdown 0.6.1 → 0.6.2

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;
 };