'use client'; import { composeReactEmail } from '@react-email/editor/core'; import { StarterKit } from '@react-email/editor/extensions'; import { EmailTheming } from '@react-email/editor/plugins'; import { BubbleMenu, defaultSlashCommands, Inspector, SlashCommand, } from '@react-email/editor/ui'; import { EditorContent, EditorContext, useCurrentEditor, useEditor, } from '@tiptap/react'; import { useState } from 'react'; import { ExampleShell } from '../example-shell'; type EditorTheme = 'basic' | 'minimal'; const content = `

Weekly Newsletter

This is a full-featured email editor combining all available components. Try selecting text, inserting columns, adding buttons, and switching themes.

Featured Article

Check out our latest post on React Email for building better email templates.

Read More `; function Sidebar() { return (

{(segments) => segments.map((segment, i) => { const label = segment.node?.nodeType ?? 'Layout'; if (i === segments.length - 1) { return (

{i !== 0 && ( / )} {label}

); } return (

{i !== 0 && ( / )}

); }) }

); } function ExportPanel() { const { editor } = useCurrentEditor(); const [html, setHtml] = useState(''); const [exporting, setExporting] = useState(false); const handleExport = async () => { if (!editor) return; setExporting(true); try { const result = await composeReactEmail({ editor }); setHtml(result.html); } finally { setExporting(false); } }; return (

{html && (

          {html}

)}

); } export function FullEmailBuilder() { const [theme, setTheme] = useState('basic'); const extensions = [StarterKit, EmailTheming.configure({ theme })]; const editor = useEditor( { extensions, content, immediatelyRender: false, }, [theme], ); if (!editor) return null; return (

); }

Full email builder