'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 && (

      )}
    </div>
  );
}

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

  if (!editor) return null;

  return (
    <ExampleShell
      title="Full email builder"
      description="All components combined: bubble menus, slash commands, theming, inspector sidebar, and export."
    >
      <div className="flex gap-2 mb-4">
        <button
          type="button"
          onClick={() => setTheme('basic')}
          className={`px-3 py-1.5 border border-(--re-border) rounded-lg cursor-pointer text-[0.8125rem] ${
            theme === 'basic'
              ? 'bg-(--re-text) text-(--re-bg) font-medium'
              : 'bg-(--re-bg) text-(--re-text) hover:bg-(--re-hover)'
          }`}
        >
          Basic Theme
        </button>
        <button
          type="button"
          onClick={() => setTheme('minimal')}
          className={`px-3 py-1.5 border border-(--re-border) rounded-lg cursor-pointer text-[0.8125rem] ${
            theme === 'minimal'
              ? 'bg-(--re-text) text-(--re-bg) font-medium'
              : 'bg-(--re-bg) text-(--re-text) hover:bg-(--re-hover)'
          }`}
        >
          Minimal Theme
        </button>
      </div>
      <EditorContext.Provider value={{ editor }}>
        <div
          className="flex overflow-hidden -mx-4 -mb-4 border-t border-(--re-border)"
          style={{ height: '32rem' }}
        >
          <div className="flex-1 min-w-0 p-4 overflow-y-auto">
            <EditorContent editor={editor} />
            <BubbleMenu
              hideWhenActiveNodes={['button']}
              hideWhenActiveMarks={['link']}
            />
            <BubbleMenu.LinkDefault />
            <BubbleMenu.ButtonDefault />
            <SlashCommand items={defaultSlashCommands} />
            <ExportPanel />
          </div>
          <Sidebar />
        </div>
      </EditorContext.Provider>
    </ExampleShell>
  );
}
</article></body></html>