chore(markdown): move out of md-to-react-email

.changeset/proud-animals-show.md

@@ -0,0 +1,5 @@
+---
+"@react-email/markdown": patch
+---
+
+move out of md-to-react-email

packages/markdown/package.json

@@ -46,7 +46,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "md-to-react-email": "^5.0.5"
+    "marked": "^15.0.12"
   },
   "peerDependencies": {
     "react": "^18.0 || ^19.0 || ^19.0.0-rc"

packages/markdown/src/__snapshots__/markdown.spec.tsx.snap

@@ -42,7 +42,7 @@ exports[`<Markdown> component renders correctly > renders the markdown in the co
 <li>Author</li>
 </ul>
 </blockquote>
-<h2 style="font-weight:500;padding-top:20px;font-size:2rem">Code Blocks</h2><pre style="color:#212529;font-size:87.5%;display:inline;background: #f8f8f8;font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:1px;margin-bottom:20px;word-wrap:break-word"><code>function greet(name) {
+<h2 style="font-weight:500;padding-top:20px;font-size:2rem">Code Blocks</h2><pre style="color:#212529;font-size:87.5%;display:block;background: #f8f8f8;font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:1px;margin-bottom:20px;word-wrap:break-word"><code>function greet(name) {
 console.log(\`Hello, \${name}!\`);
 }
 </code></pre>

packages/markdown/src/markdown.tsx

@@ -1,6 +1,7 @@
-import type { StylesType } from 'md-to-react-email';
-import { parseMarkdownToJSX } from 'md-to-react-email';
+import { marked, Renderer } from 'marked';
 import * as React from 'react';
+import { type StylesType, styles } from './styles';
+import { parseCssInJsToInlineCss } from './utils/parse-css-in-js-to-inline-css';
 
 export type MarkdownProps = Readonly<{
   children: string;
@@ -13,15 +14,216 @@ export const Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>(
     { children, markdownContainerStyles, markdownCustomStyles, ...props },
     ref,
   ) => {
-    const parsedMarkdown = parseMarkdownToJSX({
-      markdown: children,
-      customStyles: markdownCustomStyles,
-    });
+    const finalStyles = { ...styles, ...markdownCustomStyles };
+
+    const renderer = new Renderer();
+    renderer.blockquote = ({ tokens }) => {
+      const text = renderer.parser.parse(tokens);
+
+      return `<blockquote${
+        parseCssInJsToInlineCss(finalStyles.blockQuote) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.blockQuote)}"`
+          : ''
+      }>\n${text}</blockquote>\n`;
+    };
+
+    renderer.br = () => {
+      return `<br${
+        parseCssInJsToInlineCss(finalStyles.br) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.br)}"`
+          : ''
+      } />`;
+    };
+
+    // TODO: Support all options
+    renderer.code = ({ text }) => {
+      text = `${text.replace(/\n$/, '')}\n`;
+
+      return `<pre${
+        parseCssInJsToInlineCss(finalStyles.codeBlock) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.codeBlock)}"`
+          : ''
+      }><code>${text}</code></pre>\n`;
+    };
+
+    renderer.codespan = ({ text }) => {
+      return `<code${
+        parseCssInJsToInlineCss(finalStyles.codeInline) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.codeInline)}"`
+          : ''
+      }>${text}</code>`;
+    };
+
+    renderer.del = ({ tokens }) => {
+      const text = renderer.parser.parseInline(tokens);
+
+      return `<del${
+        parseCssInJsToInlineCss(finalStyles.strikethrough) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.strikethrough)}"`
+          : ''
+      }>${text}</del>`;
+    };
+
+    renderer.em = ({ tokens }) => {
+      const text = renderer.parser.parseInline(tokens);
+
+      return `<em${
+        parseCssInJsToInlineCss(finalStyles.italic) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.italic)}"`
+          : ''
+      }>${text}</em>`;
+    };
+
+    renderer.heading = ({ tokens, depth }) => {
+      const text = renderer.parser.parseInline(tokens);
+
+      return `<h${depth}${
+        parseCssInJsToInlineCss(
+          finalStyles[`h${depth}` as keyof StylesType],
+        ) !== ''
+          ? ` style="${parseCssInJsToInlineCss(
+              finalStyles[`h${depth}` as keyof StylesType],
+            )}"`
+          : ''
+      }>${text}</h${depth}>`;
+    };
+
+    renderer.hr = () => {
+      return `<hr${
+        parseCssInJsToInlineCss(finalStyles.hr) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.hr)}"`
+          : ''
+      } />\n`;
+    };
+
+    renderer.image = ({ href, text, title }) => {
+      return `<img src="${href.replaceAll('"', '&quot;')}" alt="${text.replaceAll('"', '&quot;')}"${
+        title ? ` title="${title}"` : ''
+      }${
+        parseCssInJsToInlineCss(finalStyles.image) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.image)}"`
+          : ''
+      }>`;
+    };
+
+    renderer.link = ({ href, title, tokens }) => {
+      const text = renderer.parser.parseInline(tokens);
+
+      return `<a href="${href}" target="_blank"${
+        title ? ` title="${title}"` : ''
+      }${
+        parseCssInJsToInlineCss(finalStyles.link) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.link)}"`
+          : ''
+      }>${text}</a>`;
+    };
+
+    renderer.listitem = ({ tokens }) => {
+      const text = renderer.parser.parseInline(tokens);
+
+      return `<li${
+        parseCssInJsToInlineCss(finalStyles.li) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.li)}"`
+          : ''
+      }>${text}</li>\n`;
+    };
+
+    renderer.list = ({ items, ordered, start }) => {
+      const type = ordered ? 'ol' : 'ul';
+      const startAt = ordered && start !== 1 ? ` start="${start}"` : '';
+      const styles = parseCssInJsToInlineCss(
+        finalStyles[ordered ? 'ol' : 'ul'],
+      );
+
+      return (
+        '<' +
+        type +
+        startAt +
+        `${styles !== '' ? ` style="${styles}"` : ''}>\n` +
+        items.map((item) => renderer.listitem(item)).join('') +
+        '</' +
+        type +
+        '>\n'
+      );
+    };
+
+    renderer.paragraph = ({ tokens }) => {
+      const text = renderer.parser.parseInline(tokens);
+
+      return `<p${
+        parseCssInJsToInlineCss(finalStyles.p) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.p)}"`
+          : ''
+      }>${text}</p>\n`;
+    };
+
+    renderer.strong = ({ tokens }) => {
+      const text = renderer.parser.parseInline(tokens);
+
+      return `<strong${
+        parseCssInJsToInlineCss(finalStyles.bold) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.bold)}"`
+          : ''
+      }>${text}</strong>`;
+    };
+
+    renderer.table = ({ header, rows }) => {
+      const styleTable = parseCssInJsToInlineCss(finalStyles.table);
+      const styleThead = parseCssInJsToInlineCss(finalStyles.thead);
+      const styleTbody = parseCssInJsToInlineCss(finalStyles.tbody);
+
+      const theadRow = renderer.tablerow({
+        text: header.map((cell) => renderer.tablecell(cell)).join(''),
+      });
+
+      const tbodyRows = rows
+        .map((row) =>
+          renderer.tablerow({
+            text: row.map((cell) => renderer.tablecell(cell)).join(''),
+          }),
+        )
+        .join('');
+
+      const thead = `<thead${styleThead ? ` style="${styleThead}"` : ''}>\n${theadRow}</thead>`;
+      const tbody = `<tbody${styleTbody ? ` style="${styleTbody}"` : ''}>${tbodyRows}</tbody>`;
+
+      return `<table${styleTable ? ` style="${styleTable}"` : ''}>\n${thead}\n${tbody}</table>\n`;
+    };
+
+    renderer.tablecell = ({ tokens, align, header }) => {
+      const text = renderer.parser.parseInline(tokens);
+      const type = header ? 'th' : 'td';
+      const tag = align
+        ? `<${type} align="${align}"${
+            parseCssInJsToInlineCss(finalStyles.td) !== ''
+              ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"`
+              : ''
+          }>`
+        : `<${type}${
+            parseCssInJsToInlineCss(finalStyles.td) !== ''
+              ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"`
+              : ''
+          }>`;
+      return `${tag}${text}</${type}>\n`;
+    };
+
+    renderer.tablerow = ({ text }) => {
+      return `<tr${
+        parseCssInJsToInlineCss(finalStyles.tr) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.tr)}"`
+          : ''
+      }>\n${text}</tr>\n`;
+    };
 
     return (
       <div
         {...props}
-        dangerouslySetInnerHTML={{ __html: parsedMarkdown }}
+        dangerouslySetInnerHTML={{
+          __html: marked.parse(children, {
+            renderer,
+            async: false,
+          }),
+        }}
         data-id="react-email-markdown"
         ref={ref}
         style={markdownContainerStyles}

packages/markdown/src/styles.ts

@@ -0,0 +1,130 @@
+const emptyStyle = {};
+
+const baseHeaderStyles = {
+  fontWeight: '500',
+  paddingTop: 20,
+};
+
+const h1 = {
+  ...baseHeaderStyles,
+  fontSize: '2.5rem',
+};
+
+const h2 = {
+  ...baseHeaderStyles,
+  fontSize: '2rem',
+};
+const h3 = {
+  ...baseHeaderStyles,
+  fontSize: '1.75rem',
+};
+const h4 = {
+  ...baseHeaderStyles,
+  fontSize: '1.5rem',
+};
+const h5 = {
+  ...baseHeaderStyles,
+  fontSize: '1.25rem',
+};
+const h6 = {
+  ...baseHeaderStyles,
+  fontSize: '1rem',
+};
+
+const bold = {
+  fontWeight: 'bold',
+};
+
+const italic = {
+  fontStyle: 'italic',
+};
+
+const blockQuote = {
+  background: '#f9f9f9',
+  borderLeft: '10px solid #ccc',
+  margin: '1.5em 10px',
+  padding: '1em 10px',
+};
+
+const codeInline = {
+  color: '#212529',
+  fontSize: '87.5%',
+  display: 'inline',
+  background: ' #f8f8f8',
+  fontFamily: 'SFMono-Regular,Menlo,Monaco,Consolas,monospace',
+};
+
+const codeBlock = {
+  ...codeInline,
+  display: 'block',
+  paddingTop: 10,
+  paddingRight: 10,
+  paddingLeft: 10,
+  paddingBottom: 1,
+  marginBottom: 20,
+  background: ' #f8f8f8',
+};
+
+const link = {
+  color: '#007bff',
+  textDecoration: 'underline',
+  backgroundColor: 'transparent',
+};
+
+export type StylesType = {
+  h1?: React.CSSProperties;
+  h2?: React.CSSProperties;
+  h3?: React.CSSProperties;
+  h4?: React.CSSProperties;
+  h5?: React.CSSProperties;
+  h6?: React.CSSProperties;
+  blockQuote?: React.CSSProperties;
+  bold?: React.CSSProperties;
+  italic?: React.CSSProperties;
+  link?: React.CSSProperties;
+  codeBlock?: React.CSSProperties;
+  codeInline?: React.CSSProperties;
+  p?: React.CSSProperties;
+  li?: React.CSSProperties;
+  ul?: React.CSSProperties;
+  ol?: React.CSSProperties;
+  image?: React.CSSProperties;
+  br?: React.CSSProperties;
+  hr?: React.CSSProperties;
+  table?: React.CSSProperties;
+  thead?: React.CSSProperties;
+  tbody?: React.CSSProperties;
+  tr?: React.CSSProperties;
+  th?: React.CSSProperties;
+  td?: React.CSSProperties;
+  strikethrough?: React.CSSProperties;
+};
+
+export const styles: StylesType = {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  blockQuote,
+  bold,
+  italic,
+  link,
+  codeBlock: { ...codeBlock, wordWrap: 'break-word' },
+  codeInline: { ...codeInline, wordWrap: 'break-word' },
+  p: emptyStyle,
+  li: emptyStyle,
+  ul: emptyStyle,
+  ol: emptyStyle,
+  image: emptyStyle,
+  br: emptyStyle,
+  hr: emptyStyle,
+  table: emptyStyle,
+  thead: emptyStyle,
+  tbody: emptyStyle,
+  th: emptyStyle,
+  td: emptyStyle,
+  tr: emptyStyle,
+  strikethrough: emptyStyle,
+};