react-native-nitro-markdown 0.4.1 → 0.4.3

package/src/MarkdownContext.ts

@@ -4,28 +4,28 @@ import {
   type ReactNode,
   type ComponentType,
 } from "react";
+import type { MarkdownNode } from "./headless";
 import {
   defaultMarkdownTheme,
   type MarkdownTheme,
   type NodeStyleOverrides,
   type StylingStrategy,
 } from "./theme";
-import type { MarkdownNode } from "./headless";
 
-export interface NodeRendererProps {
+export type NodeRendererProps = {
   node: MarkdownNode;
   depth: number;
   inListItem: boolean;
   parentIsText?: boolean;
-}
+};
 
-export interface BaseCustomRendererProps {
+export type BaseCustomRendererProps = {
   node: MarkdownNode;
   children: ReactNode;
   Renderer: ComponentType<NodeRendererProps>;
-}
+};
 
-export interface EnhancedRendererProps extends BaseCustomRendererProps {
+export type EnhancedRendererProps = {
   level?: 1 | 2 | 3 | 4 | 5 | 6;
   href?: string;
   title?: string;
@@ -36,63 +36,69 @@ export interface EnhancedRendererProps extends BaseCustomRendererProps {
   ordered?: boolean;
   start?: number;
   checked?: boolean;
-}
+} & BaseCustomRendererProps;
 
-export interface HeadingRendererProps extends BaseCustomRendererProps {
+export type HeadingRendererProps = {
   level: 1 | 2 | 3 | 4 | 5 | 6;
-}
+} & BaseCustomRendererProps;
 
-export interface LinkRendererProps extends BaseCustomRendererProps {
+export type LinkRendererProps = {
   href: string;
   title?: string;
-}
+} & BaseCustomRendererProps;
 
-export interface ImageRendererProps extends BaseCustomRendererProps {
+export type ImageRendererProps = {
   url: string;
   alt?: string;
   title?: string;
-}
+} & BaseCustomRendererProps;
 
-export interface CodeBlockRendererProps extends BaseCustomRendererProps {
+export type CodeBlockRendererProps = {
   content: string;
   language?: string;
-}
+} & BaseCustomRendererProps;
 
-export interface InlineCodeRendererProps extends BaseCustomRendererProps {
+export type InlineCodeRendererProps = {
   content: string;
-}
+} & BaseCustomRendererProps;
 
-export interface ListRendererProps extends BaseCustomRendererProps {
+export type ListRendererProps = {
   ordered: boolean;
   start?: number;
-}
+} & BaseCustomRendererProps;
 
-export interface TaskListItemRendererProps extends BaseCustomRendererProps {
+export type TaskListItemRendererProps = {
   checked: boolean;
-}
+} & BaseCustomRendererProps;
+
+export type CustomRendererProps = {} & EnhancedRendererProps;
 
-export interface CustomRendererProps extends EnhancedRendererProps {}
+export type LinkPressHandler = (
+  href: string,
+) => void | boolean | Promise<void | boolean>;
 
 export type CustomRenderer = (
-  props: EnhancedRendererProps
+  props: EnhancedRendererProps,
 ) => ReactNode | undefined;
 
 export type CustomRenderers = Partial<
   Record<MarkdownNode["type"], CustomRenderer>
 >;
 
-export interface MarkdownContextValue {
+export type MarkdownContextValue = {
   renderers: CustomRenderers;
   theme: MarkdownTheme;
   styles?: NodeStyleOverrides;
   stylingStrategy: StylingStrategy;
-}
+  onLinkPress?: LinkPressHandler;
+};
 
 export const MarkdownContext = createContext<MarkdownContextValue>({
   renderers: {},
   theme: defaultMarkdownTheme,
   styles: undefined,
   stylingStrategy: "opinionated",
+  onLinkPress: undefined,
 });
 
 export const useMarkdownContext = () => useContext(MarkdownContext);

package/src/headless.ts

@@ -19,7 +19,7 @@ export type { ParserOptions } from "./Markdown.nitro";
  * Represents a node in the Markdown AST (Abstract Syntax Tree).
  * Each node has a type and optional properties depending on the node type.
  */
-export interface MarkdownNode {
+export type MarkdownNode = {
   /** The type of markdown element this node represents. Used to decide how to render the node. */
   type:
     | "document"
@@ -73,7 +73,7 @@ export interface MarkdownNode {
   align?: string;
   /** Nested child nodes for hierarchical elements like paragraphs, lists, and tables. */
   children?: MarkdownNode[];
-}
+};
 
 export const MarkdownParserModule =
   NitroModules.createHybridObject<MarkdownParser>("MarkdownParser");

package/src/index.ts

@@ -18,6 +18,7 @@ export type {
   InlineCodeRendererProps,
   ListRendererProps,
   TaskListItemRendererProps,
+  LinkPressHandler,
   MarkdownContextValue,
 } from "./MarkdownContext";
 

package/src/markdown-stream.tsx

@@ -1,14 +1,8 @@
-import {
-  useState,
-  useEffect,
-  useRef,
-  startTransition,
-  type FC,
-} from "react";
+import { useState, useEffect, useRef, startTransition, type FC } from "react";
 import { Markdown, type MarkdownProps } from "./markdown";
 import type { MarkdownSession } from "./specs/MarkdownSession.nitro";
 
-export interface MarkdownStreamProps extends Omit<MarkdownProps, "children"> {
+export type MarkdownStreamProps = {
   /**
    * The active MarkdownSession to stream content from.
    */
@@ -29,7 +23,7 @@ export interface MarkdownStreamProps extends Omit<MarkdownProps, "children"> {
    * Useful when you want to prioritize user interactions over stream renders.
    */
   useTransitionUpdates?: boolean;
-}
+} & Omit<MarkdownProps, "children">;
 
 /**
  * A component that renders streaming Markdown from a MarkdownSession.
@@ -68,7 +62,9 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
       lastEmittedRef.current = latest;
 
       if (useTransitionUpdates) {
-        startTransition(() => setText(latest));
+        startTransition(() => {
+          setText(latest);
+        });
       } else {
         setText(latest);
       }

package/src/markdown.tsx

@@ -1,13 +1,11 @@
 import {
-  defaultMarkdownTheme,
-  minimalMarkdownTheme,
-  mergeThemes,
-  type MarkdownTheme,
-  type PartialMarkdownTheme,
-  type NodeStyleOverrides,
-  type StylingStrategy,
-} from "./theme";
-import { useMemo, type ReactNode, type FC, Fragment } from "react";
+  useEffect,
+  useMemo,
+  type FC,
+  Fragment,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 import {
   StyleSheet,
   View,
@@ -28,21 +26,32 @@ import {
   MarkdownContext,
   useMarkdownContext,
   type CustomRenderers,
+  type LinkPressHandler,
   type NodeRendererProps,
 } from "./MarkdownContext";
-
-import { Heading } from "./renderers/heading";
-import { Paragraph } from "./renderers/paragraph";
-import { Link } from "./renderers/link";
 import { Blockquote } from "./renderers/blockquote";
-import { HorizontalRule } from "./renderers/horizontal-rule";
 import { CodeBlock, InlineCode } from "./renderers/code";
-import { List, ListItem, TaskListItem } from "./renderers/list";
-import { TableRenderer } from "./renderers/table";
+import { Heading } from "./renderers/heading";
+import { HorizontalRule } from "./renderers/horizontal-rule";
 import { Image } from "./renderers/image";
+import { Link } from "./renderers/link";
+import { List, ListItem, TaskListItem } from "./renderers/list";
 import { MathInline, MathBlock } from "./renderers/math";
+import { Paragraph } from "./renderers/paragraph";
+import { TableRenderer } from "./renderers/table";
+import {
+  defaultMarkdownTheme,
+  minimalMarkdownTheme,
+  mergeThemes,
+  type MarkdownTheme,
+  type PartialMarkdownTheme,
+  type NodeStyleOverrides,
+  type StylingStrategy,
+} from "./theme";
 
-export interface MarkdownProps {
+const baseStylesCache = new WeakMap<MarkdownTheme, BaseStyles>();
+
+export type MarkdownProps = {
   /**
    * The markdown string to parse and render.
    */
@@ -93,7 +102,12 @@ export interface MarkdownProps {
    * Optional style for the container view.
    */
   style?: StyleProp<ViewStyle>;
-}
+  /**
+   * Optional link press handler.
+   * Return false to prevent the default openURL behavior.
+   */
+  onLinkPress?: LinkPressHandler;
+};
 
 export const Markdown: FC<MarkdownProps> = ({
   children,
@@ -105,34 +119,42 @@ export const Markdown: FC<MarkdownProps> = ({
   style,
   onParsingInProgress,
   onParseComplete,
+  onLinkPress,
 }) => {
-  const ast = useMemo(() => {
+  const parseResult = useMemo(() => {
     try {
-      if (onParsingInProgress) {
-        onParsingInProgress();
-      }
-
-      let result: MarkdownNode;
+      let ast: MarkdownNode;
       if (options) {
-        result = parseMarkdownWithOptions(children, options);
+        ast = parseMarkdownWithOptions(children, options);
       } else {
-        result = parseMarkdown(children);
+        ast = parseMarkdown(children);
       }
 
-      if (onParseComplete) {
-        onParseComplete({
-          raw: children,
-          ast: result,
-          text: getFlattenedText(result),
-        });
-      }
-
-      return result;
-    } catch (error) {
-      console.error("Failed to parse markdown:", error);
-      return null;
+      return {
+        ast,
+        text: getFlattenedText(ast),
+      };
+    } catch {
+      return {
+        ast: null,
+        text: "",
+      };
     }
-  }, [children, options, onParsingInProgress, onParseComplete]);
+  }, [children, options]);
+
+  useEffect(() => {
+    onParsingInProgress?.();
+  }, [children, options, onParsingInProgress]);
+
+  useEffect(() => {
+    if (!parseResult.ast) return;
+
+    onParseComplete?.({
+      raw: children,
+      ast: parseResult.ast,
+      text: parseResult.text,
+    });
+  }, [children, onParseComplete, parseResult.ast, parseResult.text]);
 
   const theme = useMemo(() => {
     const base =
@@ -142,9 +164,9 @@ export const Markdown: FC<MarkdownProps> = ({
     return mergeThemes(base, userTheme);
   }, [userTheme, stylingStrategy]);
 
-  const baseStyles = useMemo(() => createBaseStyles(theme), [theme]);
+  const baseStyles = getBaseStyles(theme);
 
-  if (!ast) {
+  if (!parseResult.ast) {
     return (
       <View style={[baseStyles.container, style]}>
         <Text style={baseStyles.errorText}>Error parsing markdown</Text>
@@ -154,10 +176,16 @@ export const Markdown: FC<MarkdownProps> = ({
 
   return (
     <MarkdownContext.Provider
-      value={{ renderers, theme, styles: nodeStyles, stylingStrategy }}
+      value={{
+        renderers,
+        theme,
+        styles: nodeStyles,
+        stylingStrategy,
+        onLinkPress,
+      }}
     >
       <View style={[baseStyles.container, style]}>
-        <NodeRenderer node={ast} depth={0} inListItem={false} />
+        <NodeRenderer node={parseResult.ast} depth={0} inListItem={false} />
       </View>
     </MarkdownContext.Provider>
   );
@@ -185,7 +213,7 @@ const NodeRenderer: FC<NodeRendererProps> = ({
   parentIsText = false,
 }) => {
   const { renderers, theme, styles: nodeStyles } = useMarkdownContext();
-  const baseStyles = useMemo(() => createBaseStyles(theme), [theme]);
+  const baseStyles = getBaseStyles(theme);
 
   const renderChildren = (
     children?: MarkdownNode[],
@@ -308,7 +336,9 @@ const NodeRenderer: FC<NodeRendererProps> = ({
     };
 
     const result = customRenderer(enhancedProps);
-    if (result !== undefined) return <>{result}</>;
+    if (result !== undefined) {
+      return result as ReactElement | null;
+    }
   }
 
   const nodeStyleOverride = nodeStyles?.[node.type];
@@ -491,6 +521,17 @@ const NodeRenderer: FC<NodeRendererProps> = ({
   }
 };
 
+type BaseStyles = ReturnType<typeof createBaseStyles>;
+
+const getBaseStyles = (theme: MarkdownTheme): BaseStyles => {
+  const cached = baseStylesCache.get(theme);
+  if (cached) return cached;
+
+  const created = createBaseStyles(theme);
+  baseStylesCache.set(theme, created);
+  return created;
+};
+
 const createBaseStyles = (theme: MarkdownTheme) =>
   StyleSheet.create({
     container: {

package/src/renderers/blockquote.tsx

@@ -1,11 +1,11 @@
-import { ReactNode, useMemo, type FC } from "react";
+import { useMemo, type FC, type ReactNode } from "react";
 import { View, StyleSheet, type ViewStyle } from "react-native";
 import { useMarkdownContext } from "../MarkdownContext";
 
-interface BlockquoteProps {
+type BlockquoteProps = {
   children: ReactNode;
   style?: ViewStyle;
-}
+};
 
 export const Blockquote: FC<BlockquoteProps> = ({ children, style }) => {
   const { theme } = useMarkdownContext();
@@ -23,7 +23,7 @@ export const Blockquote: FC<BlockquoteProps> = ({ children, style }) => {
           borderRadius: theme.borderRadius.s,
         },
       }),
-    [theme]
+    [theme],
   );
 
   return <View style={[styles.blockquote, style]}>{children}</View>;

package/src/renderers/code.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useMemo, type FC } from "react";
+import { useMemo, type FC, type ReactNode } from "react";
 import {
   View,
   Text,
@@ -8,16 +8,16 @@ import {
   type ViewStyle,
   type TextStyle,
 } from "react-native";
+import { getTextContent } from "../headless";
 import { useMarkdownContext } from "../MarkdownContext";
 import type { MarkdownNode } from "../headless";
-import { getTextContent } from "../headless";
 
-interface CodeBlockProps {
+type CodeBlockProps = {
   language?: string;
   content?: string;
   node?: MarkdownNode;
   style?: ViewStyle;
-}
+};
 
 export const CodeBlock: FC<CodeBlockProps> = ({
   language,
@@ -60,14 +60,16 @@ export const CodeBlock: FC<CodeBlockProps> = ({
           ...(Platform.OS === "android" && { includeFontPadding: false }),
         },
       }),
-    [theme]
+    [theme],
   );
 
   const showLanguage = theme.showCodeLanguage && language;
 
   return (
     <View style={[styles.codeBlock, style]}>
-      {showLanguage && <Text style={styles.codeLanguage}>{language}</Text>}
+      {showLanguage ? (
+        <Text style={styles.codeLanguage}>{language}</Text>
+      ) : null}
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
         <Text style={styles.codeBlockText}>{displayContent}</Text>
       </ScrollView>
@@ -75,12 +77,12 @@ export const CodeBlock: FC<CodeBlockProps> = ({
   );
 };
 
-interface InlineCodeProps {
+type InlineCodeProps = {
   content?: string;
   node?: MarkdownNode;
   children?: ReactNode;
   style?: TextStyle;
-}
+};
 
 export const InlineCode: FC<InlineCodeProps> = ({
   content,
@@ -109,7 +111,7 @@ export const InlineCode: FC<InlineCodeProps> = ({
           ...(Platform.OS === "android" && { includeFontPadding: false }),
         },
       }),
-    [theme]
+    [theme],
   );
   return <Text style={[styles.codeInline, style]}>{displayContent}</Text>;
 };

package/src/renderers/heading.tsx

@@ -1,12 +1,12 @@
-import { ReactNode, useMemo, type FC } from "react";
+import { useMemo, type FC, type ReactNode } from "react";
 import { Text, StyleSheet, Platform, type TextStyle } from "react-native";
 import { useMarkdownContext } from "../MarkdownContext";
 
-interface HeadingProps {
+type HeadingProps = {
   level: number;
   children: ReactNode;
   style?: TextStyle;
-}
+};
 
 const ANDROID_SYSTEM_FONTS = new Set([
   "sans-serif",
@@ -71,7 +71,7 @@ export const Heading: FC<HeadingProps> = ({ level, children, style }) => {
           color: theme.colors.textMuted,
         },
       }),
-    [theme]
+    [headingWeight, theme],
   );
 
   const headingStyles = [

package/src/renderers/horizontal-rule.tsx

@@ -2,9 +2,9 @@ import { useMemo, type FC } from "react";
 import { View, StyleSheet, type ViewStyle } from "react-native";
 import { useMarkdownContext } from "../MarkdownContext";
 
-interface HorizontalRuleProps {
+type HorizontalRuleProps = {
   style?: ViewStyle;
-}
+};
 
 export const HorizontalRule: FC<HorizontalRuleProps> = ({ style }) => {
   const { theme } = useMarkdownContext();
@@ -17,7 +17,7 @@ export const HorizontalRule: FC<HorizontalRuleProps> = ({ style }) => {
           marginVertical: theme.spacing.xl,
         },
       }),
-    [theme]
+    [theme],
   );
   return <View style={[styles.horizontalRule, style]} />;
 };

package/src/renderers/image.tsx

@@ -1,6 +1,5 @@
 import {
   useState,
-  useEffect,
   useLayoutEffect,
   useMemo,
   type ReactNode,
@@ -15,10 +14,9 @@ import {
   Platform,
   type ViewStyle,
 } from "react-native";
-
 import { parseMarkdownWithOptions, type MarkdownNode } from "../headless";
-import type { NodeRendererProps } from "../MarkdownContext";
 import { useMarkdownContext } from "../MarkdownContext";
+import type { NodeRendererProps } from "../MarkdownContext";
 
 const renderInlineContent = (
   node: MarkdownNode,
@@ -36,13 +34,13 @@ const renderInlineContent = (
   return null;
 };
 
-interface ImageProps {
+type ImageProps = {
   url: string;
   title?: string;
   alt?: string;
   Renderer?: ComponentType<NodeRendererProps>;
   style?: ViewStyle;
-}
+};
 
 export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
   const [loading, setLoading] = useState(true);
@@ -187,22 +185,26 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
 
   return (
     <View style={[styles.imageContainer, style]}>
-      {loading && !aspectRatio && (
+      {loading && !aspectRatio ? (
         <View style={styles.imageLoading}>
           <Text style={styles.imageLoadingText}>Loading image...</Text>
         </View>
-      )}
+      ) : null}
       <RNImage
         source={{ uri: url }}
         style={[styles.image, loading && !aspectRatio && styles.imageHidden]}
         resizeMode="contain"
-        onLoad={() => setLoading(false)}
+        onLoad={() => {
+          setLoading(false);
+        }}
         onError={() => {
           setLoading(false);
           setError(true);
         }}
       />
-      {title && !loading && <Text style={styles.imageCaption}>{title}</Text>}
+      {title && !loading ? (
+        <Text style={styles.imageCaption}>{title}</Text>
+      ) : null}
     </View>
   );
 };

package/src/renderers/link.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useMemo, type FC } from "react";
+import { useMemo, type FC, type ReactNode } from "react";
 import {
   Text,
   StyleSheet,
@@ -7,15 +7,19 @@ import {
   type TextStyle,
 } from "react-native";
 import { useMarkdownContext } from "../MarkdownContext";
+import {
+  getAllowedExternalHref,
+  normalizeLinkHref,
+} from "../utils/link-security";
 
-interface LinkProps {
+type LinkProps = {
   href: string;
   children: ReactNode;
   style?: TextStyle;
-}
+};
 
 export const Link: FC<LinkProps> = ({ href, children, style }) => {
-  const { theme } = useMarkdownContext();
+  const { theme, onLinkPress } = useMarkdownContext();
   const styles = useMemo(
     () =>
       StyleSheet.create({
@@ -27,11 +31,25 @@ export const Link: FC<LinkProps> = ({ href, children, style }) => {
           ...(Platform.OS === "android" && { includeFontPadding: false }),
         },
       }),
-    [theme]
+    [theme],
   );
 
-  const handlePress = () => {
-    if (href) Linking.openURL(href);
+  const handlePress = async () => {
+    const normalizedHref = normalizeLinkHref(href);
+    if (!normalizedHref) return;
+
+    try {
+      const shouldOpen = (await onLinkPress?.(normalizedHref)) !== false;
+      if (!shouldOpen) return;
+
+      const allowedExternalHref = getAllowedExternalHref(normalizedHref);
+      if (!allowedExternalHref) return;
+
+      const canOpen = await Linking.canOpenURL(allowedExternalHref);
+      if (!canOpen) return;
+
+      await Linking.openURL(allowedExternalHref);
+    } catch {}
   };
 
   return (