react-native-nitro-markdown 0.4.2 → 0.5.0

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 (

package/src/renderers/list.tsx

@@ -1,14 +1,14 @@
-import { ReactNode, useMemo, type FC } from "react";
+import { useMemo, type FC, type ReactNode } from "react";
 import { View, Text, StyleSheet, Platform, type ViewStyle } from "react-native";
 import { useMarkdownContext } from "../MarkdownContext";
 
-interface ListProps {
+type ListProps = {
   ordered: boolean;
   start?: number;
   depth: number;
   children: ReactNode;
   style?: ViewStyle;
-}
+};
 
 export const List: FC<ListProps> = ({ depth, children, style }) => {
   const { theme } = useMarkdownContext();
@@ -32,13 +32,13 @@ export const List: FC<ListProps> = ({ depth, children, style }) => {
   );
 };
 
-interface ListItemProps {
+type ListItemProps = {
   children: ReactNode;
   index: number;
   ordered: boolean;
   start: number;
   style?: ViewStyle;
-}
+};
 
 export const ListItem: FC<ListItemProps> = ({
   children,
@@ -82,11 +82,11 @@ export const ListItem: FC<ListItemProps> = ({
   );
 };
 
-interface TaskListItemProps {
+type TaskListItemProps = {
   children: ReactNode;
   checked: boolean;
   style?: ViewStyle;
-}
+};
 
 export const TaskListItem: FC<TaskListItemProps> = ({
   children,
@@ -134,12 +134,9 @@ export const TaskListItem: FC<TaskListItemProps> = ({
   return (
     <View style={[styles.taskListItem, style]}>
       <View
-        style={[
-          styles.taskCheckbox,
-          checked && styles.taskCheckboxChecked,
-        ]}
+        style={[styles.taskCheckbox, checked && styles.taskCheckboxChecked]}
       >
-        {checked && <Text style={styles.taskCheckboxText}>✓</Text>}
+        {checked ? <Text style={styles.taskCheckboxText}>✓</Text> : null}
       </View>
       <View style={styles.taskContent}>{children}</View>
     </View>

package/src/renderers/math.tsx

@@ -26,10 +26,10 @@ try {
   // ignored
 }
 
-interface MathInlineProps {
+type MathInlineProps = {
   content?: string;
   style?: ViewStyle;
-}
+};
 
 const createMathStyles = (theme: MarkdownTheme) =>
   StyleSheet.create({
@@ -115,10 +115,10 @@ export const MathInline: FC<MathInlineProps> = ({ content, style }) => {
   );
 };
 
-interface MathBlockProps {
+type MathBlockProps = {
   content?: string;
   style?: ViewStyle;
-}
+};
 
 export const MathBlock: FC<MathBlockProps> = ({ content, style }) => {
   const { theme } = useMarkdownContext();

package/src/renderers/paragraph.tsx

@@ -1,12 +1,12 @@
-import { ReactNode, useMemo, type FC } from "react";
+import { useMemo, type FC, type ReactNode } from "react";
 import { View, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
 import { useMarkdownContext } from "../MarkdownContext";
 
-interface ParagraphProps {
+type ParagraphProps = {
   children: ReactNode;
   inListItem?: boolean;
   style?: StyleProp<ViewStyle>;
-}
+};
 
 export const Paragraph: FC<ParagraphProps> = ({
   children,