feat: updated tests and sanitised output markdown

codeskills-dev · Jul 4, 2023 · d9d1308 · d9d1308
1 parent f7a479a
commit d9d1308
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 21 deletions.
diff --git a/__tests__/parseMarkdownToReactEmailJSX.test.ts b/__tests__/parseMarkdownToReactEmailJSX.test.ts
@@ -34,15 +34,15 @@ describe("Markdown to React Mail JSX Parser", () => {
     const markdown = "![alt text](image.jpg)";
     const expected = `<img style="${parseCssInJsToInlineCss(
       styles.image
-    )}" alt="alt text" src="image.jpg" />`;
+    )}" 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 = `<a target=\"_blank\" href="https://codeskills.dev" style="${parseCssInJsToInlineCss(
+    const expected = `<a href="https://codeskills.dev" style="${parseCssInJsToInlineCss(
       styles.link
     )}">Codeskills</a>`;
 

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 style="font-weight:500;padding-top:20;font-size:2.5rem" data-id="react-email-heading">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 data-id="react-email-heading" style="font-weight:500;padding-top:20;font-size:2.5rem">Hello, World!</h1></div>"`
     );
   });
 });
diff --git a/src/components/reactEmailMarkdown.tsx b/src/components/reactEmailMarkdown.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 import { StylesType } from "../types";
 import { parseMarkdownToReactEmailJSX } from "../utils";
-import { sanitize } from "isomorphic-dompurify";
 
 interface ReactEmailMarkdownProps {
   markdown: string;
@@ -25,7 +24,7 @@ export const ReactEmailMarkdown: React.FC<ReactEmailMarkdownProps> = ({
   return (
     <div
       style={markdownContainerStyles}
-      dangerouslySetInnerHTML={{ __html: sanitize(parsedMarkdown) }}
+      dangerouslySetInnerHTML={{ __html: parsedMarkdown }}
     />
   );
 };
diff --git a/src/styles.ts b/src/styles.ts
@@ -54,7 +54,7 @@ const codeInline = {
   fontSize: "87.5%",
   display: "inline",
   background: " #f8f8f8",
-  fontFamily: `SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace`,
+  fontFamily: `SFMono-Regular,Menlo,Monaco,Consolas,monospace`,
 };
 
 const codeBlock = {

diff --git a/src/utils.ts b/src/utils.ts
@@ -1,3 +1,4 @@
+import { sanitize } from "isomorphic-dompurify";
 import { patterns } from "./patterns";
 import { styles } from "./styles";
 import { StylesType } from "./types";
@@ -205,15 +206,15 @@ export function parseMarkdownToReactEmailJSX({
   // Handle headings (e.g., # Heading)
   reactMailTemplate = markdown.replace(
     patterns.h1,
-    `<h1${
+    `<h1 style="${parseCssInJsToInlineCss(finalStyles.h1)}"${
       withDataAttr ? ' data-id="react-email-heading"' : ""
-    } style="${parseCssInJsToInlineCss(finalStyles.h1)}">$1</h1>`
+    }>$1</h1>`
   );
   reactMailTemplate = reactMailTemplate.replace(
     patterns.h2,
-    `<h2${
+    `<h2 style="${parseCssInJsToInlineCss(finalStyles.h2)}"${
       withDataAttr ? ' data-id="react-email-heading"' : ""
-    } style="${parseCssInJsToInlineCss(finalStyles.h2)}">$1</h2>`
+    }>$1</h2>`
   );
   reactMailTemplate = reactMailTemplate.replace(
     patterns.h3,
@@ -270,9 +271,11 @@ export function parseMarkdownToReactEmailJSX({
           return `<tr style="${parseCssInJsToInlineCss(finalStyles.tr)}">${cells
             .map(
               (cell, index) =>
-                `<td style="${parseCssInJsToInlineCss(
+                `<td  align="${
+                  alignments[index]
+                }" style="${parseCssInJsToInlineCss(
                   finalStyles.td
-                )}" align="${alignments[index]}">${cell}</td>`
+                )}">${cell}</td>`
             )
             .join("")}</tr>`;
         })
@@ -285,9 +288,9 @@ export function parseMarkdownToReactEmailJSX({
       )}"><tr style="${parseCssInJsToInlineCss(finalStyles.tr)}">${headers
         .map(
           (header, index) =>
-            `<th style="${parseCssInJsToInlineCss(finalStyles.th)}" align="${
-              alignments[index]
-            }">${header}</th>`
+            `<th align="${alignments[index]}" style="${parseCssInJsToInlineCss(
+              finalStyles.th
+            )}">${header}</th>`
         )
         .join("")}</tr></thead><tbody style="${parseCssInJsToInlineCss(
         finalStyles.tbody
@@ -336,19 +339,17 @@ export function parseMarkdownToReactEmailJSX({
   // Handle images (e.g., ![alt text](url))
   reactMailTemplate = reactMailTemplate.replace(
     patterns.image,
-    `<img style="${parseCssInJsToInlineCss(
+    `<img src="$2" alt="$1" style="${parseCssInJsToInlineCss(
       finalStyles.image
-    )}" alt="$1" src="$2" />`
+    )}">`
   );
 
   // Handle links (e.g., [link text](url))
   reactMailTemplate = reactMailTemplate.replace(
     patterns.link,
     `<a${
       withDataAttr ? ' data-id="react-email-link"' : ""
-    } target="_blank" href="$2" style="${parseCssInJsToInlineCss(
-      finalStyles.link
-    )}">$1</a>`
+    } style="${parseCssInJsToInlineCss(finalStyles.link)}"  href="$2" >$1</a>`
   );
 
   // Handle code blocks (e.g., ```code```)
@@ -389,5 +390,5 @@ export function parseMarkdownToReactEmailJSX({
     } style="${parseCssInJsToInlineCss(finalStyles.hr)}" />`
   );
 
-  return reactMailTemplate;
+  return sanitize(reactMailTemplate, { USE_PROFILES: { html: true } });
 }