@react-email/markdown - npm Package Compare versions

Comparing version 0.0.15 to 0.0.16

dist/index.d.mts.map

+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/styles.ts","../src/markdown.tsx"],"sourcesContent":[],"mappings":";;;KAyEY,UAAA;OACL,KAAA,CAAM;OACN,KAAA,CAAM;EAFD,EAAA,CAAA,EAGL,KAAA,CAAM,aAHS;EAAA,EAAA,CAAA,EAIf,KAAA,CAAM,aAJS;KACf,EAIA,KAAA,CAAM,aAJA;KACN,EAIA,KAAA,CAAM,aAJA;YACA,CAAA,EAIE,KAAA,CAAM,aAJR;MACN,CAAA,EAIE,KAAA,CAAM,aAJF;QACN,CAAA,EAII,KAAA,CAAM,aAJJ;MACN,CAAA,EAIE,KAAA,CAAM,aAJF;WACQ,CAAA,EAIP,KAAA,CAAM,aAJC;YACN,CAAA,EAIA,KAAA,CAAM,aAJN;MAKT,KAAA,CAAM,aAJK;KACR,EAIF,KAAA,CAAM,aAJE;KACD,EAIP,KAAA,CAAM,aAJO;KACL,EAIR,KAAA,CAAM,aAJQ;OACf,CAAA,EAII,KAAA,CAAM,aAJJ;KACL,EAIA,KAAA,CAAM,aAJA;KACN,EAIA,KAAA,CAAM,aAJA;OACN,CAAA,EAIG,KAAA,CAAM,aAJH;OACH,CAAA,EAIA,KAAA,CAAM,aAJA;OACT,CAAA,EAIG,KAAA,CAAM,aAJH;KACN,EAIA,KAAA,CAAM,aAJA;KACH,EAIH,KAAA,CAAM,aAJG;KACN,EAIH,KAAA,CAAM,aAJG;eACA,CAAA,EAIE,KAAA,CAAM,aAJR;;;;KC1FJ,aAAA,GAAgB;EDoEhB,QAAA,EAAA,MAAU;EAAA,oBAAA,CAAA,EClEG,UDkEH;yBACT,CAAA,EClEe,OAAA,CAAM,aDkErB;;AAEN,cCjEM,QDiEA,ECjEQ,OAAA,CAAA,yBDiER,CCjEQ,QDiER,CAAA;UACN,EAAM,MAAA;sBACA,CAAA,ECvEY,UDuEZ;yBACA,CAAA,ECvEe,OAAA,CAAM,aDuErB;0BACQ,eAAA,CAAA,CAAA"}

dist/index.d.ts.map

+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/styles.ts","../src/markdown.tsx"],"sourcesContent":[],"mappings":";;;KAyEY,UAAA;OACL,KAAA,CAAM;OACN,KAAA,CAAM;EAFD,EAAA,CAAA,EAGL,KAAA,CAAM,aAHS;EAAA,EAAA,CAAA,EAIf,KAAA,CAAM,aAJS;KACf,EAIA,KAAA,CAAM,aAJA;KACN,EAIA,KAAA,CAAM,aAJA;YACA,CAAA,EAIE,KAAA,CAAM,aAJR;MACN,CAAA,EAIE,KAAA,CAAM,aAJF;QACN,CAAA,EAII,KAAA,CAAM,aAJJ;MACN,CAAA,EAIE,KAAA,CAAM,aAJF;WACQ,CAAA,EAIP,KAAA,CAAM,aAJC;YACN,CAAA,EAIA,KAAA,CAAM,aAJN;MAKT,KAAA,CAAM,aAJK;KACR,EAIF,KAAA,CAAM,aAJE;KACD,EAIP,KAAA,CAAM,aAJO;KACL,EAIR,KAAA,CAAM,aAJQ;OACf,CAAA,EAII,KAAA,CAAM,aAJJ;KACL,EAIA,KAAA,CAAM,aAJA;KACN,EAIA,KAAA,CAAM,aAJA;OACN,CAAA,EAIG,KAAA,CAAM,aAJH;OACH,CAAA,EAIA,KAAA,CAAM,aAJA;OACT,CAAA,EAIG,KAAA,CAAM,aAJH;KACN,EAIA,KAAA,CAAM,aAJA;KACH,EAIH,KAAA,CAAM,aAJG;KACN,EAIH,KAAA,CAAM,aAJG;eACA,CAAA,EAIE,KAAA,CAAM,aAJR;;;;KC1FJ,aAAA,GAAgB;EDoEhB,QAAA,EAAA,MAAU;EAAA,oBAAA,CAAA,EClEG,UDkEH;yBACT,CAAA,EClEe,OAAA,CAAM,aDkErB;;AAEN,cCjEM,QDiEA,ECjEQ,OAAA,CAAA,yBDiER,CCjEQ,QDiER,CAAA;UACN,EAAM,MAAA;sBACA,CAAA,ECvEY,UDuEZ;yBACA,CAAA,ECvEe,OAAA,CAAM,aDuErB;0BACQ,eAAA,CAAA,CAAA"}

dist/index.mjs.map

+{"version":3,"file":"index.mjs","names":["styles: StylesType","styles"],"sources":["../src/styles.ts","../src/utils/parse-css-in-js-to-inline-css.ts","../src/markdown.tsx"],"sourcesContent":["const emptyStyle = {};\n\nconst baseHeaderStyles = {\n  fontWeight: '500',\n  paddingTop: 20,\n};\n\nconst h1 = {\n  ...baseHeaderStyles,\n  fontSize: '2.5rem',\n};\n\nconst h2 = {\n  ...baseHeaderStyles,\n  fontSize: '2rem',\n};\nconst h3 = {\n  ...baseHeaderStyles,\n  fontSize: '1.75rem',\n};\nconst h4 = {\n  ...baseHeaderStyles,\n  fontSize: '1.5rem',\n};\nconst h5 = {\n  ...baseHeaderStyles,\n  fontSize: '1.25rem',\n};\nconst h6 = {\n  ...baseHeaderStyles,\n  fontSize: '1rem',\n};\n\nconst bold = {\n  fontWeight: 'bold',\n};\n\nconst italic = {\n  fontStyle: 'italic',\n};\n\nconst blockQuote = {\n  background: '#f9f9f9',\n  borderLeft: '10px solid #ccc',\n  margin: '1.5em 10px',\n  padding: '1em 10px',\n};\n\nconst codeInline = {\n  color: '#212529',\n  fontSize: '87.5%',\n  display: 'inline',\n  background: ' #f8f8f8',\n  fontFamily: 'SFMono-Regular,Menlo,Monaco,Consolas,monospace',\n};\n\nconst codeBlock = {\n  ...codeInline,\n  display: 'block',\n  paddingTop: 10,\n  paddingRight: 10,\n  paddingLeft: 10,\n  paddingBottom: 1,\n  marginBottom: 20,\n  background: ' #f8f8f8',\n};\n\nconst link = {\n  color: '#007bff',\n  textDecoration: 'underline',\n  backgroundColor: 'transparent',\n};\n\nexport type StylesType = {\n  h1?: React.CSSProperties;\n  h2?: React.CSSProperties;\n  h3?: React.CSSProperties;\n  h4?: React.CSSProperties;\n  h5?: React.CSSProperties;\n  h6?: React.CSSProperties;\n  blockQuote?: React.CSSProperties;\n  bold?: React.CSSProperties;\n  italic?: React.CSSProperties;\n  link?: React.CSSProperties;\n  codeBlock?: React.CSSProperties;\n  codeInline?: React.CSSProperties;\n  p?: React.CSSProperties;\n  li?: React.CSSProperties;\n  ul?: React.CSSProperties;\n  ol?: React.CSSProperties;\n  image?: React.CSSProperties;\n  br?: React.CSSProperties;\n  hr?: React.CSSProperties;\n  table?: React.CSSProperties;\n  thead?: React.CSSProperties;\n  tbody?: React.CSSProperties;\n  tr?: React.CSSProperties;\n  th?: React.CSSProperties;\n  td?: React.CSSProperties;\n  strikethrough?: React.CSSProperties;\n};\n\nexport const styles: StylesType = {\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  blockQuote,\n  bold,\n  italic,\n  link,\n  codeBlock: { ...codeBlock, wordWrap: 'break-word' },\n  codeInline: { ...codeInline, wordWrap: 'break-word' },\n  p: emptyStyle,\n  li: emptyStyle,\n  ul: emptyStyle,\n  ol: emptyStyle,\n  image: emptyStyle,\n  br: emptyStyle,\n  hr: emptyStyle,\n  table: emptyStyle,\n  thead: emptyStyle,\n  tbody: emptyStyle,\n  th: emptyStyle,\n  td: emptyStyle,\n  tr: emptyStyle,\n  strikethrough: emptyStyle,\n};\n","function camelToKebabCase(str: string): string {\n  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n}\n\nfunction escapeQuotes(value: unknown) {\n  if (typeof value === 'string' && value.includes('\"')) {\n    return value.replace(/\"/g, '&#x27;');\n  }\n  return value;\n}\n\nexport function parseCssInJsToInlineCss(\n  cssProperties: React.CSSProperties | undefined,\n): string {\n  if (!cssProperties) return '';\n\n  const numericalCssProperties = [\n    'width',\n    'height',\n    'margin',\n    'marginTop',\n    'marginRight',\n    'marginBottom',\n    'marginLeft',\n    'padding',\n    'paddingTop',\n    'paddingRight',\n    'paddingBottom',\n    'paddingLeft',\n    'borderWidth',\n    'borderTopWidth',\n    'borderRightWidth',\n    'borderBottomWidth',\n    'borderLeftWidth',\n    'outlineWidth',\n    'top',\n    'right',\n    'bottom',\n    'left',\n    'fontSize',\n    'letterSpacing',\n    'wordSpacing',\n    'maxWidth',\n    'minWidth',\n    'maxHeight',\n    'minHeight',\n    'borderRadius',\n    'borderTopLeftRadius',\n    'borderTopRightRadius',\n    'borderBottomLeftRadius',\n    'borderBottomRightRadius',\n    'textIndent',\n    'gridColumnGap',\n    'gridRowGap',\n    'gridGap',\n    'translateX',\n    'translateY',\n  ];\n\n  return Object.entries(cssProperties)\n    .map(([property, value]) => {\n      if (\n        typeof value === 'number' &&\n        numericalCssProperties.includes(property)\n      ) {\n        return `${camelToKebabCase(property)}:${value}px`;\n      }\n\n      const escapedValue = escapeQuotes(value);\n      return `${camelToKebabCase(property)}:${escapedValue}`;\n    })\n    .join(';');\n}\n","import { marked, Renderer } from 'marked';\nimport * as React from 'react';\nimport { type StylesType, styles } from './styles';\nimport { parseCssInJsToInlineCss } from './utils/parse-css-in-js-to-inline-css';\n\nexport type MarkdownProps = Readonly<{\n  children: string;\n  markdownCustomStyles?: StylesType;\n  markdownContainerStyles?: React.CSSProperties;\n}>;\n\nexport const Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>(\n  (\n    { children, markdownContainerStyles, markdownCustomStyles, ...props },\n    ref,\n  ) => {\n    const finalStyles = { ...styles, ...markdownCustomStyles };\n\n    const renderer = new Renderer();\n    renderer.blockquote = ({ tokens }) => {\n      const text = renderer.parser.parse(tokens);\n\n      return `<blockquote${\n        parseCssInJsToInlineCss(finalStyles.blockQuote) !== ''\n          ? ` style=\"${parseCssInJsToInlineCss(finalStyles.blockQuote)}\"`\n          : ''\n      }>\\n${text}</blockquote>\\n`;\n    };\n\n    renderer.br = () => {\n      return `<br${\n        parseCssInJsToInlineCss(finalStyles.br) !== ''\n          ? ` style=\"${parseCssInJsToInlineCss(finalStyles.br)}\"`\n          : ''\n      } />`;\n    };\n\n    // TODO: Support all options\n    renderer.code = ({ text }) => {\n      text = `${text.replace(/\\n$/, '')}\\n`;\n\n      return `<pre${\n        parseCssInJsToInlineCss(finalStyles.codeBlock) !== ''\n          ? ` style=\"${parseCssInJsToInlineCss(finalStyles.codeBlock)}\"`\n          : ''\n      }><code>${text}</code></pre>\\n`;\n    };\n\n    renderer.codespan = ({ text }) => {\n      return `<code${\n        parseCssInJsToInlineCss(finalStyles.codeInline) !== ''\n          ? ` style=\"${parseCssInJsToInlineCss(finalStyles.codeInline)}\"`\n          : ''\n      }>${text}</code>`;\n    };\n\n    renderer.del = ({ tokens }) => {\n      const text = renderer.parser.parseInline(tokens);\n\n      return `<del${\n        parseCssInJsToInlineCss(finalStyles.strikethrough) !== ''\n          ? ` style=\"${parseCssInJsToInlineCss(finalStyles.strikethrough)}\"`\n          : ''\n      }>${text}</del>`;\n    };\n\n    renderer.em = ({ tokens }) => {\n      const text = renderer.parser.parseInline(tokens);\n\n      return `<em${\n        parseCssInJsToInlineCss(finalStyles.italic) !== ''\n          ? ` style=\"${parseCssInJsToInlineCss(finalStyles.italic)}\"`\n          : ''\n      }>${text}</em>`;\n    };\n\n    renderer.heading = ({ tokens, depth }) => {\n      const text = renderer.parser.parseInline(tokens);\n\n      return `<h${depth}${\n        parseCssInJsToInlineCss(\n          finalStyles[`h${depth}` as keyof StylesType],\n        ) !== ''\n          ? ` style=\"${parseCssInJsToInlineCss(\n              finalStyles[`h${depth}` as keyof StylesType],\n            )}\"`\n          : ''\n      }>${text}</h${depth}>`;\n    };\n\n    renderer.hr = () => {\n      return `<hr${\n        parseCssInJsToInlineCss(finalStyles.hr) !== ''\n          ? ` style=\"${parseCssInJsToInlineCss(finalStyles.hr)}\"`\n          : ''\n      } />\\n`;\n    };\n\n    renderer.image = ({ href, text, title }) => {\n      return `<img src=\"${href.replaceAll('\"', '&quot;')}\" alt=\"${text.replaceAll('\"', '&quot;')}\"${\n        title ? ` title=\"${title}\"` : ''\n      }${\n        parseCssInJsToInlineCss(finalStyles.image) !== ''\n          ? ` style=\"${parseCssInJsToInlineCss(finalStyles.image)}\"`\n          : ''\n      }>`;\n    };\n\n    renderer.link = ({ href, title, tokens }) => {\n      const text = renderer.parser.parseInline(tokens);\n\n      return `<a href=\"${href}\" target=\"_blank\"${\n        title ? ` title=\"${title}\"` : ''\n      }${\n        parseCssInJsToInlineCss(finalStyles.link) !== ''\n          ? ` style=\"${parseCssInJsToInlineCss(finalStyles.link)}\"`\n          : ''\n      }>${text}</a>`;\n    };\n\n    renderer.listitem = ({ tokens }) => {\n      const text = renderer.parser.parseInline(tokens);\n\n      return `<li${\n        parseCssInJsToInlineCss(finalStyles.li) !== ''\n          ? ` style=\"${parseCssInJsToInlineCss(finalStyles.li)}\"`\n          : ''\n      }>${text}</li>\\n`;\n    };\n\n    renderer.list = ({ items, ordered, start }) => {\n      const type = ordered ? 'ol' : 'ul';\n      const startAt = ordered && start !== 1 ? ` start=\"${start}\"` : '';\n      const styles = parseCssInJsToInlineCss(\n        finalStyles[ordered ? 'ol' : 'ul'],\n      );\n\n      return (\n        '<' +\n        type +\n        startAt +\n        `${styles !== '' ? ` style=\"${styles}\"` : ''}>\\n` +\n        items.map((item) => renderer.listitem(item)).join('') +\n        '</' +\n        type +\n        '>\\n'\n      );\n    };\n\n    renderer.paragraph = ({ tokens }) => {\n      const text = renderer.parser.parseInline(tokens);\n\n      return `<p${\n        parseCssInJsToInlineCss(finalStyles.p) !== ''\n          ? ` style=\"${parseCssInJsToInlineCss(finalStyles.p)}\"`\n          : ''\n      }>${text}</p>\\n`;\n    };\n\n    renderer.strong = ({ tokens }) => {\n      const text = renderer.parser.parseInline(tokens);\n\n      return `<strong${\n        parseCssInJsToInlineCss(finalStyles.bold) !== ''\n          ? ` style=\"${parseCssInJsToInlineCss(finalStyles.bold)}\"`\n          : ''\n      }>${text}</strong>`;\n    };\n\n    renderer.table = ({ header, rows }) => {\n      const styleTable = parseCssInJsToInlineCss(finalStyles.table);\n      const styleThead = parseCssInJsToInlineCss(finalStyles.thead);\n      const styleTbody = parseCssInJsToInlineCss(finalStyles.tbody);\n\n      const theadRow = renderer.tablerow({\n        text: header.map((cell) => renderer.tablecell(cell)).join(''),\n      });\n\n      const tbodyRows = rows\n        .map((row) =>\n          renderer.tablerow({\n            text: row.map((cell) => renderer.tablecell(cell)).join(''),\n          }),\n        )\n        .join('');\n\n      const thead = `<thead${styleThead ? ` style=\"${styleThead}\"` : ''}>\\n${theadRow}</thead>`;\n      const tbody = `<tbody${styleTbody ? ` style=\"${styleTbody}\"` : ''}>${tbodyRows}</tbody>`;\n\n      return `<table${styleTable ? ` style=\"${styleTable}\"` : ''}>\\n${thead}\\n${tbody}</table>\\n`;\n    };\n\n    renderer.tablecell = ({ tokens, align, header }) => {\n      const text = renderer.parser.parseInline(tokens);\n      const type = header ? 'th' : 'td';\n      const tag = align\n        ? `<${type} align=\"${align}\"${\n            parseCssInJsToInlineCss(finalStyles.td) !== ''\n              ? ` style=\"${parseCssInJsToInlineCss(finalStyles.td)}\"`\n              : ''\n          }>`\n        : `<${type}${\n            parseCssInJsToInlineCss(finalStyles.td) !== ''\n              ? ` style=\"${parseCssInJsToInlineCss(finalStyles.td)}\"`\n              : ''\n          }>`;\n      return `${tag}${text}</${type}>\\n`;\n    };\n\n    renderer.tablerow = ({ text }) => {\n      return `<tr${\n        parseCssInJsToInlineCss(finalStyles.tr) !== ''\n          ? ` style=\"${parseCssInJsToInlineCss(finalStyles.tr)}\"`\n          : ''\n      }>\\n${text}</tr>\\n`;\n    };\n\n    return (\n      <div\n        {...props}\n        dangerouslySetInnerHTML={{\n          __html: marked.parse(children, {\n            renderer,\n            async: false,\n          }),\n        }}\n        data-id=\"react-email-markdown\"\n        ref={ref}\n        style={markdownContainerStyles}\n      />\n    );\n  },\n);\n\nMarkdown.displayName = 'Markdown';\n"],"mappings":"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"}

dist/index.d.mts

@@ -1,15 +0,46 @@
-import { StylesType } from 'md-to-react-email';
-import * as React from 'react';
+import * as React$1 from "react";
 
+//#region src/styles.d.ts
+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;
+};
+//#endregion
+//#region src/markdown.d.ts
 type MarkdownProps = Readonly<{
-    children: string;
-    markdownCustomStyles?: StylesType;
-    markdownContainerStyles?: React.CSSProperties;
+  children: string;
+  markdownCustomStyles?: StylesType;
+  markdownContainerStyles?: React$1.CSSProperties;
 }>;
-declare const Markdown: React.ForwardRefExoticComponent<Readonly<{
-    children: string;
-    markdownCustomStyles?: StylesType;
-    markdownContainerStyles?: React.CSSProperties;
-}> & React.RefAttributes<HTMLDivElement>>;
-
-export { Markdown, type MarkdownProps };
+declare const Markdown: React$1.ForwardRefExoticComponent<Readonly<{
+  children: string;
+  markdownCustomStyles?: StylesType;
+  markdownContainerStyles?: React$1.CSSProperties;
+}> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Markdown, MarkdownProps };
+//# sourceMappingURL=index.d.mts.map

dist/index.d.ts

@@ -1,15 +0,46 @@
-import { StylesType } from 'md-to-react-email';
-import * as React from 'react';
+import * as React$1 from "react";
 
+//#region src/styles.d.ts
+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;
+};
+//#endregion
+//#region src/markdown.d.ts
 type MarkdownProps = Readonly<{
-    children: string;
-    markdownCustomStyles?: StylesType;
-    markdownContainerStyles?: React.CSSProperties;
+  children: string;
+  markdownCustomStyles?: StylesType;
+  markdownContainerStyles?: React$1.CSSProperties;
 }>;
-declare const Markdown: React.ForwardRefExoticComponent<Readonly<{
-    children: string;
-    markdownCustomStyles?: StylesType;
-    markdownContainerStyles?: React.CSSProperties;
-}> & React.RefAttributes<HTMLDivElement>>;
-
-export { Markdown, type MarkdownProps };
+declare const Markdown: React$1.ForwardRefExoticComponent<Readonly<{
+  children: string;
+  markdownCustomStyles?: StylesType;
+  markdownContainerStyles?: React$1.CSSProperties;
+}> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Markdown, MarkdownProps };
+//# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -1,92 +0,280 @@
-"use strict";
+//#region rolldown:runtime
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let marked = require("marked");
+marked = __toESM(marked);
+let react = require("react");
+react = __toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = __toESM(react_jsx_runtime);
+
+//#region src/styles.ts
+const emptyStyle = {};
+const baseHeaderStyles = {
+	fontWeight: "500",
+	paddingTop: 20
 };
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+const h1 = {
+	...baseHeaderStyles,
+	fontSize: "2.5rem"
 };
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
+const h2 = {
+	...baseHeaderStyles,
+	fontSize: "2rem"
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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"
+};
+const styles = {
+	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
+};
 
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Markdown: () => Markdown
+//#endregion
+//#region src/utils/parse-css-in-js-to-inline-css.ts
+function camelToKebabCase(str) {
+	return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function escapeQuotes(value) {
+	if (typeof value === "string" && value.includes("\"")) return value.replace(/"/g, "&#x27;");
+	return value;
+}
+function parseCssInJsToInlineCss(cssProperties) {
+	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",
+		"letterSpacing",
+		"wordSpacing",
+		"maxWidth",
+		"minWidth",
+		"maxHeight",
+		"minHeight",
+		"borderRadius",
+		"borderTopLeftRadius",
+		"borderTopRightRadius",
+		"borderBottomLeftRadius",
+		"borderBottomRightRadius",
+		"textIndent",
+		"gridColumnGap",
+		"gridRowGap",
+		"gridGap",
+		"translateX",
+		"translateY"
+	];
+	return Object.entries(cssProperties).map(([property, value]) => {
+		if (typeof value === "number" && numericalCssProperties.includes(property)) return `${camelToKebabCase(property)}:${value}px`;
+		const escapedValue = escapeQuotes(value);
+		return `${camelToKebabCase(property)}:${escapedValue}`;
+	}).join(";");
+}
+
+//#endregion
+//#region src/markdown.tsx
+const Markdown = react.forwardRef(({ children, markdownContainerStyles, markdownCustomStyles,...props }, ref) => {
+	const finalStyles = {
+		...styles,
+		...markdownCustomStyles
+	};
+	const renderer = new marked.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)}"` : ""} />`;
+	};
+	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}`]) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles[`h${depth}`])}"` : ""}>${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$1 = parseCssInJsToInlineCss(finalStyles[ordered ? "ol" : "ul"]);
+		return "<" + type + startAt + `${styles$1 !== "" ? ` style="${styles$1}"` : ""}>\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";
+		return `${align ? `<${type} align="${align}"${parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>` : `<${type}${parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>`}${text}</${type}>\n`;
+	};
+	renderer.tablerow = ({ text }) => {
+		return `<tr${parseCssInJsToInlineCss(finalStyles.tr) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.tr)}"` : ""}>\n${text}</tr>\n`;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		dangerouslySetInnerHTML: { __html: marked.marked.parse(children, {
+			renderer,
+			async: false
+		}) },
+		"data-id": "react-email-markdown",
+		ref,
+		style: markdownContainerStyles
+	});
 });
-module.exports = __toCommonJS(index_exports);
+Markdown.displayName = "Markdown";
 
-// src/markdown.tsx
-var import_md_to_react_email = require("md-to-react-email");
-var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var Markdown = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, markdownContainerStyles, markdownCustomStyles } = _b, props = __objRest(_b, ["children", "markdownContainerStyles", "markdownCustomStyles"]);
-    const parsedMarkdown = (0, import_md_to_react_email.parseMarkdownToJSX)({
-      markdown: children,
-      customStyles: markdownCustomStyles
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      __spreadProps(__spreadValues({}, props), {
-        dangerouslySetInnerHTML: { __html: parsedMarkdown },
-        "data-id": "react-email-markdown",
-        ref,
-        style: markdownContainerStyles
-      })
-    );
-  }
-);
-Markdown.displayName = "Markdown";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Markdown
-});
+//#endregion
+exports.Markdown = Markdown;

dist/index.mjs

@@ -1,58 +0,255 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
+import { Renderer, marked } from "marked";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/styles.ts
+const emptyStyle = {};
+const baseHeaderStyles = {
+	fontWeight: "500",
+	paddingTop: 20
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
+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"
+};
+const styles = {
+	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
+};
 
-// src/markdown.tsx
-import { parseMarkdownToJSX } from "md-to-react-email";
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-var Markdown = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, markdownContainerStyles, markdownCustomStyles } = _b, props = __objRest(_b, ["children", "markdownContainerStyles", "markdownCustomStyles"]);
-    const parsedMarkdown = parseMarkdownToJSX({
-      markdown: children,
-      customStyles: markdownCustomStyles
-    });
-    return /* @__PURE__ */ jsx(
-      "div",
-      __spreadProps(__spreadValues({}, props), {
-        dangerouslySetInnerHTML: { __html: parsedMarkdown },
-        "data-id": "react-email-markdown",
-        ref,
-        style: markdownContainerStyles
-      })
-    );
-  }
-);
+//#endregion
+//#region src/utils/parse-css-in-js-to-inline-css.ts
+function camelToKebabCase(str) {
+	return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function escapeQuotes(value) {
+	if (typeof value === "string" && value.includes("\"")) return value.replace(/"/g, "&#x27;");
+	return value;
+}
+function parseCssInJsToInlineCss(cssProperties) {
+	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",
+		"letterSpacing",
+		"wordSpacing",
+		"maxWidth",
+		"minWidth",
+		"maxHeight",
+		"minHeight",
+		"borderRadius",
+		"borderTopLeftRadius",
+		"borderTopRightRadius",
+		"borderBottomLeftRadius",
+		"borderBottomRightRadius",
+		"textIndent",
+		"gridColumnGap",
+		"gridRowGap",
+		"gridGap",
+		"translateX",
+		"translateY"
+	];
+	return Object.entries(cssProperties).map(([property, value]) => {
+		if (typeof value === "number" && numericalCssProperties.includes(property)) return `${camelToKebabCase(property)}:${value}px`;
+		const escapedValue = escapeQuotes(value);
+		return `${camelToKebabCase(property)}:${escapedValue}`;
+	}).join(";");
+}
+
+//#endregion
+//#region src/markdown.tsx
+const Markdown = React.forwardRef(({ children, markdownContainerStyles, markdownCustomStyles,...props }, ref) => {
+	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)}"` : ""} />`;
+	};
+	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}`]) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles[`h${depth}`])}"` : ""}>${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$1 = parseCssInJsToInlineCss(finalStyles[ordered ? "ol" : "ul"]);
+		return "<" + type + startAt + `${styles$1 !== "" ? ` style="${styles$1}"` : ""}>\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";
+		return `${align ? `<${type} align="${align}"${parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>` : `<${type}${parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>`}${text}</${type}>\n`;
+	};
+	renderer.tablerow = ({ text }) => {
+		return `<tr${parseCssInJsToInlineCss(finalStyles.tr) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.tr)}"` : ""}>\n${text}</tr>\n`;
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		dangerouslySetInnerHTML: { __html: marked.parse(children, {
+			renderer,
+			async: false
+		}) },
+		"data-id": "react-email-markdown",
+		ref,
+		style: markdownContainerStyles
+	});
+});
 Markdown.displayName = "Markdown";
-export {
-  Markdown
-};
+
+//#endregion
+export { Markdown };
+//# sourceMappingURL=index.mjs.map

package.json

 {
   "name": "@react-email/markdown",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Convert Markdown to valid React Email template code.",
@@ -42,3 +42,3 @@ "sideEffects": false,
   "dependencies": {
-    "md-to-react-email": "^5.0.5"
+    "marked": "^15.0.12"
   },
@@ -50,12 +50,12 @@ "peerDependencies": {
     "typescript": "5.8.3",
-    "@react-email/render": "1.1.0",
+    "@react-email/render": "1.4.0",
     "tsconfig": "0.0.0"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build": "tsdown src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsdown src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Improved metrics

Total package byte prevSize

46414

259.63%

Number of package files

10

42.86%

Lines of code

570

256.25%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  marked@^15.0.12

• + Added

  marked@15.0.12
  (transitive)

• - Removed

  md-to-react-email@^5.0.5

• - Removed

  marked@7.0.4
  (transitive)

• - Removed

  md-to-react-email@5.0.6
  (transitive)