import React from 'react' // I'll import everything I used in the last example import { Body, Button, Container, Head, Heading, Html, Link, Preview, Section, Text, // Plus the image Img, // And tailwind components Tailwind } from '@react-email/components' // We'll need a way to convert our RichText to plaintext for the preview import { convertLexicalToPlaintext } from '@payloadcms/richtext-lexical/plaintext' // And then I can bring in my Rich Text serializer component from Payload's Lexical React package import {RichText} from '@payloadcms/richtext-lexical/react' // I know I'll need the TypedEditorState type from Payload import type { TypedEditorState } from '@payloadcms/richtext-lexical' import type { Media } from '@/payload-types' type NewPostAlertArgs = { summary?: TypedEditorState | null title?: string | null slug: string date?: Date | string | null image?: Media | null } // I'll define my preview props here so we can see styles added as we style NewPostAlert.PreviewProps = { title: 'Getting Started with React Email', slug: 'getting-started-react-email', date: new Date(), image: { url: 'https://picsum.photos/640/360', alt: 'Tutorial preview', width: 640, height: 360, }, // I'll then copy and paste in sample Lexical text, which I just got from the API screen in a test project summary: { root: { children: [ { children: [ { detail: 0, format: 0, mode: 'normal', style: '', text: 'This is a ', type: 'text', version: 1, }, { detail: 0, format: 2, mode: 'normal', style: '', text: 'test', type: 'text', version: 1, }, { detail: 0, format: 0, mode: 'normal', style: '', text: ' ', type: 'text', version: 1, }, { detail: 0, format: 8, mode: 'normal', style: '', text: 'post', type: 'text', version: 1, }, { detail: 0, format: 0, mode: 'normal', style: '', text: ' with ', type: 'text', version: 1, }, { detail: 0, format: 1, mode: 'normal', style: '', text: 'rich', type: 'text', version: 1, }, { detail: 0, format: 0, mode: 'normal', style: '', text: ' text. Learn how to create beautiful, responsive email templates using React Email and modern web development practices.', type: 'text', version: 1, }, ], direction: null, format: '', indent: 0, type: 'paragraph', version: 1, textFormat: 0, textStyle: '', }, ], direction: null, format: '', indent: 0, type: 'root', version: 1, }, }, // Then we need to cast this as an unknown type to then cast it properly as my NewPostAlertArgs } as unknown as NewPostAlertArgs // I'll export my default function and call it NewPostAlert export default function NewPostAlert({ summary, image, title, slug, date }: NewPostAlertArgs) { return ( {summary && {convertLexicalToPlaintext({ data: summary })}} {/* Now I can use the Tailwind component to wrap all the components I want to style */}

{title} now available!

{image && (

)}

Here's a sneak peek: {date && ( {new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric', })} )} {summary && ( )}

You're receiving this because you subscribed to updates.

) }

Tags