diff --git a/.changeset/angry-lights-turn.md b/.changeset/angry-lights-turn.md new file mode 100644 index 0000000000..34dd96fbe7 --- /dev/null +++ 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 new file mode 100644 index 0000000000..f2b61731c0 --- /dev/null +++ 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 index 564c58405a..71d6cecf95 100644 --- a/packages/markdown/src/__snapshots__/markdown.spec.tsx.snap +++ b/packages/markdown/src/__snapshots__/markdown.spec.tsx.snap @@ -14,6 +14,24 @@ exports[` component renders correctly > renders lists in the correct f " `; +exports[` component renders correctly > renders nested lists in the correct format for browsers 1`] = ` +"
    +

  • parent list item

    +
      +
    • nested list item 1
      • +
    • nested list item 2
      • +
    +
    • +

  • another parent item

    +
      +
    1. nested ordered item 1
      2. +
    2. nested ordered item 2
      3. +
    +
    • +
+
" +`; + exports[` component renders correctly > renders text in the correct format for browsers 1`] = ` "

This is sample bold text in markdown and this is italic text

" diff --git a/packages/markdown/src/markdown.spec.tsx b/packages/markdown/src/markdown.spec.tsx index 3743fa0383..c070ffbdf7 100644 --- 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( + + {` +- parent list item + - nested list item 1 + - nested list item 2 +- another parent item + 1. nested ordered item 1 + 2. nested ordered item 2 + `} + , + ); + expect(actualOutput).toMatchSnapshot(); + }); }); diff --git a/packages/markdown/src/markdown.tsx b/packages/markdown/src/markdown.tsx index f3cae751d2..282e5556a1 100644 --- a/packages/markdown/src/markdown.tsx +++ b/packages/markdown/src/markdown.tsx @@ -119,7 +119,10 @@ export const Markdown = React.forwardRef( }; 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 `