From bac09d5c4f1dca3be5262da377f53eff7ae49927 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 13 Nov 2025 14:33:11 -0300 Subject: [PATCH 1/7] fix(preview-server): language types, file name downloaded --- .../src/actions/render-email-by-path.tsx | 6 ++++++ .../src/app/preview/[...slug]/preview.tsx | 6 +++--- .../preview-server/src/components/code-container.tsx | 11 ++++++----- 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/packages/preview-server/src/actions/render-email-by-path.tsx b/packages/preview-server/src/actions/render-email-by-path.tsx index ef2654a8d1..3773864b8b 100644 --- a/packages/preview-server/src/actions/render-email-by-path.tsx +++ b/packages/preview-server/src/actions/render-email-by-path.tsx @@ -27,6 +27,9 @@ export interface RenderedEmailMetadata { markupWithReferences?: string; plainText: string; reactMarkup: string; + + basename: string; + extname: string; } export type EmailRenderingResult = @@ -130,6 +133,9 @@ export const renderEmailByPath = async ( markupWithReferences: markupWithReferences.replaceAll('\0', ''), plainText, reactMarkup, + + basename: path.basename(emailPath, path.extname(emailPath)), + extname: path.extname(emailPath), }; cache.set(emailPath, renderingResult); diff --git a/packages/preview-server/src/app/preview/[...slug]/preview.tsx b/packages/preview-server/src/app/preview/[...slug]/preview.tsx index a3e925e7b3..90135bc80d 100644 --- a/packages/preview-server/src/app/preview/[...slug]/preview.tsx +++ b/packages/preview-server/src/app/preview/[...slug]/preview.tsx @@ -209,15 +209,15 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => { activeLang={activeLang} markups={[ { - language: 'jsx', + language: renderedEmailMetadata.extname, content: renderedEmailMetadata.reactMarkup, }, { - language: 'markup', + language: 'html', content: renderedEmailMetadata.prettyMarkup, }, { - language: 'markdown', + language: 'md', content: renderedEmailMetadata.plainText, }, ]} diff --git a/packages/preview-server/src/components/code-container.tsx b/packages/preview-server/src/components/code-container.tsx index e32b3d8921..946a7478b6 100644 --- a/packages/preview-server/src/components/code-container.tsx +++ b/packages/preview-server/src/components/code-container.tsx @@ -13,6 +13,7 @@ import { Tooltip } from './tooltip'; interface CodeContainerProps { markups: MarkupProps[]; + filename: string; activeLang: string; setActiveLang: (lang: string) => void; } @@ -24,6 +25,7 @@ interface MarkupProps { export const CodeContainer: React.FC> = ({ markups, + filename, activeLang, setActiveLang, }) => { @@ -56,9 +58,8 @@ export const CodeContainer: React.FC> = ({ const isCurrentLang = activeLang === language; return ( { setActiveLang(language); @@ -83,7 +84,7 @@ export const CodeContainer: React.FC> = ({
@@ -141,7 +142,7 @@ const DownloadButton = ({ content, filename }: DownloadButtonProps) => { return URL.createObjectURL(file); }, [content, filename]); const url = React.useSyncExternalStore( - () => () => {}, + () => () => { }, () => generatedUrl, () => undefined, ); From 13051647eb80a5c36c3dc77ff0c684692e715b95 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 13 Nov 2025 14:40:59 -0300 Subject: [PATCH 2/7] make sure to not include prefixing . --- packages/preview-server/src/actions/render-email-by-path.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/preview-server/src/actions/render-email-by-path.tsx b/packages/preview-server/src/actions/render-email-by-path.tsx index 3773864b8b..b93aa01863 100644 --- a/packages/preview-server/src/actions/render-email-by-path.tsx +++ b/packages/preview-server/src/actions/render-email-by-path.tsx @@ -135,7 +135,7 @@ export const renderEmailByPath = async ( reactMarkup, basename: path.basename(emailPath, path.extname(emailPath)), - extname: path.extname(emailPath), + extname: path.extname(emailPath).slice(1), }; cache.set(emailPath, renderingResult); From e7b3f12989df2764f712cb70d614a734e4760edf Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 13 Nov 2025 14:41:12 -0300 Subject: [PATCH 3/7] add missing stuff --- .../preview-server/src/app/preview/[...slug]/preview.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/preview-server/src/app/preview/[...slug]/preview.tsx b/packages/preview-server/src/app/preview/[...slug]/preview.tsx index 90135bc80d..6bc94d3ea7 100644 --- a/packages/preview-server/src/app/preview/[...slug]/preview.tsx +++ b/packages/preview-server/src/app/preview/[...slug]/preview.tsx @@ -36,7 +36,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => { const isDarkModeEnabled = searchParams.get('dark') !== null; const activeView = searchParams.get('view') ?? 'preview'; - const activeLang = searchParams.get('lang') ?? 'jsx'; + const activeLang = searchParams.get('lang') ?? 'tsx'; const handleDarkModeChange = (enabled: boolean) => { const params = new URLSearchParams(searchParams); @@ -207,9 +207,11 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => { { content: renderedEmailMetadata.prettyMarkup, }, { - language: 'md', + language: 'markdown', + extension: 'md', content: renderedEmailMetadata.plainText, }, ]} From 65feb69fd87edd14f5f8a2f147fd4394309fbd3b Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 13 Nov 2025 14:41:25 -0300 Subject: [PATCH 4/7] make sure the names map from lang to tab name --- packages/preview-server/src/utils/language-map.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/preview-server/src/utils/language-map.ts b/packages/preview-server/src/utils/language-map.ts index 018b4e3f19..fbb178d952 100644 --- a/packages/preview-server/src/utils/language-map.ts +++ b/packages/preview-server/src/utils/language-map.ts @@ -1,6 +1,6 @@ const languageMap = { - jsx: 'React', - markup: 'HTML', + tsx: 'React', + html: 'HTML', markdown: 'Plain Text', }; From fee0c52ed6a6cfbb1c8cd78f796f2bd679a14454 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 13 Nov 2025 14:41:34 -0300 Subject: [PATCH 5/7] show extension or fallback to language --- packages/preview-server/src/components/code-container.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/preview-server/src/components/code-container.tsx b/packages/preview-server/src/components/code-container.tsx index 946a7478b6..0f10d9c8d2 100644 --- a/packages/preview-server/src/components/code-container.tsx +++ b/packages/preview-server/src/components/code-container.tsx @@ -13,19 +13,20 @@ import { Tooltip } from './tooltip'; interface CodeContainerProps { markups: MarkupProps[]; - filename: string; + basename: string; activeLang: string; setActiveLang: (lang: string) => void; } interface MarkupProps { language: Language; + extension?: string; content: string; } export const CodeContainer: React.FC> = ({ markups, - filename, + basename: filename, activeLang, setActiveLang, }) => { @@ -84,7 +85,7 @@ export const CodeContainer: React.FC> = ({
From 95bd61bb32b2bb9005f416b80be71adbc7b4a630 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 13 Nov 2025 14:42:39 -0300 Subject: [PATCH 6/7] add changeset --- .changeset/itchy-wasps-read.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/itchy-wasps-read.md diff --git a/.changeset/itchy-wasps-read.md b/.changeset/itchy-wasps-read.md new file mode 100644 index 0000000000..dfcd5b69be --- /dev/null +++ b/.changeset/itchy-wasps-read.md @@ -0,0 +1,5 @@ +--- +"@react-email/preview-server": patch +--- + +fix file names and extensions not being used in download From 78bbe77c430ca8abad1c90dd1abd2b07d004fcf4 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 13 Nov 2025 14:44:54 -0300 Subject: [PATCH 7/7] lint --- packages/preview-server/src/components/code-container.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/preview-server/src/components/code-container.tsx b/packages/preview-server/src/components/code-container.tsx index 0f10d9c8d2..dea4291d55 100644 --- a/packages/preview-server/src/components/code-container.tsx +++ b/packages/preview-server/src/components/code-container.tsx @@ -59,8 +59,9 @@ export const CodeContainer: React.FC> = ({ const isCurrentLang = activeLang === language; return ( { setActiveLang(language); @@ -143,7 +144,7 @@ const DownloadButton = ({ content, filename }: DownloadButtonProps) => { return URL.createObjectURL(file); }, [content, filename]); const url = React.useSyncExternalStore( - () => () => { }, + () => () => {}, () => generatedUrl, () => undefined, );