Skip to content

Commit d9d1308

Browse files
lordelogoslordelogos
committed
feat: updated tests and sanitised output markdown
1 parent f7a479a commit d9d1308

File tree

5 files changed

+21
-21
lines changed

5 files changed

+21
-21
lines changed

‎__tests__/parseMarkdownToReactEmailJSX.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,15 @@ describe("Markdown to React Mail JSX Parser", () => {
3434
const markdown = "![alt text](image.jpg)";
3535
const expected = `<img style="${parseCssInJsToInlineCss(
3636
styles.image
37-
)}" alt="alt text" src="image.jpg" />`;
37+
)}" alt="alt text" src="image.jpg">`;
3838

3939
const rendered = parseMarkdownToReactEmailJSX({ markdown });
4040
expect(rendered).toBe(expected);
4141
});
4242

4343
it("converts links correctly", () => {
4444
const markdown = "[Codeskills](https://codeskills.dev)";
45-
const expected = `<a target=\"_blank\" href="https://codeskills.dev" style="${parseCssInJsToInlineCss(
45+
const expected = `<a href="https://codeskills.dev" style="${parseCssInJsToInlineCss(
4646
styles.link
4747
)}">Codeskills</a>`;
4848

‎__tests__/reactEmailMarkdown.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ describe("ReactEmailMarkdown component renders correctly", () => {
88
<ReactEmailMarkdown markdown={`# Hello, World!`} />
99
);
1010
expect(actualOutput).toMatchInlineSnapshot(
11-
`"<!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>"`
11+
`"<!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>"`
1212
);
1313
});
1414
});

‎src/components/reactEmailMarkdown.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from "react";
22
import { StylesType } from "../types";
33
import { parseMarkdownToReactEmailJSX } from "../utils";
4-
import { sanitize } from "isomorphic-dompurify";
54

65
interface ReactEmailMarkdownProps {
76
markdown: string;
@@ -25,7 +24,7 @@ export const ReactEmailMarkdown: React.FC<ReactEmailMarkdownProps> = ({
2524
return (
2625
<div
2726
style={markdownContainerStyles}
28-
dangerouslySetInnerHTML={{ __html: sanitize(parsedMarkdown) }}
27+
dangerouslySetInnerHTML={{ __html: parsedMarkdown }}
2928
/>
3029
);
3130
};

‎src/styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const codeInline = {
5454
fontSize: "87.5%",
5555
display: "inline",
5656
background: " #f8f8f8",
57-
fontFamily: `SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace`,
57+
fontFamily: `SFMono-Regular,Menlo,Monaco,Consolas,monospace`,
5858
};
5959

6060
const codeBlock = {

‎src/utils.ts‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { sanitize } from "isomorphic-dompurify";
12
import { patterns } from "./patterns";
23
import { styles } from "./styles";
34
import { StylesType } from "./types";
@@ -205,15 +206,15 @@ export function parseMarkdownToReactEmailJSX({
205206
// Handle headings (e.g., # Heading)
206207
reactMailTemplate = markdown.replace(
207208
patterns.h1,
208-
`<h1${
209+
`<h1 style="${parseCssInJsToInlineCss(finalStyles.h1)}"${
209210
withDataAttr ? ' data-id="react-email-heading"' : ""
210-
} style="${parseCssInJsToInlineCss(finalStyles.h1)}">$1</h1>`
211+
}>$1</h1>`
211212
);
212213
reactMailTemplate = reactMailTemplate.replace(
213214
patterns.h2,
214-
`<h2${
215+
`<h2 style="${parseCssInJsToInlineCss(finalStyles.h2)}"${
215216
withDataAttr ? ' data-id="react-email-heading"' : ""
216-
} style="${parseCssInJsToInlineCss(finalStyles.h2)}">$1</h2>`
217+
}>$1</h2>`
217218
);
218219
reactMailTemplate = reactMailTemplate.replace(
219220
patterns.h3,
@@ -270,9 +271,11 @@ export function parseMarkdownToReactEmailJSX({
270271
return `<tr style="${parseCssInJsToInlineCss(finalStyles.tr)}">${cells
271272
.map(
272273
(cell, index) =>
273-
`<td style="${parseCssInJsToInlineCss(
274+
`<td align="${
275+
alignments[index]
276+
}" style="${parseCssInJsToInlineCss(
274277
finalStyles.td
275-
)}" align="${alignments[index]}">${cell}</td>`
278+
)}">${cell}</td>`
276279
)
277280
.join("")}</tr>`;
278281
})
@@ -285,9 +288,9 @@ export function parseMarkdownToReactEmailJSX({
285288
)}"><tr style="${parseCssInJsToInlineCss(finalStyles.tr)}">${headers
286289
.map(
287290
(header, index) =>
288-
`<th style="${parseCssInJsToInlineCss(finalStyles.th)}" align="${
289-
alignments[index]
290-
}">${header}</th>`
291+
`<th align="${alignments[index]}" style="${parseCssInJsToInlineCss(
292+
finalStyles.th
293+
)}">${header}</th>`
291294
)
292295
.join("")}</tr></thead><tbody style="${parseCssInJsToInlineCss(
293296
finalStyles.tbody
@@ -336,19 +339,17 @@ export function parseMarkdownToReactEmailJSX({
336339
// Handle images (e.g., ![alt text](url))
337340
reactMailTemplate = reactMailTemplate.replace(
338341
patterns.image,
339-
`<img style="${parseCssInJsToInlineCss(
342+
`<img src="$2" alt="$1" style="${parseCssInJsToInlineCss(
340343
finalStyles.image
341-
)}" alt="$1" src="$2" />`
344+
)}">`
342345
);
343346

344347
// Handle links (e.g., [link text](url))
345348
reactMailTemplate = reactMailTemplate.replace(
346349
patterns.link,
347350
`<a${
348351
withDataAttr ? ' data-id="react-email-link"' : ""
349-
} target="_blank" href="$2" style="${parseCssInJsToInlineCss(
350-
finalStyles.link
351-
)}">$1</a>`
352+
} style="${parseCssInJsToInlineCss(finalStyles.link)}" href="$2" >$1</a>`
352353
);
353354

354355
// Handle code blocks (e.g., ```code```)
@@ -389,5 +390,5 @@ export function parseMarkdownToReactEmailJSX({
389390
} style="${parseCssInJsToInlineCss(finalStyles.hr)}" />`
390391
);
391392

392-
return reactMailTemplate;
393+
return sanitize(reactMailTemplate, { USE_PROFILES: { html: true } });
393394
}

0 commit comments

Comments
 (0)