Skip to content

Commit a9ab64d

Browse files
renovate[bot]gabrielmfern
renovate[bot]
and
gabrielmfern
authored
fix(deps): update dependency md-to-react-email to v5 (#1330)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: gabriel miranda <[email protected]>
1 parent bb8cd54 commit a9ab64d

File tree

5 files changed

+68
-65
lines changed

5 files changed

+68
-65
lines changed

‎packages/markdown/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,6 @@
5757
"typescript": "5.1.6"
5858
},
5959
"dependencies": {
60-
"md-to-react-email": "4.1.0"
60+
"md-to-react-email": "5.0.0"
6161
}
6262
}

‎packages/markdown/src/__snapshots__/markdown.spec.tsx.snap‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`<Markdown> component renders correctly > renders links in the correct format for browsers 1`] = `
4+
"<!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>Link to <a href=\\"https://react.email\\" target=\\"_blank\\" style=\\"color:#007bff;text-decoration:underline;background-color:transparent\\">React-email</a></p>
5+
</div>"
6+
`;
7+
8+
exports[`<Markdown> component renders correctly > renders lists in the correct format for browsers 1`] = `
9+
"<!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\\"><h1 style=\\"font-weight:500;padding-top:20px;font-size:2.5rem\\">Below is a list</h1><ul>
10+
<li>Item One</li>
11+
<li>Item Two</li>
12+
<li>Item Three</li>
13+
</ul>
14+
</div>"
15+
`;
16+
17+
exports[`<Markdown> component renders correctly > renders text in the correct format for browsers 1`] = `
18+
"<!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-weight:bold\\">This is sample bold text in markdown</strong> and <em style=\\"font-style:italic\\">this is italic text</em></p>
19+
</div>"
20+
`;
21+
22+
exports[`<Markdown> component renders correctly > renders the headers 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\\"><h1 style=\\"font-weight:500;padding-top:20px;font-size:2.5rem\\">Heading 1!</h1><h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\">Heading 2!</h2><h3 style=\\"font-weight:500;padding-top:20px;font-size:1.75rem\\">Heading 3!</h3><h4 style=\\"font-weight:500;padding-top:20px;font-size:1.5rem\\">Heading 4!</h4><h5 style=\\"font-weight:500;padding-top:20px;font-size:1.25rem\\">Heading 5!</h5><h6 style=\\"font-weight:500;padding-top:20px;font-size:1rem\\">Heading 6!</h6></div>"`;
23+
24+
exports[`<Markdown> component renders correctly > renders the markdown in the correct format for browsers 1`] = `
25+
"<!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\\"><h1 style=\\"font-weight:500;padding-top:20px;font-size:2.5rem\\">Markdown Test Document</h1><p>This is a <strong style=\\"font-weight:bold\\">test document</strong> to check the capabilities of a Markdown parser.</p>
26+
<h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\">Headings</h2><h3 style=\\"font-weight:500;padding-top:20px;font-size:1.75rem\\">Third-Level Heading</h3><h4 style=\\"font-weight:500;padding-top:20px;font-size:1.5rem\\">Fourth-Level Heading</h4><h5 style=\\"font-weight:500;padding-top:20px;font-size:1.25rem\\">Fifth-Level Heading</h5><h6 style=\\"font-weight:500;padding-top:20px;font-size:1rem\\">Sixth-Level Heading</h6><h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\">Text Formatting</h2><p>This is some <strong style=\\"font-weight:bold\\">bold text</strong> and this is some <em style=\\"font-style:italic\\">italic text</em>. You can also use <del>strikethrough</del> and <code style=\\"color:#212529;font-size:87.5%;display:inline;background: #f8f8f8;font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;word-wrap:break-word\\">inline code</code>.</p>
27+
<h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\">Lists</h2><ol>
28+
<li>Ordered List Item 1</li>
29+
<li>Ordered List Item 2</li>
30+
<li>Ordered List Item 3</li>
31+
</ol>
32+
<ul>
33+
<li>Unordered List Item 1</li>
34+
<li>Unordered List Item 2</li>
35+
<li>Unordered List Item 3</li>
36+
</ul>
37+
<h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\">Links</h2><p><a href=\\"https://www.markdownguide.org\\" target=\\"_blank\\" style=\\"color:#007bff;text-decoration:underline;background-color:transparent\\">Markdown Guide</a></p>
38+
<h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\">Images</h2><p><img src=\\"https://markdown-here.com/img/icon256.png\\" alt=\\"Markdown Logo\\"></p>
39+
<h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\">Blockquotes</h2><blockquote style=\\"background:#f9f9f9;border-left:10px solid #ccc;margin:1.5em 10px;padding:1em 10px\\">
40+
<p>This is a blockquote.</p>
41+
<ul>
42+
<li>Author</li>
43+
</ul>
44+
</blockquote>
45+
<h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\">Code Blocks</h2><pre style=\\"color:#212529;font-size:87.5%;display:inline;background: #f8f8f8;font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:1px;margin-bottom:20px;word-wrap:break-word\\"><code>function greet(name) {
46+
console.log(\`Hello, \${name}!\`);
47+
}
48+
</code></pre>
49+
</div>"
50+
`;

‎packages/markdown/src/markdown.spec.tsx‎

Lines changed: 10 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Markdown } from "./markdown";
44
describe("<Markdown> component renders correctly", () => {
55
it("renders the markdown in the correct format for browsers", () => {
66
const actualOutput = render(
7-
<Markdown showDataId>
7+
<Markdown>
88
{`# Markdown Test Document
99
1010
This is a **test document** to check the capabilities of a Markdown parser.
@@ -55,38 +55,12 @@ console.log(\`Hello, $\{name}!\`);
5555
\`\`\``}
5656
</Markdown>,
5757
);
58-
expect(actualOutput).toMatchInlineSnapshot(`
59-
"<!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\\"><h1 style=\\"font-weight:500;padding-top:20px;font-size:2.5rem\\" data-id=\\"react-email-heading\\">Markdown Test Document</h1><p data-id=\\"react-email-text\\">This is a <strong style=\\"font-weight:bold\\">test document</strong> to check the capabilities of a Markdown parser.</p>
60-
<h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\" data-id=\\"react-email-heading\\">Headings</h2><h3 style=\\"font-weight:500;padding-top:20px;font-size:1.75rem\\" data-id=\\"react-email-heading\\">Third-Level Heading</h3><h4 style=\\"font-weight:500;padding-top:20px;font-size:1.5rem\\" data-id=\\"react-email-heading\\">Fourth-Level Heading</h4><h5 style=\\"font-weight:500;padding-top:20px;font-size:1.25rem\\" data-id=\\"react-email-heading\\">Fifth-Level Heading</h5><h6 style=\\"font-weight:500;padding-top:20px;font-size:1rem\\" data-id=\\"react-email-heading\\">Sixth-Level Heading</h6><h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\" data-id=\\"react-email-heading\\">Text Formatting</h2><p data-id=\\"react-email-text\\">This is some <strong style=\\"font-weight:bold\\">bold text</strong> and this is some <em style=\\"font-style:italic\\">italic text</em>. You can also use <del>strikethrough</del> and <code style=\\"color:#212529;font-size:87.5%;display:inline;background: #f8f8f8;font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;word-wrap:break-word\\">inline code</code>.</p>
61-
<h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\" data-id=\\"react-email-heading\\">Lists</h2><ol>
62-
<li>Ordered List Item 1</li>
63-
<li>Ordered List Item 2</li>
64-
<li>Ordered List Item 3</li>
65-
</ol>
66-
<ul>
67-
<li>Unordered List Item 1</li>
68-
<li>Unordered List Item 2</li>
69-
<li>Unordered List Item 3</li>
70-
</ul>
71-
<h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\" data-id=\\"react-email-heading\\">Links</h2><p data-id=\\"react-email-text\\"><a href=\\"https://www.markdownguide.org\\" target=\\"_blank\\" data-id=\\"react-email-link\\" style=\\"color:#007bff;text-decoration:underline;background-color:transparent\\">Markdown Guide</a></p>
72-
<h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\" data-id=\\"react-email-heading\\">Images</h2><p data-id=\\"react-email-text\\"><img src=\\"https://markdown-here.com/img/icon256.png\\" alt=\\"Markdown Logo\\"></p>
73-
<h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\" data-id=\\"react-email-heading\\">Blockquotes</h2><blockquote style=\\"background:#f9f9f9;border-left:10px solid #ccc;margin:1.5em 10px;padding:1em 10px\\">
74-
<p data-id=\\"react-email-text\\">This is a blockquote.</p>
75-
<ul>
76-
<li>Author</li>
77-
</ul>
78-
</blockquote>
79-
<h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\" data-id=\\"react-email-heading\\">Code Blocks</h2><pre style=\\"color:#212529;font-size:87.5%;display:inline;background: #f8f8f8;font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:1px;margin-bottom:20px;word-wrap:break-word\\"><code>function greet(name) {
80-
console.log(\`Hello, \${name}!\`);
81-
}
82-
</code></pre>
83-
</div>"
84-
`);
58+
expect(actualOutput).toMatchSnapshot();
8559
});
8660

8761
it("renders the headers in the correct format for browsers", () => {
8862
const actualOutput = render(
89-
<Markdown showDataId>
63+
<Markdown>
9064
{`
9165
# Heading 1!
9266
## Heading 2!
@@ -97,38 +71,28 @@ console.log(\`Hello, \${name}!\`);
9771
`}
9872
</Markdown>,
9973
);
100-
expect(actualOutput).toMatchInlineSnapshot(
101-
`"<!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\\"><h1 style=\\"font-weight:500;padding-top:20px;font-size:2.5rem\\" data-id=\\"react-email-heading\\">Heading 1!</h1><h2 style=\\"font-weight:500;padding-top:20px;font-size:2rem\\" data-id=\\"react-email-heading\\">Heading 2!</h2><h3 style=\\"font-weight:500;padding-top:20px;font-size:1.75rem\\" data-id=\\"react-email-heading\\">Heading 3!</h3><h4 style=\\"font-weight:500;padding-top:20px;font-size:1.5rem\\" data-id=\\"react-email-heading\\">Heading 4!</h4><h5 style=\\"font-weight:500;padding-top:20px;font-size:1.25rem\\" data-id=\\"react-email-heading\\">Heading 5!</h5><h6 style=\\"font-weight:500;padding-top:20px;font-size:1rem\\" data-id=\\"react-email-heading\\">Heading 6!</h6></div>"`,
102-
);
74+
expect(actualOutput).toMatchSnapshot();
10375
});
10476

10577
it("renders text in the correct format for browsers", () => {
10678
const actualOutput = render(
107-
<Markdown showDataId>
79+
<Markdown>
10880
**This is sample bold text in markdown** and *this is italic text*
10981
</Markdown>,
11082
);
111-
expect(actualOutput).toMatchInlineSnapshot(`
112-
"<!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 data-id=\\"react-email-text\\"><strong style=\\"font-weight:bold\\">This is sample bold text in markdown</strong> and <em style=\\"font-style:italic\\">this is italic text</em></p>
113-
</div>"
114-
`);
83+
expect(actualOutput).toMatchSnapshot();
11584
});
11685

11786
it("renders links in the correct format for browsers", () => {
11887
const actualOutput = render(
119-
<Markdown showDataId>
120-
Link to [React-email](https://react.email)
121-
</Markdown>,
88+
<Markdown>Link to [React-email](https://react.email)</Markdown>,
12289
);
123-
expect(actualOutput).toMatchInlineSnapshot(`
124-
"<!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 data-id=\\"react-email-text\\">Link to <a href=\\"https://react.email\\" target=\\"_blank\\" data-id=\\"react-email-link\\" style=\\"color:#007bff;text-decoration:underline;background-color:transparent\\">React-email</a></p>
125-
</div>"
126-
`);
90+
expect(actualOutput).toMatchSnapshot();
12791
});
12892

12993
it("renders lists in the correct format for browsers", () => {
13094
const actualOutput = render(
131-
<Markdown showDataId>
95+
<Markdown>
13296
{`
13397
# Below is a list
13498
@@ -138,13 +102,6 @@ console.log(\`Hello, \${name}!\`);
138102
`}
139103
</Markdown>,
140104
);
141-
expect(actualOutput).toMatchInlineSnapshot(`
142-
"<!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\\"><h1 style=\\"font-weight:500;padding-top:20px;font-size:2.5rem\\" data-id=\\"react-email-heading\\">Below is a list</h1><ul>
143-
<li>Item One</li>
144-
<li>Item Two</li>
145-
<li>Item Three</li>
146-
</ul>
147-
</div>"
148-
`);
105+
expect(actualOutput).toMatchSnapshot();
149106
});
150107
});

‎packages/markdown/src/markdown.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
11
import type { StylesType } from "md-to-react-email";
2-
import { parseMarkdownToReactEmailJSX } from "md-to-react-email";
2+
import { parseMarkdownToJSX } from "md-to-react-email";
33
import * as React from "react";
44

55
export interface MarkdownProps {
66
children: string;
77
markdownCustomStyles?: StylesType;
88
markdownContainerStyles?: React.CSSProperties;
9-
showDataId?: boolean;
109
}
1110

1211
export const Markdown: React.FC<MarkdownProps> = ({
1312
children,
1413
markdownContainerStyles,
1514
markdownCustomStyles,
16-
showDataId = false,
1715
...props
1816
}) => {
19-
const parsedMarkdown = parseMarkdownToReactEmailJSX({
17+
const parsedMarkdown = parseMarkdownToJSX({
2018
markdown: children,
2119
customStyles: markdownCustomStyles,
22-
withDataAttr: showDataId,
2320
});
2421

2522
return (

‎pnpm-lock.yaml‎

Lines changed: 5 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)