react-email 6.5.0 → 6.6.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # react-email
 
+## 6.6.1
+
+### Patch Changes
+
+- 21bac49: Fix `Markdown` corrupting double quotes in `markdownCustomStyles`. Inline style values containing a `"` (e.g. `fontFamily: '"Times New Roman", serif'`) were escaped to the apostrophe entity `'` instead of `"`, silently rewriting the quoted value. Double quotes are now escaped as `"`.
+- Updated dependencies [60a5b09]
+  - @react-email/render@2.0.9
+
+## 6.6.0
+
+### Minor Changes
+
+- 16ff94c: add a useTitleTag in Preview component so users can disable it if they want to
+
 ## 6.5.0
 
 ### Minor Changes

package/dist/cli/index.mjs

@@ -6523,7 +6523,7 @@ const getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFil
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "6.5.0",
+	version: "6.6.1",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",
@@ -6562,7 +6562,7 @@ var package_default = {
 	dependencies: {
 		"@babel/parser": "catalog:",
 		"@babel/traverse": "catalog:",
-		"@react-email/render": "workspace:>=2.0.8",
+		"@react-email/render": "workspace:>=2.0.9",
 		"chokidar": "^4.0.3",
 		"commander": "catalog:",
 		"conf": "^15.0.2",

package/dist/index.cjs

@@ -17730,7 +17730,7 @@ 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, "'");
+	if (typeof value === "string" && value.includes("\"")) return value.replace(/"/g, """);
 	return value;
 }
 function parseCssInJsToInlineCss(cssProperties) {
@@ -17879,9 +17879,9 @@ Markdown.displayName = "Markdown";
 //#endregion
 //#region src/components/preview/preview.tsx
 const PREVIEW_MAX_LENGTH = 200;
-const Preview = react.forwardRef(({ children = "", ...props }, ref) => {
+const Preview = react.forwardRef(({ children = "", useTitleTag = true, ...props }, ref) => {
 	const text = (Array.isArray(children) ? children.join("") : children).substring(0, PREVIEW_MAX_LENGTH);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: text }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [useTitleTag ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: text }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		style: {
 			display: "none",
 			overflow: "hidden",

package/dist/index.d.cts

@@ -5058,9 +5058,17 @@ declare const Markdown: React$2.ForwardRefExoticComponent<Readonly<{
 //#endregion
 //#region src/components/preview/preview.d.ts
 type PreviewProps = Readonly<React$2.ComponentPropsWithoutRef<'div'> & {
+  /**
+   * @default true
+   */
+  useTitleTag?: boolean;
   children: string | string[];
 }>;
 declare const Preview: React$2.ForwardRefExoticComponent<Readonly<Omit<React$2.DetailedHTMLProps<React$2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+  /**
+   * @default true
+   */
+  useTitleTag?: boolean;
   children: string | string[];
 }> & React$2.RefAttributes<HTMLDivElement>>;
 declare const renderWhiteSpace: (text: string) => _$react_jsx_runtime0.JSX.Element | null;

package/dist/index.d.mts

@@ -5058,9 +5058,17 @@ declare const Markdown: React$2.ForwardRefExoticComponent<Readonly<{
 //#endregion
 //#region src/components/preview/preview.d.ts
 type PreviewProps = Readonly<React$2.ComponentPropsWithoutRef<'div'> & {
+  /**
+   * @default true
+   */
+  useTitleTag?: boolean;
   children: string | string[];
 }>;
 declare const Preview: React$2.ForwardRefExoticComponent<Readonly<Omit<React$2.DetailedHTMLProps<React$2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+  /**
+   * @default true
+   */
+  useTitleTag?: boolean;
   children: string | string[];
 }> & React$2.RefAttributes<HTMLDivElement>>;
 declare const renderWhiteSpace: (text: string) => _$react_jsx_runtime0.JSX.Element | null;

package/dist/index.mjs

@@ -17709,7 +17709,7 @@ 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, "'");
+	if (typeof value === "string" && value.includes("\"")) return value.replace(/"/g, """);
 	return value;
 }
 function parseCssInJsToInlineCss(cssProperties) {
@@ -17858,9 +17858,9 @@ Markdown.displayName = "Markdown";
 //#endregion
 //#region src/components/preview/preview.tsx
 const PREVIEW_MAX_LENGTH = 200;
-const Preview = React$1.forwardRef(({ children = "", ...props }, ref) => {
+const Preview = React$1.forwardRef(({ children = "", useTitleTag = true, ...props }, ref) => {
 	const text = (Array.isArray(children) ? children.join("") : children).substring(0, PREVIEW_MAX_LENGTH);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("title", { children: text }), /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [useTitleTag ? /* @__PURE__ */ jsx("title", { children: text }) : null, /* @__PURE__ */ jsxs("div", {
 		style: {
 			display: "none",
 			overflow: "hidden",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "6.5.0",
+  "version": "6.6.1",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.mjs"
@@ -37,7 +37,7 @@
   "dependencies": {
     "@babel/parser": "7.27.0",
     "@babel/traverse": "7.27.0",
-    "@react-email/render": ">=2.0.8",
+    "@react-email/render": ">=2.0.9",
     "chokidar": "^4.0.3",
     "commander": "^13.0.0",
     "conf": "^15.0.2",
@@ -74,7 +74,7 @@
     "tsx": "4.21.0",
     "typescript": "5.9.3",
     "yalc": "1.0.0-pre.53",
-    "@react-email/render": "2.0.8"
+    "@react-email/render": "2.0.9"
   },
   "scripts": {
     "build": "tsdown",

package/src/components/markdown/markdown.spec.tsx

@@ -116,7 +116,7 @@ console.log(\`Hello, $\{name}!\`);
       </Markdown>,
     );
     expect(actualOutput).toMatchInlineSnapshot(`
-      "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><p><strong style="font:700 23px / 32px &#x27;Roobert PRO&#x27;, system-ui, sans-serif;background:url(&#x27;path/to/image&#x27;)">This is sample bold text in markdown</strong> and <em style="font-style:italic">this is italic text</em></p>
+      "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><p><strong style="font:700 23px / 32px &quot;Roobert PRO&quot;, system-ui, sans-serif;background:url(&quot;path/to/image&quot;)">This is sample bold text in markdown</strong> and <em style="font-style:italic">this is italic text</em></p>
       </div><!--/$-->"
     `);
   });

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

@@ -4,7 +4,7 @@ function camelToKebabCase(str: string): string {
 
 function escapeQuotes(value: unknown) {
   if (typeof value === 'string' && value.includes('"')) {
-    return value.replace(/"/g, ''');
+    return value.replace(/"/g, '"');
   }
   return value;
 }

package/src/components/preview/preview.tsx

@@ -2,6 +2,10 @@ import * as React from 'react';
 
 export type PreviewProps = Readonly<
   React.ComponentPropsWithoutRef<'div'> & {
+    /**
+     * @default true
+     */
+    useTitleTag?: boolean;
     children: string | string[];
   }
 >;
@@ -9,14 +13,14 @@ export type PreviewProps = Readonly<
 const PREVIEW_MAX_LENGTH = 200;
 
 export const Preview = React.forwardRef<HTMLDivElement, PreviewProps>(
-  ({ children = '', ...props }, ref) => {
+  ({ children = '', useTitleTag = true, ...props }, ref) => {
     const text = (
       Array.isArray(children) ? children.join('') : children
     ).substring(0, PREVIEW_MAX_LENGTH);
 
     return (
       <>
-        <title>{text}</title>
+        {useTitleTag ? <title>{text}</title> : null}
         <div
           style={{
             display: 'none',