'use client'; import { StarterKit } from '@react-email/editor/extensions'; import { EditorProvider, useCurrentEditor } from '@tiptap/react'; import { Columns2, Columns3, Columns4 } from 'lucide-react'; import { ExampleShell } from '../example-shell'; const extensions = [StarterKit]; const content = { type: 'doc', content: [ { type: 'paragraph', content: [ { type: 'text', text: 'Use the toolbar above to insert column layouts.', }, ], }, ], }; function ToolbarButton({ label, icon, onClick, }: { label: string; icon?: React.ReactNode; onClick: () => void; }) { return ( ); } function makeColumns(count: number) { const labels = ['First', 'Second', 'Third', 'Fourth']; const types: Record = { 2: 'twoColumns', 3: 'threeColumns', 4: 'fourColumns', }; return { type: types[count], content: Array.from({ length: count }, (_, i) => ({ type: 'columnsColumn', content: [ { type: 'paragraph', content: [{ type: 'text', text: `${labels[i]} column` }], }, ], })), }; } function Toolbar() { const { editor } = useCurrentEditor(); if (!editor) return null; return (

} onClick={() => editor.chain().focus().insertContent(makeColumns(2)).run() } /> } onClick={() => editor.chain().focus().insertContent(makeColumns(3)).run() } /> } onClick={() => editor.chain().focus().insertContent(makeColumns(4)).run() } />

); } export function ColumnLayouts() { return ( } /> ); }

Column layouts