diff --git a/.changeset/fast-bobcats-battle.md b/.changeset/fast-bobcats-battle.md
new file mode 100644
index 0000000..261c903
--- /dev/null
+++ b/.changeset/fast-bobcats-battle.md
@@ -0,0 +1,13 @@
+---
+"md-to-react-email": major
+---
+
+### Changes
+
+- Added [`Marked`](https://marked.js.org/) for markdown transformations
+- Removed `ParseMarkdownToReactEmail` function
+
+### Fixes
+
+- Fixed issue with [list parsing](https://github.com/codeskills-dev/md-to-react-email/issues/11)
+- Fixed `parseCssInJsToInlineCss` issue with numerical values
diff --git a/README.md b/README.md
index 29a9861..b5ff42b 100644
--- a/README.md
+++ b/README.md
@@ -6,12 +6,13 @@ Read the documentation [here](https://md2re.codeskills.dev/)
md-to-react-email is a lightweight utility for converting [Markdown](https://www.markdownguide.org/) into valid [React-email](https://react.email) templates. This tool simplifies the process of creating responsive and customizable email templates by leveraging the power of React and Markdown.
+**Note**: Starting from `version 4`, `md-to-react-email` uses [`Marked`](https://marked.js.org/) for markdown transformation. see all changes [here](/CHANGELOG.md)
+
### Support
The following markdown flavors are supported
- Offical markdown flavour
-- Github flavoured markdown
## Installation
@@ -35,7 +36,6 @@ npm install md-to-react-email
- `camelToKebabCase`: converts strings from camelcase ['thisIsCamelCase'] to kebab case ['this-is-kebab-case']
- `parseCssInJsToInlineCss`: converts css styles from css-in-js to inline css e.g fontSize: "18px" => font-size: 18px;
-- `parseMarkdownToReactEmail`: parses markdown to a valid react-email string that can be copied and pasted directly into your codebase
- `parseMarkdownToReactEmailJSX`: parses markdown to valid react-email JSX for the client (i.e the browser)
### Components:
@@ -75,18 +75,6 @@ npm install md-to-react-email
```
-- For code generation (copy and paste)
-
- ```
- import {parseMarkdownToReactEmail} from "md-to-react-email"
-
- const markdown = `# Hello World`
- const parsedReactMail = parseMarkdownToReactEmail(markdown)
-
- console.log(parsedReactMail) // `Header 1
-
-This is a paragraph with some text. You can have multiple paragraphs separated by empty lines.
-
-Header 2
-
-Here is an unordered list:
-
-
-Header 3
-
-Here is an ordered list:
-First
-Second
-Third
-Header 4
-
-A table example:
-Column 1 Column 2 Cell 1 Cell 2 Cell 3 Cell 4
Header 5
-
-An image example:
-Header 6
-
-Some bold text and italic text italic text .
-
-Code block example:
-
- javascript
- function greet() {
- console.log('Hello!');
- }
-
-
-Here is a block quote example:
-
-
-This is a block quote.
-It can span multiple lines.
-
-This is a nested quote
-With multiple
-Lines of code
-
-
-
-
-Block quotes are often used to highlight important information or provide references.
- Markdown Test Document This is a test document to check the capabilities of a Markdown parser.
+Headings Third-Level Heading Fourth-Level Heading Fifth-Level Heading Sixth-Level Heading Text Formatting This is some bold text and this is some italic text . You can also use strikethrough and inline code.
+Lists
+Ordered List Item 1
+Ordered List Item 2
+Ordered List Item 3
+
+
+Unordered List Item 1
+Unordered List Item 2
+Unordered List Item 3
+
+Links Markdown Guide
+Images
+Blockquotes
+This is a blockquote.
+
+
+Code Blocks function greet(name) {
+console.log(\`Hello, $\{name\}!\`);
+}
+Header 1
-Header 2
-Header 3
-Header 4
-Header 5
-Header 6
-`;
+ const expected = `Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 `;
const rendered = parseMarkdownToReactEmailJSX({
markdown,
@@ -39,9 +115,7 @@ This is one
This is two
`;
- const expected = `The paragraphs
-This is one
-
+ const expected = `The paragraphs This is one
This is two
`;
@@ -53,13 +127,12 @@ This is two
it("handles bold, italic and strikethrough texts correctly", () => {
const markdown = `# The text formats
-This is **one** bold and _italic_ text
+This is **one** bold and *italic* text
This is ~~striked~~ text and \`inline code\``;
- const expected = `The text formats
-This is one bold and italic text
-
-This is striked text and inline code
`;
+ const expected = `The text formats This is one bold and italic text
+This is striked text and inline code
+`;
const rendered = parseMarkdownToReactEmailJSX({
markdown,
@@ -79,17 +152,19 @@ Here is an ordered list:
2. Second
3. Third
`;
- const expected = `The lists
-Here is an unordered list:
-
Here is an ordered list:
-First
+
+First
Second
Third
- `;
+A table example:
-Column 1 Column 2 Cell 1 Cell 2 Cell 3 Cell 4
`;
+
+
+
+Column 1
+Column 2
+
+
+
+Cell 1
+Cell 2
+
+
+Cell 3
+Cell 4
+
+
+`;
const rendered = parseMarkdownToReactEmailJSX({
markdown,
@@ -125,11 +216,13 @@ greet("World")
\`\`\``;
const expected = `A example:
- python
- def greet(name):
- print(f"Hello, {name}!")
- `;
+python
+def greet(name):
+print(f"Hello, {name}!")
+
+greet("World")
+A example:
-Here's a block quote:
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- `;
+Here's a block quote:
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+`;
const rendered = parseMarkdownToReactEmailJSX({
markdown,
@@ -158,8 +252,9 @@ greet("World")
const markdown = `A example:
`;
- const expected = `A example:
-A example:
+
+`;
const rendered = parseMarkdownToReactEmailJSX({
markdown,
@@ -171,8 +266,9 @@ greet("World")
const markdown = `A link example:
Here's a link to [OpenAI's website](https://openai.com/).`;
- const expected = `A link example:
-Here's a link to OpenAI's website .
`;
+ const expected = `A link example:
+Here's a link to OpenAI's website .
+`;
const rendered = parseMarkdownToReactEmailJSX({
markdown,
diff --git a/__tests__/reactEmailMarkdown.test.tsx b/__tests__/reactEmailMarkdown.test.tsx
index 3f13eff..e701a5f 100644
--- a/__tests__/reactEmailMarkdown.test.tsx
+++ b/__tests__/reactEmailMarkdown.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { render } from "@react-email/render";
-import { ReactEmailMarkdown } from "../src/components";
+import { ReactEmailMarkdown } from "../src";
describe("ReactEmailMarkdown component renders correctly", () => {
it("renders the markdown in the correct format for browsers", () => {
@@ -8,7 +8,7 @@ describe("ReactEmailMarkdown component renders correctly", () => {
Hello, World! "`
+ `"
Hello, World! "`
);
});
});
diff --git a/package.json b/package.json
index 34e5bf1..fb19b21 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
],
"scripts": {
"build": "tsup",
- "demo": "npx tsc src/demo && node src/demo",
"lint": "tsc",
"release": "pnpm run build && changeset publish",
"test": "jest --coverage",
@@ -34,6 +33,7 @@
},
"license": "MIT",
"devDependencies": {
+ "@changesets/cli": "^2.26.2",
"@react-email/render": "0.0.7",
"@types/jest": "29.5.2",
"@types/react": "18.2.8",
@@ -43,7 +43,6 @@
"ts-jest": "29.1.0",
"ts-node": "10.9.1",
"tsup": "6.7.0",
- "@changesets/cli": "^2.26.2",
"typescript": "5.1.3"
},
"peerDependencies": {
@@ -51,7 +50,8 @@
"react-email": ">1.9.3"
},
"dependencies": {
- "isomorphic-dompurify": "1.7.0"
+ "isomorphic-dompurify": "1.7.0",
+ "marked": "7.0.4"
},
"publishConfig": {
"access": "public"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5dbacd1..8d52b74 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,9 @@ dependencies:
isomorphic-dompurify:
specifier: 1.7.0
version: 1.7.0
+ marked:
+ specifier: 7.0.4
+ version: 7.0.4
devDependencies:
'@changesets/cli':
@@ -3992,6 +3995,12 @@ packages:
engines: {node: '>=8'}
dev: true
+ /marked@7.0.4:
+ resolution: {integrity: sha512-t8eP0dXRJMtMvBojtkcsA7n48BkauktUKzfkPSCq85ZMTJ0v76Rke4DYz01omYpPTUh4p/f7HePgRo3ebG8+QQ==}
+ engines: {node: '>= 16'}
+ hasBin: true
+ dev: false
+
/meow@6.1.1:
resolution: {integrity: sha512-3YffViIt2QWgTy6Pale5QpopX/IvU3LPL03jOTqp6pGj3VjesdO/U8CuHMKpnQr4shCNCM5fd5XFFvIIl6JBHg==}
engines: {node: '>=8'}
diff --git a/pre-planning/BASE-STYLES.md b/pre-planning/BASE-STYLES.md
deleted file mode 100644
index 7a41987..0000000
--- a/pre-planning/BASE-STYLES.md
+++ /dev/null
@@ -1,68 +0,0 @@
-h1, h2, h3, h4, h5, h6 {
-font-weight: 500;
-padding-top: 20px;
-}
-
-h1 {
-font-size: 2.5rem;
-}
-
-h2 {
-font-size: 2rem;
-}
-
-h3 {
-font-size: 1.75rem;
-}
-
-.h4, h4 {
-font-size: 1.5rem;
-}
-
-.h5, h5 {
-font-size: 1.25rem;
-}
-
-.h6, h6 {
-font-size: 1rem;
-}
-
-bold{
-font-weight: bold;
-}
-
-italic {
-font-style: italic;
-}
-
-blockquote {
-background: #f9f9f9;
-border-left: 10px solid #ccc;
-margin: 1.5em 10px;
-padding: 1em 10px 0.1em 10px;
-quotes: "\201C""\201D""\2018""\2019";
-}
-
-code {
-color: #212529;
-font-size: 87.5%;
-word-wrap: break-word;
-display: inline;
-background: #f8f8f8;
-font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
-}
-
-code-block {
-padding-top: 10px;
-padding-right: 10px;
-padding-left: 10px;
-padding-bottom: 1px;
-margin-bottom: 20px;
-background: #f8f8f8;
-}
-
-link {
-color: #007bff;
-text-decoration: underline;
-background-color: transparent;
-}
diff --git a/pre-planning/IDEAS.md b/pre-planning/IDEAS.md
deleted file mode 100644
index 687c57e..0000000
--- a/pre-planning/IDEAS.md
+++ /dev/null
@@ -1,5 +0,0 @@
-- export package for use on web ui
-- export directly as reactmail component ✅
-- pass custom components for different md tags
-- pass custom styles for different md tags ✅
-- custom matchers for md tags for different flavors
diff --git a/pre-planning/MATCHER-CASES.md b/pre-planning/MATCHER-CASES.md
deleted file mode 100644
index 537cc31..0000000
--- a/pre-planning/MATCHER-CASES.md
+++ /dev/null
@@ -1,50 +0,0 @@
-// Handle headings (e.g., # Heading)
-(/^#\s+(.+)$/gm, "$1 ");
- (/^##\s+(.+)$/gm, "$1 ");
- (/^###\s+(.+)$/gm, "$1 ");
- (/^####\s+(.+)$/gm, "$1 ");
- (/^#####\s+(.+)$/gm, "$1 ");
- (/^######\s+(.+)$/gm, "$1 ");
-
-// Handle paragraphs
-(
-/((\n|^)(?!\n)((?!<\/?(h|ul|ol|p|pre|div|blockquote)[>\s]).)+(\n|$)+)+/gm,
- "$&
"
-);
-
-// Handle bold text (e.g., **bold**)
-(/\*\*(.+?)\*\*/g, "$1 ");
-
-// Handle italic text (e.g., _italic_)
-(/\*(.+?)\*/g, "$1 ");
-
-// Handle unordered lists
-(/^\s*-\s+(.*)$/gm, "$1 ");
- (/<\/li>\n/g, " ");
-``;
-
-// Handle ordered lists
-(/^\s*\d+\.\s+(.*)$/gm, " $1 ");
- (/<\/li>\n/g, " ");
-`${markdown} `;
-
-// Handle links (e.g., [link text](url))
-(/\[(.+?)\]\((.\*?)\)/g, '$1 ');
-
-// Handle images (e.g., )
-(
-/!\[(._?)\]\((._?)\)/g,
-'$1$1");
-
-// Handle line breaks (e.g.,
-
-
-
- )
- }
-```
-
-- Directly into react-email template
-
-```
-import {parseMarkdownToReactEmailJSX} from "md-to-react-email"
-
-const markdown = `# Hello World`
-const parsedReactMail = parseMarkdownToReactEmail(markdown)
-
-console.log(parsedReactMail) // `A boy )
-
-# General file structure
-
-- Styles file(css-in-js): contains all the basic styles
-
- > CSS|
-
-
-
- )(?![\s\S]*<\/ul>)/gs,
- ol: /^(?:\d+\.\s+.+$(?:\n(?!$).+)*(?:\n|$))+/gm,
- image: /!\[(.*?)\]\((.*?)\)/g,
- link: /\[(.+?)\]\((.*?)\)/g,
- blockQuote: /^>(?: .+?(?:\n|$))+/gm,
- nestedBlockQuote: /^>( .+?(?:\n|$))+/gm,
- codeBlocks: /```(?:[\s\S]*?\n)?([\s\S]*?)\n```/g,
- codeInline: /(? {
- if ("target" in node) {
- node.setAttribute("target", "_blank");
- }
-});
+import { StylesType, initRendererProps } from "./types";
+import { RendererObject } from "marked";
+import { styles } from "./styles";
export function camelToKebabCase(str: string): string {
return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
@@ -20,625 +12,246 @@ export function parseCssInJsToInlineCss(
): string {
if (!cssProperties) return "";
+ const numericalCssProperties = [
+ "width",
+ "height",
+ "margin",
+ "marginTop",
+ "marginRight",
+ "marginBottom",
+ "marginLeft",
+ "padding",
+ "paddingTop",
+ "paddingRight",
+ "paddingBottom",
+ "paddingLeft",
+ "borderWidth",
+ "borderTopWidth",
+ "borderRightWidth",
+ "borderBottomWidth",
+ "borderLeftWidth",
+ "outlineWidth",
+ "top",
+ "right",
+ "bottom",
+ "left",
+ "fontSize",
+ "lineHeight",
+ "letterSpacing",
+ "wordSpacing",
+ "maxWidth",
+ "minWidth",
+ "maxHeight",
+ "minHeight",
+ "borderRadius",
+ "borderTopLeftRadius",
+ "borderTopRightRadius",
+ "borderBottomLeftRadius",
+ "borderBottomRightRadius",
+ "textIndent",
+ "gridColumnGap",
+ "gridRowGap",
+ "gridGap",
+ "translateX",
+ "translateY",
+ ];
+
return Object.entries(cssProperties)
- .map(([property, value]) => `${camelToKebabCase(property)}:${value}`)
+ .map(([property, value]) => {
+ if (
+ typeof value === "number" &&
+ numericalCssProperties.includes(property)
+ ) {
+ return `${camelToKebabCase(property)}:${value}px`;
+ } else {
+ return `${camelToKebabCase(property)}:${value}`;
+ }
+ })
.join(";");
}
-export function parseMarkdownToReactEmail(
- markdown: string,
- customStyles?: StylesType
-): string {
+export const initRenderer = ({
+ customStyles,
+ withDataAttr = false,
+}: initRendererProps): RendererObject => {
const finalStyles = { ...styles, ...customStyles };
- let reactMailTemplate = "";
- // Handle inline code (e.g., `code`)
- reactMailTemplate = markdown.replace(
- patterns.codeInline,
- `$2`
- );
-
- // Handle code blocks (e.g., ```code```)
- reactMailTemplate = reactMailTemplate.replace(
- patterns.codeBlocks,
- function (_, codeContent: string) {
- const indentedCodeContent = codeContent
- .split("\n")
- .map((line) => ` ${line}`)
- .join("\n");
- return `\n${indentedCodeContent}\n`;
- }
- );
+ }>\n${quote}\n`;
+ },
- // Handle blockquotes
- function parseMarkdownWithBlockQuotes(markdown: string): string {
- const blockquoteRegex = /^(>\s*((?:.+\n?)+))(?!\n(?=>\s))/gm;
-
- function parseBlockQuote(match: string) {
- const nestedContent = match.replace(/^>\s*/gm, "");
- const nestedHTML = parseMarkdownWithBlockQuotes(nestedContent);
- return `\n${nestedHTML}\n`;
- }
-
- return markdown.replace(blockquoteRegex, parseBlockQuote);
- }
-
- reactMailTemplate = parseMarkdownWithBlockQuotes(reactMailTemplate);
-
- // Handle paragraphs
- reactMailTemplate = reactMailTemplate.replace(
- patterns.p,
- `$1`
- );
-
- // Handle headings (e.g., # Heading)
- reactMailTemplate = reactMailTemplate.replace(
- patterns.h1,
- `$1 `
- );
- reactMailTemplate = reactMailTemplate.replace(
- patterns.h2,
- `$1 `
- );
- reactMailTemplate = reactMailTemplate.replace(
- patterns.h3,
- `$1 `
- );
- reactMailTemplate = reactMailTemplate.replace(
- patterns.h4,
- `$1 `
- );
- reactMailTemplate = reactMailTemplate.replace(
- patterns.h5,
- `$1 `
- );
- reactMailTemplate = reactMailTemplate.replace(
- patterns.h6,
- `$1 `
- );
-
- // Handle Tables from GFM
- reactMailTemplate = reactMailTemplate.replace(
- patterns.table,
- (match: string) => {
- const rows = match.trim().split("\n");
- const headers = rows[0]
- .split("|")
- .slice(1, -1)
- .map((cell) => cell.trim());
- const alignments = rows[1]
- .split("|")
- .slice(1, -1)
- .map((cell) => {
- const align = cell.trim().toLowerCase();
- return align === ":--"
- ? "left"
- : align === "--:"
- ? "right"
- : "center";
- });
- const body = rows
- .slice(2)
- .map((row) => {
- const cells = row
- .split("|")
- .slice(1, -1)
- .map((cell) => cell.trim());
- return `${cells
- .map(
- (cell, index) =>
- `${cell} `
- )
- .join("")}`;
- })
- .join("");
-
- const table = `${headers
- .map(
- (header, index) =>
- `${header} `
- )
- .join("")}${body}`;
- return table;
- }
- );
-
- // Handle strikethrough
- reactMailTemplate = reactMailTemplate.replace(
- patterns.strikethrough,
- `$1`
- );
-
- // Handle bold text (e.g., **bold**)
- reactMailTemplate = reactMailTemplate.replace(
- patterns.bold,
- `$1`
- );
-
- // Handle italic text (e.g., *italic*)
- reactMailTemplate = reactMailTemplate.replace(
- patterns.italic,
- `$2`
- );
-
- // Handle lists (unordered)
- reactMailTemplate = reactMailTemplate.replace(
- patterns.li,
- `$1 `
- );
- reactMailTemplate = reactMailTemplate.replace(
- patterns.ul,
- `$&`
- );
-
- // Handle lists (ordered)
- reactMailTemplate = reactMailTemplate.replace(patterns.ol, function (match) {
- const listItems = match
- .split("\n")
- .map((line) => {
- const listItemContent = line.replace(/^\d+\.\s+/, "");
- return listItemContent
- ? `${listItemContent}`
- : "";
- })
- .join("\n");
- return `${listItems}`;
- });
-
- // Handle images (e.g., )
- reactMailTemplate = reactMailTemplate.replace(
- patterns.image,
- `$1`
- );
-
- // Handle line breaks (e.g., $2`
- );
-
- // Handle code blocks (e.g., ```code```)
- reactMailTemplate = reactMailTemplate.replace(
- patterns.codeBlocks,
- function (_, codeContent: string) {
- const indentedCodeContent = codeContent
- .split("\n")
- .map((line) => ` ${line}`)
- .join("\n");
return `\n${indentedCodeContent}\n`;
- }
- );
+ }>${code}\n`;
+ },
- // Handle blockquotes
- function parseMarkdownWithBlockQuotes(markdown: string): string {
- const blockquoteRegex = /^(>\s*((?:.+\n?)+))(?!\n(?=>\s))/gm;
+ codespan(text) {
+ return `${text}`;
+ },
- function parseBlockQuote(match: string) {
- const nestedContent = match.replace(/^>\s*/gm, "");
- const nestedHTML = parseMarkdownWithBlockQuotes(nestedContent);
- return `\n${nestedHTML}\n`;
- }
+ }>${text}`;
+ },
- return markdown.replace(blockquoteRegex, parseBlockQuote);
- }
+ em(text) {
+ return `${text}`;
+ },
+
+ heading(text, level) {
+ return `${text}`;
+ },
+
+ hr() {
+ return `${text} `;
+ return out;
+ },
+
+ list(body, ordered, start) {
+ const type = ordered ? "ol" : "ul";
+ const startatt = ordered && start !== 1 ? ' start="' + start + '"' : "";
+ return (
+ "<" +
+ type +
+ startatt +
+ `${
+ parseCssInJsToInlineCss(finalStyles.ol) !== ""
+ ? ` style="${parseCssInJsToInlineCss(
+ finalStyles[ordered ? "ol" : "ul"]
+ )}"`
+ : ""
+ } >\n` +
+ body +
+ "\n"
+ );
+ },
+
+ listitem(text) {
+ return `${text}\n`;
+ },
- // Handle paragraphs
- reactMailTemplate = reactMailTemplate.replace(
- patterns.p,
- `$1`
- );
+ paragraph(text) {
+ return `${text}\n`;
+ },
- // Handle headings (e.g., # Heading)
- reactMailTemplate = reactMailTemplate.replace(
- patterns.h1,
- `$1`
- );
- reactMailTemplate = reactMailTemplate.replace(
- patterns.h2,
- `$1`
- );
- reactMailTemplate = reactMailTemplate.replace(
- patterns.h3,
- `$1`
- );
- reactMailTemplate = reactMailTemplate.replace(
- patterns.h4,
- `$1`
- );
- reactMailTemplate = reactMailTemplate.replace(
- patterns.h5,
- `$1`
- );
- reactMailTemplate = reactMailTemplate.replace(
- patterns.h6,
- `$1`
- );
+ strong(text) {
+ return `${text}`;
+ },
- // Handle Tables from GFM
- reactMailTemplate = reactMailTemplate.replace(
- patterns.table,
- (match: string) => {
- const rows = match.trim().split("\n");
- const headers = rows[0]
- .split("|")
- .slice(1, -1)
- .map((cell) => cell.trim());
- const alignments = rows[1]
- .split("|")
- .slice(1, -1)
- .map((cell) => {
- const align = cell.trim().toLowerCase();
- return align === ":--"
- ? "left"
- : align === "--:"
- ? "right"
- : "center";
- });
- const body = rows
- .slice(2)
- .map((row) => {
- const cells = row
- .split("|")
- .slice(1, -1)
- .map((cell) => cell.trim());
- return `${cells
- .map(
- (cell, index) =>
- `${cell} `
- )
- .join("")}`;
- })
- .join("");
+ table(header, body) {
+ if (body) body = `${body} `;
- const table = `\n\n${header}\n${body}\n`;
+ },
+
+ tablecell(content, flags) {
+ const type = flags.header ? "th" : "td";
+ const tag = flags.align
+ ? `<${type} align="${flags.align}"${
+ parseCssInJsToInlineCss(finalStyles.td) !== ""
+ ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"`
+ : ""
+ }>`
+ : `<${type}${
+ parseCssInJsToInlineCss(finalStyles.td) !== ""
+ ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"`
+ : ""
+ }>`;
+ return tag + content + `\n`;
+ },
+
+ tablerow(content) {
+ return `${headers
- .map(
- (header, index) =>
- `${header} `
- )
- .join("")}${body}`;
- return table;
- }
- );
-
- // Handle strikethrough
- reactMailTemplate = reactMailTemplate.replace(
- patterns.strikethrough,
- `$1`
- );
-
- // Handle bold text (e.g., **bold**)
- reactMailTemplate = reactMailTemplate.replace(
- patterns.bold,
- `$1`
- );
+ }>\n${content}\n`;
+ },
+ };
- // Handle italic text (e.g., *italic*)
- reactMailTemplate = reactMailTemplate.replace(
- patterns.italic,
- `$2`
- );
-
- // Handle lists (unordered)
- reactMailTemplate = reactMailTemplate.replace(
- patterns.li,
- `$1`
- );
- reactMailTemplate = reactMailTemplate.replace(
- patterns.ul,
- `$&`
- );
-
- // Handle lists (ordered)
- reactMailTemplate = reactMailTemplate.replace(patterns.ol, function (match) {
- const listItems = match
- .split("\n")
- .map((line) => {
- const listItemContent = line.replace(/^\d+\.\s+/, "");
- return listItemContent
- ? `${listItemContent}`
- : "";
- })
- .join("\n");
- return `${listItems}`;
- });
-
- // Handle images (e.g., )
- reactMailTemplate = reactMailTemplate.replace(
- patterns.image,
- `$1`
- );
-
- // Handle line breaks (e.g., ![\"Alt](\"https://example.com/image.jpg\")
-
-![\"Markdown](\"https://markdown-here.com/img/icon256.png\")
`;
+ const expected = `