feat: add support for plugins

eslint.config.mjs

@@ -29,6 +29,7 @@ export default defineConfig([
       },
     },
     rules: {
+      "react/prop-types": "off",
       "react/react-in-jsx-scope": "off",
       "react-hooks/rules-of-hooks": "error",
       "react-hooks/exhaustive-deps": "error",

example/App.tsx

@@ -2,15 +2,14 @@ import {
   ActionSheetProvider,
   useActionSheet,
 } from "@expo/react-native-action-sheet";
-import { Markdown } from "@react-native-remark";
-import { themes } from "@react-native-remark";
+import { Markdown, themes } from "@react-native-remark";
 import {
   createStaticNavigation,
   useNavigation,
 } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { StatusBar } from "expo-status-bar";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   ActivityIndicator,
   Alert,
@@ -19,6 +18,11 @@ import {
   ScrollView,
   useColorScheme,
 } from "react-native";
+import rehypeParse from "rehype-parse";
+import rehypeRemark from "rehype-remark";
+import { PluggableList } from "unified";
+
+import { sampleHTML } from "./samples/html";
 
 const { defaultTheme, githubTheme, serifTheme } = themes;
 
@@ -30,10 +34,23 @@ const HomeScreen = () => {
   const colorScheme = useColorScheme();
   const navigation = useNavigation();
   const { showActionSheetWithOptions } = useActionSheet();
-  const [url, setUrl] = useState(URL);
   const [markdown, setMarkdown] = useState("");
   const [theme, setTheme] = useState(defaultTheme);
   const [loading, setLoading] = useState(false);
+  const [plugins, setPlugins] = useState<PluggableList>();
+
+  const loadMarkdown = useCallback((url: string) => {
+    setLoading(true);
+
+    const controller = new AbortController();
+
+    fetch(url, { signal: controller.signal })
+      .then((res) => res.text())
+      .then((text) => setMarkdown(text))
+      .finally(() => setTimeout(() => setLoading(false), 1000));
+
+    return controller;
+  }, []);
 
   useEffect(() => {
     navigation.setOptions({
@@ -103,7 +120,11 @@ const HomeScreen = () => {
                 url: `${BASE_URL}/04_pytorch.md`,
               },
               {
-                title: "5. Load from URL",
+                title: "5. HTML",
+                url: "html-sample",
+              },
+              {
+                title: "6. Load from URL",
                 url: "",
               },
             ];
@@ -115,28 +136,41 @@ const HomeScreen = () => {
               },
               (idx?: number) => {
                 if (!idx || idx === cancelButtonIndex) return;
+
+                if (options[idx].url === "html-sample") {
+                  setMarkdown(sampleHTML);
+                  setPlugins([rehypeParse, rehypeRemark]);
+                  return;
+                }
+
                 if (idx === options.length - 1) {
                   Alert.prompt("Load Markdown from URL", "", (url) => {
-                    setUrl(url);
+                    loadMarkdown(url);
                   });
                   return;
                 }
-                setUrl(options[idx].url);
+
+                setPlugins(undefined);
+                loadMarkdown(options[idx].url);
               },
             );
           }}
         />
       ),
     });
-  }, [colorScheme, navigation, showActionSheetWithOptions, setTheme, setUrl]);
+  }, [
+    colorScheme,
+    navigation,
+    showActionSheetWithOptions,
+    setTheme,
+    loadMarkdown,
+  ]);
 
   useEffect(() => {
-    setLoading(true);
-    fetch(url)
-      .then((res) => res.text())
-      .then((text) => setMarkdown(text))
-      .finally(() => setTimeout(() => setLoading(false), 1000));
-  }, [url]);
+    const controller = loadMarkdown(URL);
+
+    return controller.abort;
+  }, [loadMarkdown]);
 
   return (
     <ScrollView
@@ -153,6 +187,7 @@ const HomeScreen = () => {
         <Markdown
           markdown={markdown}
           theme={theme}
+          remarkPlugins={plugins}
           onLinkPress={(url) => Linking.openURL(url)}
         />
       )}

example/package.json

@@ -16,7 +16,9 @@
     "expo-status-bar": "~2.2.3",
     "react": "19.0.0",
     "react-native": "0.79.4",
-    "react-native-remark": "file:../"
+    "react-native-remark": "file:../",
+    "rehype-parse": "^9.0.1",
+    "rehype-remark": "^10.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",