diff --git a/packages/markdown/package.json b/packages/markdown/package.json index ca80a70d46..c2fb37e8f4 100644 --- a/packages/markdown/package.json +++ b/packages/markdown/package.json @@ -57,6 +57,6 @@ "typescript": "5.1.6" }, "dependencies": { - "md-to-react-email": "4.1.0" + "md-to-react-email": "5.0.0" } } diff --git a/packages/markdown/src/__snapshots__/markdown.spec.tsx.snap b/packages/markdown/src/__snapshots__/markdown.spec.tsx.snap new file mode 100644 index 0000000000..48761acd7e --- /dev/null +++ b/packages/markdown/src/__snapshots__/markdown.spec.tsx.snap @@ -0,0 +1,50 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[` component renders correctly > renders links in the correct format for browsers 1`] = ` +"

Link to React-email

+
" +`; + +exports[` component renders correctly > renders lists in the correct format for browsers 1`] = ` +"

Below is a list

    +
  • Item One
    • +
  • Item Two
    • +
  • Item Three
    • +
+
" +`; + +exports[` component renders correctly > renders text in the correct format for browsers 1`] = ` +"

This is sample bold text in markdown and this is italic text

+
" +`; + +exports[` component renders correctly > renders the headers in the correct format for browsers 1`] = `"

Heading 1!

Heading 2!

Heading 3!

Heading 4!

Heading 5!
Heading 6!
"`; + +exports[` component renders correctly > renders the markdown in the correct format for browsers 1`] = ` +"

Markdown Test Document

This is a test document to check the capabilities of a Markdown parser.

+

Headings

Third-Level Heading

Fourth-Level Heading

Fifth-Level Heading
Sixth-Level Heading

Text Formatting

This is some bold text and this is some italic text. You can also use strikethrough and inline code.

+

Lists

    +
  1. Ordered List Item 1
    2. +
  2. Ordered List Item 2
    3. +
  3. Ordered List Item 3
    4. +
+
    +
  • Unordered List Item 1
    • +
  • Unordered List Item 2
    • +
  • Unordered List Item 3
    • +
+

Links

Markdown Guide

+

Images

\\"Markdown

+

Blockquotes

+

This is a blockquote.

+
    +
  • Author
    • +
+
+

Code Blocks

function greet(name) {
+console.log(\`Hello, \${name}!\`);
+}
+
+
" +`; diff --git a/packages/markdown/src/markdown.spec.tsx b/packages/markdown/src/markdown.spec.tsx index 9890ffa1f3..2373e9d082 100644 --- a/packages/markdown/src/markdown.spec.tsx +++ b/packages/markdown/src/markdown.spec.tsx @@ -4,7 +4,7 @@ import { Markdown } from "./markdown"; describe(" component renders correctly", () => { it("renders the markdown in the correct format for browsers", () => { const actualOutput = render( - + {`# Markdown Test Document This is a **test document** to check the capabilities of a Markdown parser. @@ -55,38 +55,12 @@ console.log(\`Hello, $\{name}!\`); \`\`\``} , ); - expect(actualOutput).toMatchInlineSnapshot(` -"

Markdown Test Document

This is a test document to check the capabilities of a Markdown parser.

-

Headings

Third-Level Heading

Fourth-Level Heading

Fifth-Level Heading
Sixth-Level Heading

Text Formatting

This is some bold text and this is some italic text. You can also use strikethrough and inline code.

-

Lists

    -
  1. Ordered List Item 1
    2. -
  2. Ordered List Item 2
    3. -
  3. Ordered List Item 3
    4. -
-
    -
  • Unordered List Item 1
    • -
  • Unordered List Item 2
    • -
  • Unordered List Item 3
    • -
-

Links

Markdown Guide

-

Images

\\"Markdown

-

Blockquotes

-

This is a blockquote.

-
    -
  • Author
    • -
-
-

Code Blocks

function greet(name) {
-console.log(\`Hello, \${name}!\`);
-}
-
-
" -`); + expect(actualOutput).toMatchSnapshot(); }); it("renders the headers in the correct format for browsers", () => { const actualOutput = render( - + {` # Heading 1! ## Heading 2! @@ -97,38 +71,28 @@ console.log(\`Hello, \${name}!\`); `} , ); - expect(actualOutput).toMatchInlineSnapshot( - `"

Heading 1!

Heading 2!

Heading 3!

Heading 4!

Heading 5!
Heading 6!
"`, - ); + expect(actualOutput).toMatchSnapshot(); }); it("renders text in the correct format for browsers", () => { const actualOutput = render( - + **This is sample bold text in markdown** and *this is italic text* , ); - expect(actualOutput).toMatchInlineSnapshot(` -"

This is sample bold text in markdown and this is italic text

-
" -`); + expect(actualOutput).toMatchSnapshot(); }); it("renders links in the correct format for browsers", () => { const actualOutput = render( - - Link to [React-email](https://react.email) - , + Link to [React-email](https://react.email), ); - expect(actualOutput).toMatchInlineSnapshot(` -"

Link to React-email

-
" -`); + expect(actualOutput).toMatchSnapshot(); }); it("renders lists in the correct format for browsers", () => { const actualOutput = render( - + {` # Below is a list @@ -138,13 +102,6 @@ console.log(\`Hello, \${name}!\`); `} , ); - expect(actualOutput).toMatchInlineSnapshot(` -"

Below is a list

    -
  • Item One
    • -
  • Item Two
    • -
  • Item Three
    • -
-
" -`); + expect(actualOutput).toMatchSnapshot(); }); }); diff --git a/packages/markdown/src/markdown.tsx b/packages/markdown/src/markdown.tsx index e6b7145de1..b01228de08 100644 --- a/packages/markdown/src/markdown.tsx +++ b/packages/markdown/src/markdown.tsx @@ -1,25 +1,22 @@ import type { StylesType } from "md-to-react-email"; -import { parseMarkdownToReactEmailJSX } from "md-to-react-email"; +import { parseMarkdownToJSX } from "md-to-react-email"; import * as React from "react"; export interface MarkdownProps { children: string; markdownCustomStyles?: StylesType; markdownContainerStyles?: React.CSSProperties; - showDataId?: boolean; } export const Markdown: React.FC = ({ children, markdownContainerStyles, markdownCustomStyles, - showDataId = false, ...props }) => { - const parsedMarkdown = parseMarkdownToReactEmailJSX({ + const parsedMarkdown = parseMarkdownToJSX({ markdown: children, customStyles: markdownCustomStyles, - withDataAttr: showDataId, }); return ( diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f1fdfe9bcc..1405b9fadf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -565,8 +565,8 @@ importers: packages/markdown: dependencies: md-to-react-email: - specifier: 4.1.0 - version: 4.1.0(react-email@packages+react-email)(react@18.2.0) + specifier: 5.0.0 + version: 5.0.0(react@18.2.0) react: specifier: 18.2.0 version: 18.2.0 @@ -7097,17 +7097,16 @@ packages: /marked@7.0.4: resolution: {integrity: sha512-t8eP0dXRJMtMvBojtkcsA7n48BkauktUKzfkPSCq85ZMTJ0v76Rke4DYz01omYpPTUh4p/f7HePgRo3ebG8+QQ==} engines: {node: '>= 16'} + hasBin: true dev: false - /md-to-react-email@4.1.0(react-email@packages+react-email)(react@18.2.0): - resolution: {integrity: sha512-aQvj4dCuy0wmBVvSB377qTErlpjN5Pl61+5v+B8Z76KoxOgKhbzvK3qnO94eOsuGSWwI+9n4zb3xD3/MypxM4w==} + /md-to-react-email@5.0.0(react@18.2.0): + resolution: {integrity: sha512-GdBrBUbAAJHypnuyofYGfVos8oUslxHx69hs3CW9P0L8mS1sT6GnJuMBTlz/Fw+2widiwdavcu9UwyLF/BzZ4w==} peerDependencies: react: 18.x - react-email: '>1.9.3' dependencies: marked: 7.0.4 react: 18.2.0 - react-email: link:packages/react-email dev: false /md5.js@1.3.5: