fix: footnote definition and list rendering (#32)

Author: imwithye

markdown/01_markdown_sample.md

@@ -1,6 +1,6 @@
 # React Native Remark
 
-# h1 Heading 8-)
+# h1 Heading
 ## h2 Heading
 ### h3 Heading
 #### h4 Heading
@@ -78,6 +78,13 @@ Start numbering with offset:
 57. foo
 1. bar
 
+List with heading
+
+- # Title
+- ## Sub title
+- ### Test
+- body
+
 
 ## Code
 

src/renderers/footnoteDefinition.tsx

@@ -1,8 +1,9 @@
 import { BlockContent, DefinitionContent, FootnoteDefinition } from "mdast";
 import { Fragment, ReactNode } from "react";
-import { Text } from "react-native";
+import { Text, View } from "react-native";
 
 import { useMarkdownContext } from "../context";
+import { mergeStyles } from "../themes/themes";
 import { RendererArgs } from "./renderers";
 
 export const FootnoteDefinitionRenderer = ({
@@ -11,23 +12,32 @@ export const FootnoteDefinitionRenderer = ({
   const { renderers, styles } = useMarkdownContext();
   const { BlockContentRenderer, DefinitionContentRenderer } = renderers;
 
+  const mergedStyles = mergeStyles(styles.paragraph, {
+    fontWeight: "500",
+    textDecorationLine: "underline",
+  });
+
   return (
-    <Text style={styles.footnoteDefinition}>
-      <Text>[{node.identifier}]: </Text>
-      {node.children.map((child, idx) => (
-        <Fragment key={idx}>
-          <BlockContentRenderer
-            node={child as BlockContent}
-            index={idx}
-            parent={node}
-          />
-          <DefinitionContentRenderer
-            node={child as DefinitionContent}
-            index={idx}
-            parent={node}
-          />
-        </Fragment>
-      ))}
-    </Text>
+    <View style={{ flexDirection: "row" }}>
+      <View>
+        <Text style={mergedStyles}>[{node.identifier}]: </Text>
+      </View>
+      <View style={{ flex: 1 }}>
+        {node.children.map((child, idx) => (
+          <Fragment key={idx}>
+            <BlockContentRenderer
+              node={child as BlockContent}
+              index={idx}
+              parent={node}
+            />
+            <DefinitionContentRenderer
+              node={child as DefinitionContent}
+              index={idx}
+              parent={node}
+            />
+          </Fragment>
+        ))}
+      </View>
+    </View>
   );
 };

src/renderers/list.tsx

@@ -1,5 +1,5 @@
 import { BlockContent, DefinitionContent, List, ListItem } from "mdast";
-import { Fragment, ReactNode } from "react";
+import { Fragment, ReactNode, useMemo } from "react";
 import { Text, View } from "react-native";
 
 import { useMarkdownContext } from "../context";
@@ -29,20 +29,30 @@ export const ListItemRenderer = ({
   const { renderers, styles } = useMarkdownContext();
   const { BlockContentRenderer, DefinitionContentRenderer } = renderers;
 
-  const markerStyle = mergeStyles(styles.paragraph, {
-    marginRight: 5,
-  });
-
   const list = parent?.type === "list" ? (parent as List) : null;
   const itemNumber = (list?.start ?? 1) + (index ?? 0);
 
+  const markerStyle = useMemo(() => {
+    const defaultStyle = mergeStyles(styles.paragraph, {
+      fontWeight: "500",
+    });
+    const firstItem = node.children[0];
+    if (!firstItem) return defaultStyle;
+    if (firstItem.type === "heading") {
+      return styles.heading?.(firstItem.depth);
+    }
+    return defaultStyle;
+  }, [styles, node]);
+
   return (
     <View style={{ flexDirection: "row" }}>
-      {list?.ordered ? (
-        <Text style={markerStyle}>{itemNumber}.</Text>
-      ) : (
-        <Text style={markerStyle}>•</Text>
-      )}
+      <View style={{ marginRight: 5 }}>
+        {list?.ordered ? (
+          <Text style={markerStyle}>{itemNumber}.</Text>
+        ) : (
+          <Text style={markerStyle}>•</Text>
+        )}
+      </View>
       <View style={styles.listItem}>
         {node.children.map((child, idx) => (
           <Fragment key={idx}>

src/renderers/text.tsx

@@ -8,7 +8,7 @@ import { RendererArgs } from "./renderers";
 export const TextRenderer = ({ node }: RendererArgs<MdText>): ReactNode => {
   const { styles } = useMarkdownContext();
 
-  const value = node.value || "";
+  const value = (node.value || "").replace(/\n/g, " ");
   if (!value) return null;
   return <Text style={styles.text}>{value}</Text>;
 };

src/themes/default.tsx

@@ -62,9 +62,6 @@ export const defaultTheme: Theme = {
     emphasis: {
       fontStyle: "italic",
     },
-    footnoteDefinition: {
-      color: light.darkColor,
-    },
     footnoteReference: {
       fontStyle: "italic",
       fontSize: 10,
@@ -127,9 +124,6 @@ export const defaultTheme: Theme = {
         color: dark.primaryColor,
       },
     },
-    footnoteDefinition: {
-      color: dark.darkColor,
-    },
     footnoteReference: {
       color: dark.darkColor,
     },

src/themes/themes.tsx

@@ -15,7 +15,6 @@ export interface Styles {
   container: ViewStyle;
   delete: TextStyle;
   emphasis: TextStyle;
-  footnoteDefinition: TextStyle;
   footnoteReference: TextStyle;
   heading: (level: number) => TextStyle;
   image: ImageStyle;