fix: major bug fix for parseMarkdownToReactEmailJSX

Author: lordelogos

CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [2.0.0](https://github.com/codeskills-dev/md-to-react-email/compare/v2.0.0...v1.2.0) (2023-06-20)
+
+### Features
+
+- Major Bug fix for `parseMarkdownToReactEmailJSX`
+- Major Bug fix for `reactEmailMarkdown` Component
+
 ### [1.2.0](https://github.com/codeskills-dev/md-to-react-email/compare/v1.2.0...v1.0.2) (2023-06-15)
 
 ### Features

__tests__/parseMarkdownToReactEmailJSX.test.ts

@@ -7,41 +7,41 @@ import {
 describe("Markdown to React Mail JSX Parser", () => {
   it("converts header one correctly", () => {
     const markdown = "# Hello, World!";
-    const expected = `<Section><Heading as="h1" style="${parseCssInJsToInlineCss(
+    const expected = `<h1 data-id="react-email-heading" style="${parseCssInJsToInlineCss(
       styles.h1
-    )}">Hello, World!</Heading></Section>`;
+    )}">Hello, World!</h1>`;
 
     const rendered = parseMarkdownToReactEmailJSX(markdown);
     expect(rendered).toBe(expected);
   });
 
   it("converts images correctly", () => {
     const markdown = "![alt text](image.jpg)";
-    const expected = `<Section><Img style="${parseCssInJsToInlineCss(
+    const expected = `<img style="${parseCssInJsToInlineCss(
       styles.image
-    )}" alt="alt text" src="image.jpg" /></Section>`;
+    )}" alt="alt text" src="image.jpg" />`;
 
     const rendered = parseMarkdownToReactEmailJSX(markdown);
     expect(rendered).toBe(expected);
   });
 
   it("converts links correctly", () => {
     const markdown = "[Codeskills](https://codeskills.dev)";
-    const expected = `<Section><Link href="https://codeskills.dev" style="${parseCssInJsToInlineCss(
+    const expected = `<a data-id=\"react-email-link\" target=\"_blank\" href="https://codeskills.dev" style="${parseCssInJsToInlineCss(
       styles.link
-    )}">Codeskills</Link></Section>`;
+    )}">Codeskills</a>`;
 
     const rendered = parseMarkdownToReactEmailJSX(markdown);
     expect(rendered).toBe(expected);
   });
 
   it("converts code blocks correctly", () => {
     const markdown = '```javascript\nconsole.log("Hello, World!");\n```';
-    const expected = `<Section><pre style="${parseCssInJsToInlineCss(
+    const expected = `<pre style="${parseCssInJsToInlineCss(
       styles.codeBlock
-    )}"><Text>{\`javascript
+    )}"><p data-id="react-email-text">{\`javascript
 console.log("Hello, World!");
-\`}</Text></pre></Section>`;
+\`}</p></pre>`;
 
     const rendered = parseMarkdownToReactEmailJSX(markdown);
     expect(rendered).toBe(expected);
@@ -55,7 +55,7 @@ console.log("Hello, World!");
 | Cell 3   | Cell 4   |
 `;
     const expected =
-      '<Section><table style=""><thead style=""><tr style="color:red"><th style="" align="center">Header 1</th><th style="" align="center">Header 2</th></tr></thead><tbody style=""><tr style="color:red"><td style="" align="center">Cell 1</td><td style="" align="center">Cell 2</td></tr><tr style="color:red"><td style="" align="center">Cell 3</td><td style="" align="center">Cell 4</td></tr></tbody></table></Section>';
+      '<table style=""><thead style=""><tr style="color:red"><th style="" align="center">Header 1</th><th style="" align="center">Header 2</th></tr></thead><tbody style=""><tr style="color:red"><td style="" align="center">Cell 1</td><td style="" align="center">Cell 2</td></tr><tr style="color:red"><td style="" align="center">Cell 3</td><td style="" align="center">Cell 4</td></tr></tbody></table>';
 
     const rendered = parseMarkdownToReactEmailJSX(markdown, {
       tr: { color: "red" },
@@ -65,9 +65,9 @@ console.log("Hello, World!");
 
   it("converts strikethrough blocks correctly", () => {
     const markdown = "~~This is a paragraph.~~";
-    const expected = `<Section><del style="${parseCssInJsToInlineCss(
+    const expected = `<del style="${parseCssInJsToInlineCss(
       styles.strikethrough
-    )}">This is a paragraph.</del></Section>`;
+    )}">This is a paragraph.</del>`;
 
     const rendered = parseMarkdownToReactEmailJSX(markdown);
     expect(rendered).toBe(expected);

__tests__/reactEmailMarkdown.test.tsx

@@ -8,7 +8,7 @@ describe("ReactEmailMarkdown component renders correctly", () => {
       <ReactEmailMarkdown markdown={`# Hello, World!`} />
     );
     expect(actualOutput).toMatchInlineSnapshot(
-      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><div><Section><Heading as="h1" style="font-weight:500;padding-top:20;font-size:2.5rem">Hello, World!</Heading></Section></div>"`
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><div><h1 data-id="react-email-heading" style="font-weight:500;padding-top:20;font-size:2.5rem">Hello, World!</h1></div>"`
     );
   });
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-to-react-email",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "A simple Markdown parser for React-email written in typescript.",
   "keywords": [
     "markdown",

src/utils.ts

@@ -198,39 +198,39 @@ export function parseMarkdownToReactEmailJSX(
   // Handle headings (e.g., # Heading)
   reactMailTemplate = markdown.replace(
     patterns.h1,
-    `<Heading as="h1" style="${parseCssInJsToInlineCss(
+    `<h1 data-id="react-email-heading" style="${parseCssInJsToInlineCss(
       finalStyles.h1
-    )}">$1</Heading>`
+    )}">$1</h1>`
   );
   reactMailTemplate = reactMailTemplate.replace(
     patterns.h2,
-    `<Heading as="h2" style="${parseCssInJsToInlineCss(
+    `<h2 data-id="react-email-heading" style="${parseCssInJsToInlineCss(
       finalStyles.h2
-    )}">$1</Heading>`
+    )}">$1</h2>`
   );
   reactMailTemplate = reactMailTemplate.replace(
     patterns.h3,
-    `<Heading as="h3" style="${parseCssInJsToInlineCss(
+    `<h3 data-id="react-email-heading" style="${parseCssInJsToInlineCss(
       finalStyles.h3
-    )}">$1</Heading>`
+    )}">$1</h3>`
   );
   reactMailTemplate = reactMailTemplate.replace(
     patterns.h4,
-    `<Heading as="h4" style="${parseCssInJsToInlineCss(
+    `<h4 data-id="react-email-heading" style="${parseCssInJsToInlineCss(
       finalStyles.h4
-    )}">$1</Heading>`
+    )}">$1</h4>`
   );
   reactMailTemplate = reactMailTemplate.replace(
     patterns.h5,
-    `<Heading as="h5" style="${parseCssInJsToInlineCss(
+    `<h5 data-id="react-email-heading" style="${parseCssInJsToInlineCss(
       finalStyles.h5
-    )}">$1</Heading>`
+    )}">$1</h5>`
   );
   reactMailTemplate = reactMailTemplate.replace(
     patterns.h6,
-    `<Heading as="h6" style="${parseCssInJsToInlineCss(
+    `<h6 data-id="react-email-heading" style="${parseCssInJsToInlineCss(
       finalStyles.h6
-    )}">$1</Heading>`
+    )}">$1</h6>`
   );
 
   // Handle Tables from GFM
@@ -303,13 +303,17 @@ export function parseMarkdownToReactEmailJSX(
   // Handle bold text (e.g., **bold**)
   reactMailTemplate = reactMailTemplate.replace(
     patterns.bold,
-    `<Text style="${parseCssInJsToInlineCss(finalStyles.bold)}">$1</Text>`
+    `<p data-id="react-email-text" style="${parseCssInJsToInlineCss(
+      finalStyles.bold
+    )}">$1</p>`
   );
 
   // Handle italic text (e.g., *italic*)
   reactMailTemplate = reactMailTemplate.replace(
     patterns.italic,
-    `<Text style="${parseCssInJsToInlineCss(finalStyles.italic)}">$1</Text>`
+    `<p data-id="react-email-text" style="${parseCssInJsToInlineCss(
+      finalStyles.italic
+    )}">$1</p>`
   );
 
   // Handle lists (unordered and ordered)
@@ -325,37 +329,41 @@ export function parseMarkdownToReactEmailJSX(
   // Handle images (e.g., ![alt text](url))
   reactMailTemplate = reactMailTemplate.replace(
     patterns.image,
-    `<Img style="${parseCssInJsToInlineCss(
+    `<img style="${parseCssInJsToInlineCss(
       finalStyles.image
     )}" alt="$1" src="$2" />`
   );
 
   // Handle links (e.g., [link text](url))
   reactMailTemplate = reactMailTemplate.replace(
     patterns.link,
-    `<Link href="$2" style="${parseCssInJsToInlineCss(
+    `<a data-id="react-email-link" target="_blank" href="$2" style="${parseCssInJsToInlineCss(
       finalStyles.link
-    )}">$1</Link>`
+    )}">$1</a>`
   );
 
   // Handle code blocks (e.g., ```code```)
   reactMailTemplate = reactMailTemplate.replace(
     patterns.codeBlocks,
     `<pre style="${parseCssInJsToInlineCss(
       finalStyles.codeBlock
-    )}"><Text>${`{\`$1\`}`}</Text></pre>`
+    )}"><p data-id="react-email-text">${`{\`$1\`}`}</p></pre>`
   );
 
   // Handle inline code (e.g., `code`)
   reactMailTemplate = reactMailTemplate.replace(
     patterns.codeInline,
-    `<Text style="${parseCssInJsToInlineCss(finalStyles.codeInline)}">$1</Text>`
+    `<p data-id="react-email-text" style="${parseCssInJsToInlineCss(
+      finalStyles.codeInline
+    )}">$1</p>`
   );
 
   // Handle block quotes
   reactMailTemplate = reactMailTemplate.replace(
     /^>\s+(.+)$/gm,
-    `<Text style="${parseCssInJsToInlineCss(finalStyles.blockQuote)}">$1</Text>`
+    `<p data-id="react-email-text" style="${parseCssInJsToInlineCss(
+      finalStyles.blockQuote
+    )}">$1</p>`
   );
 
   // Handle line breaks (e.g., <br />)
@@ -367,11 +375,10 @@ export function parseMarkdownToReactEmailJSX(
   // Handle horizontal rules (e.g., ---)
   reactMailTemplate = reactMailTemplate.replace(
     patterns.hr,
-    `<Hr style="${parseCssInJsToInlineCss(finalStyles.hr)}" />`
+    `<hr data-id="react-email-hr" style="${parseCssInJsToInlineCss(
+      finalStyles.hr
+    )}" />`
   );
 
-  // Wrap content in a section tag
-  reactMailTemplate = `<Section>${reactMailTemplate}</Section>`;
-
   return reactMailTemplate;
 }