fix(markdown): support nested lists in markdown component (#2624)

actuallyzefe · gabrielmfern · web-flow · commit 07d3c712c52b · 2025-11-03T09:05:48.000-03:00
Co-authored-by: Gabriel Miranda &lt;gabrielmfern@outlook.com&gt;
diff --git a/.changeset/angry-lights-turn.md b/.changeset/angry-lights-turn.md
@@ -0,0 +1,5 @@
+---
+"@react-email/markdown": patch
+---
+
+fix nested lists not working
diff --git a/.changeset/silent-maps-fail.md b/.changeset/silent-maps-fail.md
@@ -0,0 +1,5 @@
+---
+"@react-email/components": patch
+---
+
+markdown: fix nested lists not working
diff --git a/packages/markdown/src/__snapshots__/markdown.spec.tsx.snap b/packages/markdown/src/__snapshots__/markdown.spec.tsx.snap
@@ -14,6 +14,24 @@ exports[`<Markdown> component renders correctly > renders lists in the correct f
 </div><!--/$-->"
 `;
 
+exports[`<Markdown> component renders correctly > renders nested lists in the correct format for browsers 1`] = `
+"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><ul>
+<li><p>parent list item</p>
+<ul>
+<li>nested list item 1</li>
+<li>nested list item 2</li>
+</ul>
+</li>
+<li><p>another parent item</p>
+<ol>
+<li>nested ordered item 1</li>
+<li>nested ordered item 2</li>
+</ol>
+</li>
+</ul>
+</div><!--/$-->"
+`;
+
 exports[`<Markdown> component renders correctly > renders text in the correct format for browsers 1`] = `
 "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><p><strong style="font:700 23px / 32px &#x27;Roobert PRO&#x27;, system-ui, sans-serif;background:url(&#x27;path/to/image&#x27;)">This is sample bold text in markdown</strong> and <em style="font-style:italic">this is italic text</em></p>
 </div><!--/$-->"
diff --git a/packages/markdown/src/markdown.spec.tsx b/packages/markdown/src/markdown.spec.tsx
@@ -111,4 +111,20 @@ console.log(\`Hello, $\{name}!\`);
     );
     expect(actualOutput).toMatchSnapshot();
   });
+
+  it('renders nested lists in the correct format for browsers', async () => {
+    const actualOutput = await render(
+      <Markdown>
+        {`
+- parent list item
+    - nested list item 1
+    - nested list item 2
+- another parent item
+    1. nested ordered item 1
+    2. nested ordered item 2
+       `}
+      </Markdown>,
+    );
+    expect(actualOutput).toMatchSnapshot();
+  });
 });
diff --git a/packages/markdown/src/markdown.tsx b/packages/markdown/src/markdown.tsx
@@ -119,7 +119,10 @@ export const Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>(
     };
 
     renderer.listitem = ({ tokens }) => {
-      const text = renderer.parser.parseInline(tokens);
+      const hasNestedList = tokens.some((token) => token.type === 'list');
+      const text = hasNestedList
+        ? renderer.parser.parse(tokens)
+        : renderer.parser.parseInline(tokens);
 
       return `<li${
         parseCssInJsToInlineCss(finalStyles.li) !== ''

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@react-email/markdown": patch
 +---
++
 +fix nested lists not working