@depup/react-email 5.2.10-depup.0 → 6.9.0-depup.1

package/src/components/markdown/markdown.tsx

@@ -0,0 +1,239 @@
+import { marked, Renderer } from 'marked';
+import * as React from 'react';
+import { type StylesType, styles } from './styles.js';
+import { parseCssInJsToInlineCss } from './utils/parse-css-in-js-to-inline-css.js';
+
+export type MarkdownProps = Readonly<{
+  children: string;
+  markdownCustomStyles?: StylesType;
+  markdownContainerStyles?: React.CSSProperties;
+}>;
+
+export const Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>(
+  (
+    { 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)}"`
+          : ''
+      } />`;
+    };
+
+    // 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.replaceAll('"', '&quot;')}"` : ''
+      }${
+        parseCssInJsToInlineCss(finalStyles.image) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.image)}"`
+          : ''
+      }>`;
+    };
+
+    renderer.link = ({ href, title, tokens }) => {
+      const text = renderer.parser.parseInline(tokens);
+
+      return `<a href="${href.replaceAll('"', '&quot;')}" target="_blank"${
+        title ? ` title="${title.replaceAll('"', '&quot;')}"` : ''
+      }${
+        parseCssInJsToInlineCss(finalStyles.link) !== ''
+          ? ` style="${parseCssInJsToInlineCss(finalStyles.link)}"`
+          : ''
+      }>${text}</a>`;
+    };
+
+    renderer.listitem = ({ tokens, loose }) => {
+      const hasNestedList = tokens.some((token) => token.type === 'list');
+      const text =
+        loose || hasNestedList
+          ? renderer.parser.parse(tokens)
+          : 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 role="presentation"${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: marked.parse(children, {
+            renderer,
+            async: false,
+          }),
+        }}
+        data-id="react-email-markdown"
+        ref={ref}
+        style={markdownContainerStyles}
+      />
+    );
+  },
+);
+
+Markdown.displayName = 'Markdown';

package/src/components/markdown/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,
+};

package/src/components/markdown/utils/parse-css-in-js-to-inline-css.spec.ts

@@ -0,0 +1,42 @@
+import { parseCssInJsToInlineCss } from './parse-css-in-js-to-inline-css.js';
+
+describe('parseCssInJsToInlineCss', () => {
+  it('returns an empty string for undefined styles', () => {
+    expect(parseCssInJsToInlineCss(undefined)).toBe('');
+  });
+
+  it('converts camelCase properties to kebab-case', () => {
+    expect(parseCssInJsToInlineCss({ fontFamily: 'serif' })).toBe(
+      'font-family:serif',
+    );
+  });
+
+  it('appends px to numeric values of numerical properties', () => {
+    expect(parseCssInJsToInlineCss({ fontSize: 16 })).toBe('font-size:16px');
+  });
+
+  it('joins multiple declarations with a semicolon', () => {
+    expect(parseCssInJsToInlineCss({ color: 'red', fontSize: 16 })).toBe(
+      'color:red;font-size:16px',
+    );
+  });
+
+  it('escapes double quotes so they do not break the style attribute', () => {
+    const result = parseCssInJsToInlineCss({
+      fontFamily: '"Times New Roman", serif',
+    });
+
+    expect(result).toBe('font-family:"Times New Roman", serif');
+    expect(result).not.toContain('"');
+  });
+
+  it('does not corrupt double-quoted values into apostrophes', () => {
+    const result = parseCssInJsToInlineCss({
+      fontFamily: '"Times New Roman", serif',
+    });
+
+    // `'` is the apostrophe entity and would silently change the
+    // quoted font name; a double quote must be escaped as `"`.
+    expect(result).not.toContain(''');
+  });
+});

package/src/components/markdown/utils/parse-css-in-js-to-inline-css.ts

@@ -0,0 +1,73 @@
+function camelToKebabCase(str: string): string {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+function escapeQuotes(value: unknown) {
+  if (typeof value === 'string' && value.includes('"')) {
+    return value.replace(/"/g, '"');
+  }
+  return value;
+}
+
+export function parseCssInJsToInlineCss(
+  cssProperties: React.CSSProperties | undefined,
+): 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',
+    '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(';');
+}

package/src/components/preview/index.ts

@@ -0,0 +1 @@
+export * from './preview.js';

package/src/components/preview/preview.spec.tsx

@@ -0,0 +1,49 @@
+import { render } from '@react-email/render';
+import { Preview, renderWhiteSpace } from './index.js';
+
+describe('<Preview> component', () => {
+  it('renders correctly', async () => {
+    const actualOutput = await render(<Preview>Email preview text</Preview>);
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><title>Email preview text</title><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Email preview text<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><!--/$-->"`,
+    );
+  });
+
+  it('renders correctly with array text', async () => {
+    const actualOutputArray = await render(
+      <Preview>Email preview text</Preview>,
+    );
+    expect(actualOutputArray).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><title>Email preview text</title><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Email preview text<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><!--/$-->"`,
+    );
+  });
+
+  it('renders correctly with really long text', async () => {
+    const longText = 'really long'.repeat(100);
+    const actualOutputLong = await render(<Preview>{longText}</Preview>);
+    expect(actualOutputLong).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><title>really longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longre</title><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">really longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longre</div><!--/$-->"`,
+    );
+  });
+});
+
+describe('renderWhiteSpace', () => {
+  it('renders null when text length is greater than or equal to PREVIEW_MAX_LENGTH (200)', () => {
+    const text =
+      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolore mollitia dignissimos itaque. At excepturi reiciendis iure molestias incidunt. Ab saepe, nostrum dicta dolor maiores tenetur eveniet odio amet ipsum? Lorem ipsum extra.';
+    const html = renderWhiteSpace(text);
+    expect(html).toBeNull();
+  });
+
+  it('renders white space characters when text length is less than PREVIEW_MAX_LENGTH', () => {
+    const text = 'Short text';
+    const whiteSpaceCharacters = '\xa0\u200C\u200B\u200D\u200E\u200F\uFEFF';
+
+    const html = renderWhiteSpace(text);
+    expect(html).not.toBeNull();
+
+    const actualTextContent = html?.props.children;
+    const expectedTextContent = whiteSpaceCharacters.repeat(200 - text.length);
+    expect(actualTextContent).toBe(expectedTextContent);
+  });
+});

package/src/components/preview/preview.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
+
+export type PreviewProps = Readonly<
+  React.ComponentPropsWithoutRef<'div'> & {
+    /**
+     * @default true
+     */
+    useTitleTag?: boolean;
+    children: string | string[];
+  }
+>;
+
+const PREVIEW_MAX_LENGTH = 200;
+
+export const Preview = React.forwardRef<HTMLDivElement, PreviewProps>(
+  ({ children = '', useTitleTag = true, ...props }, ref) => {
+    const text = (
+      Array.isArray(children) ? children.join('') : children
+    ).substring(0, PREVIEW_MAX_LENGTH);
+
+    return (
+      <>
+        {useTitleTag ? <title>{text}</title> : null}
+        <div
+          style={{
+            display: 'none',
+            overflow: 'hidden',
+            lineHeight: '1px',
+            opacity: 0,
+            maxHeight: 0,
+            maxWidth: 0,
+          }}
+          data-skip-in-text={true}
+          {...props}
+          ref={ref}
+        >
+          {text}
+          {renderWhiteSpace(text)}
+        </div>
+      </>
+    );
+  },
+);
+
+Preview.displayName = 'Preview';
+markAsElement(Preview);
+
+const whiteSpaceCodes = '\xa0\u200C\u200B\u200D\u200E\u200F\uFEFF';
+export const renderWhiteSpace = (text: string) => {
+  if (text.length >= PREVIEW_MAX_LENGTH) {
+    return null;
+  }
+
+  return <div>{whiteSpaceCodes.repeat(PREVIEW_MAX_LENGTH - text.length)}</div>;
+};

package/src/components/row/index.ts

@@ -0,0 +1 @@
+export * from './row.js';

package/src/components/row/row.spec.tsx

@@ -0,0 +1,28 @@
+import { render } from '@react-email/render';
+import { Row } from './index.js';
+
+describe('<Row> component', () => {
+  it('renders children correctly', async () => {
+    const testMessage = 'Test message';
+    const html = await render(<Row>{testMessage}</Row>);
+    expect(html).toContain(testMessage);
+  });
+
+  it('passes style and other props correctly', async () => {
+    const style = { backgroundColor: 'red' };
+    const html = await render(
+      <Row data-testid="row-test" style={style}>
+        Test
+      </Row>,
+    );
+    expect(html).toContain('style="background-color:red"');
+    expect(html).toContain('data-testid="row-test"');
+  });
+
+  it('renders correctly', async () => {
+    const actualOutput = await render(<Row children={undefined} />);
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"></tr></tbody></table><!--/$-->"`,
+    );
+  });
+});

package/src/components/row/row.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
+
+export type RowProps = Readonly<
+  React.ComponentPropsWithoutRef<'table'> & {
+    children: React.ReactNode;
+  }
+>;
+
+export const Row = React.forwardRef<HTMLTableElement, RowProps>(
+  ({ children, style, ...props }, ref) => {
+    return (
+      <table
+        align="center"
+        width="100%"
+        border={0}
+        cellPadding="0"
+        cellSpacing="0"
+        role="presentation"
+        {...props}
+        ref={ref}
+        style={style}
+      >
+        <tbody style={{ width: '100%' }}>
+          <tr style={{ width: '100%' }}>{children}</tr>
+        </tbody>
+      </table>
+    );
+  },
+);
+
+Row.displayName = 'Row';
+markAsElement(Row);

package/src/components/section/index.ts

@@ -0,0 +1 @@
+export * from './section.js';