From 9ff98f375eff3390dd5a863442581771494a9231 Mon Sep 17 00:00:00 2001 From: lordelogos Date: Wed, 13 Mar 2024 11:15:33 +0100 Subject: [PATCH 1/3] fix: add logic to handle quotes in custom styles --- __tests__/emailMarkdown.test.tsx | 14 ++++++++++++-- __tests__/parseCssInJsToInlineCss.test.ts | 11 +++++++++++ src/utils.ts | 10 +++++++++- 3 files changed, 32 insertions(+), 3 deletions(-) diff --git a/__tests__/emailMarkdown.test.tsx b/__tests__/emailMarkdown.test.tsx index a905fc1..b4d99c9 100644 --- a/__tests__/emailMarkdown.test.tsx +++ b/__tests__/emailMarkdown.test.tsx @@ -4,9 +4,19 @@ import { EmailMarkdown } from "../src"; describe("ReactEmailMarkdown component renders correctly", () => { it("renders the markdown in the correct format for browsers", () => { - const actualOutput = render(); + const actualOutput = render( + + ); + expect(actualOutput).toMatchInlineSnapshot( - `"

Hello, World!

"` + `"

Hello, World!

Hi, World

"` ); }); }); diff --git a/__tests__/parseCssInJsToInlineCss.test.ts b/__tests__/parseCssInJsToInlineCss.test.ts index ce8447e..8817a50 100644 --- a/__tests__/parseCssInJsToInlineCss.test.ts +++ b/__tests__/parseCssInJsToInlineCss.test.ts @@ -33,4 +33,15 @@ describe("parseCssInJsToInlineCss", () => { const cssProperties = {}; expect(parseCssInJsToInlineCss(cssProperties)).toBe(""); }); + + test("should handle CSS properties with escaped quotes", () => { + const cssProperties = { + font: '700 23px / 32px "Roobert PRO", system-ui, sans-serif', + background: "url('path/to/image')", + }; + + const expectedOutput = + "font:700 23px / 32px 'Roobert PRO', system-ui, sans-serif;background:url('path/to/image')"; + expect(parseCssInJsToInlineCss(cssProperties)).toBe(expectedOutput); + }); }); diff --git a/src/utils.ts b/src/utils.ts index 8bb5383..c832be5 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -3,6 +3,13 @@ import { StylesType, initRendererProps } from "./types"; import { RendererObject } from "marked"; import { styles } from "./styles"; +function escapeQuotes(value: string) { + if (value.includes('"')) { + return value.replace(/"/g, "'"); + } + return value; +} + export function camelToKebabCase(str: string): string { return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(); } @@ -64,7 +71,8 @@ export function parseCssInJsToInlineCss( ) { return `${camelToKebabCase(property)}:${value}px`; } else { - return `${camelToKebabCase(property)}:${value}`; + const escapedValue = escapeQuotes(value); + return `${camelToKebabCase(property)}:${escapedValue}`; } }) .join(";"); From 092dd65de792b17d94ab09c9d3700e0bc4618092 Mon Sep 17 00:00:00 2001 From: lordelogos Date: Wed, 13 Mar 2024 11:21:22 +0100 Subject: [PATCH 2/3] wip: add changeset --- .changeset/good-apes-confess.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/good-apes-confess.md diff --git a/.changeset/good-apes-confess.md b/.changeset/good-apes-confess.md new file mode 100644 index 0000000..162b806 --- /dev/null +++ b/.changeset/good-apes-confess.md @@ -0,0 +1,7 @@ +--- +"md-to-react-email": patch +--- + +## Fixes + +- Markdown custom styles can't handle qoutes properly From 06bebbbe59840d5f3d5c539a444a254081a73f7a Mon Sep 17 00:00:00 2001 From: lordelogos Date: Wed, 13 Mar 2024 11:23:36 +0100 Subject: [PATCH 3/3] fix(changeset): fix typo --- .changeset/good-apes-confess.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/good-apes-confess.md b/.changeset/good-apes-confess.md index 162b806..78855cd 100644 --- a/.changeset/good-apes-confess.md +++ b/.changeset/good-apes-confess.md @@ -4,4 +4,4 @@ ## Fixes -- Markdown custom styles can't handle qoutes properly +- Markdown custom styles can't handle quotes properly