feat: removed data-id attr from markup

codeskills-dev · Jun 20, 2023 · 365795f · 365795f
1 parent cefbc43
commit 365795f
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [2.0.2](https://github.com/codeskills-dev/md-to-react-email/compare/v2.0.1...v2.0.2) (2023-06-20)
+
+### Features
+
+- Removed `data-id` attributes from markup
+
 ### [2.0.1](https://github.com/codeskills-dev/md-to-react-email/compare/v1.2.0...v2.0.1) (2023-06-20)
 
 ### Features

diff --git a/__tests__/parseMarkdownToReactEmailJSX.test.ts b/__tests__/parseMarkdownToReactEmailJSX.test.ts
@@ -7,7 +7,7 @@ import {
 describe("Markdown to React Mail JSX Parser", () => {
   it("converts header one correctly", () => {
     const markdown = "# Hello, World!";
-    const expected = `<h1 data-id="react-email-heading" style="${parseCssInJsToInlineCss(
+    const expected = `<h1 style="${parseCssInJsToInlineCss(
       styles.h1
     )}">Hello, World!</h1>`;
 
@@ -27,7 +27,7 @@ describe("Markdown to React Mail JSX Parser", () => {
 
   it("converts links correctly", () => {
     const markdown = "[Codeskills](https://codeskills.dev)";
-    const expected = `<a data-id=\"react-email-link\" target=\"_blank\" href="https://codeskills.dev" style="${parseCssInJsToInlineCss(
+    const expected = `<a target=\"_blank\" href="https://codeskills.dev" style="${parseCssInJsToInlineCss(
       styles.link
     )}">Codeskills</a>`;
 
@@ -39,7 +39,7 @@ describe("Markdown to React Mail JSX Parser", () => {
     const markdown = '```javascript\nconsole.log("Hello, World!");\n```';
     const expected = `<pre style="${parseCssInJsToInlineCss(
       styles.codeBlock
-    )}"><p data-id="react-email-text">{\`javascript
+    )}"><p>{\`javascript
 console.log("Hello, World!");
 \`}</p></pre>`;
 

diff --git a/__tests__/reactEmailMarkdown.test.tsx b/__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><h1 data-id="react-email-heading" style="font-weight:500;padding-top:20;font-size:2.5rem">Hello, World!</h1></div>"`
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><div><h1 style="font-weight:500;padding-top:20;font-size:2.5rem">Hello, World!</h1></div>"`
     );
   });
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "md-to-react-email",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A simple Markdown parser for React-email written in typescript.",
   "keywords": [
     "markdown",

diff --git a/src/utils.ts b/src/utils.ts
@@ -198,39 +198,27 @@ export function parseMarkdownToReactEmailJSX(
   // Handle headings (e.g., # Heading)
   reactMailTemplate = markdown.replace(
     patterns.h1,
-    `<h1 data-id="react-email-heading" style="${parseCssInJsToInlineCss(
-      finalStyles.h1
-    )}">$1</h1>`
+    `<h1 style="${parseCssInJsToInlineCss(finalStyles.h1)}">$1</h1>`
   );
   reactMailTemplate = reactMailTemplate.replace(
     patterns.h2,
-    `<h2 data-id="react-email-heading" style="${parseCssInJsToInlineCss(
-      finalStyles.h2
-    )}">$1</h2>`
+    `<h2 style="${parseCssInJsToInlineCss(finalStyles.h2)}">$1</h2>`
   );
   reactMailTemplate = reactMailTemplate.replace(
     patterns.h3,
-    `<h3 data-id="react-email-heading" style="${parseCssInJsToInlineCss(
-      finalStyles.h3
-    )}">$1</h3>`
+    `<h3 style="${parseCssInJsToInlineCss(finalStyles.h3)}">$1</h3>`
   );
   reactMailTemplate = reactMailTemplate.replace(
     patterns.h4,
-    `<h4 data-id="react-email-heading" style="${parseCssInJsToInlineCss(
-      finalStyles.h4
-    )}">$1</h4>`
+    `<h4 style="${parseCssInJsToInlineCss(finalStyles.h4)}">$1</h4>`
   );
   reactMailTemplate = reactMailTemplate.replace(
     patterns.h5,
-    `<h5 data-id="react-email-heading" style="${parseCssInJsToInlineCss(
-      finalStyles.h5
-    )}">$1</h5>`
+    `<h5 style="${parseCssInJsToInlineCss(finalStyles.h5)}">$1</h5>`
   );
   reactMailTemplate = reactMailTemplate.replace(
     patterns.h6,
-    `<h6 data-id="react-email-heading" style="${parseCssInJsToInlineCss(
-      finalStyles.h6
-    )}">$1</h6>`
+    `<h6 style="${parseCssInJsToInlineCss(finalStyles.h6)}">$1</h6>`
   );
 
   // Handle Tables from GFM
@@ -303,17 +291,13 @@ export function parseMarkdownToReactEmailJSX(
   // Handle bold text (e.g., **bold**)
   reactMailTemplate = reactMailTemplate.replace(
     patterns.bold,
-    `<p data-id="react-email-text" style="${parseCssInJsToInlineCss(
-      finalStyles.bold
-    )}">$1</p>`
+    `<p style="${parseCssInJsToInlineCss(finalStyles.bold)}">$1</p>`
   );
 
   // Handle italic text (e.g., *italic*)
   reactMailTemplate = reactMailTemplate.replace(
     patterns.italic,
-    `<p data-id="react-email-text" style="${parseCssInJsToInlineCss(
-      finalStyles.italic
-    )}">$1</p>`
+    `<p style="${parseCssInJsToInlineCss(finalStyles.italic)}">$1</p>`
   );
 
   // Handle lists (unordered and ordered)
@@ -337,7 +321,7 @@ export function parseMarkdownToReactEmailJSX(
   // Handle links (e.g., [link text](url))
   reactMailTemplate = reactMailTemplate.replace(
     patterns.link,
-    `<a data-id="react-email-link" target="_blank" href="$2" style="${parseCssInJsToInlineCss(
+    `<a target="_blank" href="$2" style="${parseCssInJsToInlineCss(
       finalStyles.link
     )}">$1</a>`
   );
@@ -347,23 +331,19 @@ export function parseMarkdownToReactEmailJSX(
     patterns.codeBlocks,
     `<pre style="${parseCssInJsToInlineCss(
       finalStyles.codeBlock
-    )}"><p data-id="react-email-text">${`{\`$1\`}`}</p></pre>`
+    )}"><p>${`{\`$1\`}`}</p></pre>`
   );
 
   // Handle inline code (e.g., `code`)
   reactMailTemplate = reactMailTemplate.replace(
     patterns.codeInline,
-    `<p data-id="react-email-text" style="${parseCssInJsToInlineCss(
-      finalStyles.codeInline
-    )}">$1</p>`
+    `<p style="${parseCssInJsToInlineCss(finalStyles.codeInline)}">$1</p>`
   );
 
   // Handle block quotes
   reactMailTemplate = reactMailTemplate.replace(
     /^>\s+(.+)$/gm,
-    `<p data-id="react-email-text" style="${parseCssInJsToInlineCss(
-      finalStyles.blockQuote
-    )}">$1</p>`
+    `<p style="${parseCssInJsToInlineCss(finalStyles.blockQuote)}">$1</p>`
   );
 
   // Handle line breaks (e.g., <br />)
@@ -375,9 +355,7 @@ export function parseMarkdownToReactEmailJSX(
   // Handle horizontal rules (e.g., ---)
   reactMailTemplate = reactMailTemplate.replace(
     patterns.hr,
-    `<hr data-id="react-email-hr" style="${parseCssInJsToInlineCss(
-      finalStyles.hr
-    )}" />`
+    `<hr style="${parseCssInJsToInlineCss(finalStyles.hr)}" />`
   );
 
   return reactMailTemplate;