diff --git a/.gitignore b/.gitignore index 1807daab30..966ddd71e8 100644 --- a/.gitignore +++ b/.gitignore @@ -36,6 +36,6 @@ yarn-error.log* .env.test.local .env.production.local -# turbo .turbo +.worktrees .serena/ diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md new file mode 100644 index 0000000000..bdadb633d7 --- /dev/null +++ b/packages/editor/CHANGELOG.md @@ -0,0 +1,2 @@ +# @react-email/editor + diff --git a/packages/editor/examples/index.html b/packages/editor/examples/index.html new file mode 100644 index 0000000000..5903004c46 --- /dev/null +++ b/packages/editor/examples/index.html @@ -0,0 +1,12 @@ + + + + + + @react-email/editor examples + + +
+ + + diff --git a/packages/editor/examples/package.json b/packages/editor/examples/package.json new file mode 100644 index 0000000000..fc7a1c4368 --- /dev/null +++ b/packages/editor/examples/package.json @@ -0,0 +1,33 @@ +{ + "name": "editor-examples", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build" + }, + "dependencies": { + "@radix-ui/react-popover": "catalog:", + "@react-email/components": "workspace:*", + "@react-email/editor": "workspace:*", + "@tiptap/extension-heading": "^3.17.1", + "@tiptap/extension-link": "^3.17.1", + "@tiptap/extension-underline": "^3.17.1", + "@tiptap/react": "^3.17.1", + "@tiptap/starter-kit": "^3.17.1", + "lucide-react": "^0.470.0", + "react": "catalog:", + "react-dom": "catalog:" + }, + "devDependencies": { + "@tailwindcss/vite": "4.1.18", + "@types/react": "catalog:", + "@types/react-dom": "catalog:", + "@vitejs/plugin-react": "catalog:", + "tailwindcss": "catalog:", + "tsconfig": "workspace:*", + "typescript": "5.8.3", + "vite": "catalog:" + } +} diff --git a/packages/editor/examples/src/app.tsx b/packages/editor/examples/src/app.tsx new file mode 100644 index 0000000000..2c163adfbe --- /dev/null +++ b/packages/editor/examples/src/app.tsx @@ -0,0 +1,21 @@ +import { sections } from './examples'; +import { Sidebar } from './sidebar'; +import { useHashRoute } from './use-hash-route'; + +const allExamples = sections.flatMap((s) => s.examples); + +export function App() { + const [activeId, setActiveId] = useHashRoute(allExamples[0].id); + const ActiveExample = + allExamples.find((e) => e.id === activeId)?.component ?? + allExamples[0].component; + + return ( +
+ +
+ +
+
+ ); +} diff --git a/packages/editor/examples/src/example-shell.tsx b/packages/editor/examples/src/example-shell.tsx new file mode 100644 index 0000000000..45a153720d --- /dev/null +++ b/packages/editor/examples/src/example-shell.tsx @@ -0,0 +1,21 @@ +interface ExampleShellProps { + title: string; + description: string; + children: React.ReactNode; +} + +export function ExampleShell({ + title, + description, + children, +}: ExampleShellProps) { + return ( + <> +

{title}

+

{description}

+
+ {children} +
+ + ); +} diff --git a/packages/editor/examples/src/examples/basic-editor.tsx b/packages/editor/examples/src/examples/basic-editor.tsx new file mode 100644 index 0000000000..2a660cd8ca --- /dev/null +++ b/packages/editor/examples/src/examples/basic-editor.tsx @@ -0,0 +1,40 @@ +import { StarterKit } from '@react-email/editor/extensions'; +import { EditorProvider } from '@tiptap/react'; +import { ExampleShell } from '../example-shell'; + +const extensions = [StarterKit]; + +const content = { + type: 'doc', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: 'This is the simplest editor setup — just StarterKit with no UI overlays. Start typing or edit this text.', + }, + ], + }, + { + type: 'paragraph', + content: [ + { + type: 'text', + text: 'The StarterKit includes all core extensions: paragraphs, headings, lists, tables, code blocks, and more.', + }, + ], + }, + ], +}; + +export function BasicEditor() { + return ( + + + + ); +} diff --git a/packages/editor/examples/src/examples/bubble-menu.tsx b/packages/editor/examples/src/examples/bubble-menu.tsx new file mode 100644 index 0000000000..704c69dd49 --- /dev/null +++ b/packages/editor/examples/src/examples/bubble-menu.tsx @@ -0,0 +1,38 @@ +import { StarterKit } from '@react-email/editor/extensions'; +import { BubbleMenu } from '@react-email/editor/ui'; +import { EditorProvider } from '@tiptap/react'; +import { ExampleShell } from '../example-shell'; + +const extensions = [StarterKit]; + +const content = { + type: 'doc', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: 'Select this text to see the bubble menu. Try ', + }, + { type: 'text', marks: [{ type: 'bold' }], text: 'bold' }, + { type: 'text', text: ', ' }, + { type: 'text', marks: [{ type: 'italic' }], text: 'italic' }, + { type: 'text', text: ', and other formatting options.' }, + ], + }, + ], +}; + +export function BubbleMenuExample() { + return ( + + + + + + ); +} diff --git a/packages/editor/examples/src/examples/column-layouts.tsx b/packages/editor/examples/src/examples/column-layouts.tsx new file mode 100644 index 0000000000..de5506cdc5 --- /dev/null +++ b/packages/editor/examples/src/examples/column-layouts.tsx @@ -0,0 +1,82 @@ +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 Toolbar() { + const { editor } = useCurrentEditor(); + if (!editor) return null; + + return ( +
+ } + onClick={() => editor.chain().focus().insertColumns(2).run()} + /> + } + onClick={() => editor.chain().focus().insertColumns(3).run()} + /> + } + onClick={() => editor.chain().focus().insertColumns(4).run()} + /> +
+ ); +} + +export function ColumnLayouts() { + return ( + + } + /> + + ); +} diff --git a/packages/editor/examples/src/examples/custom-bubble-menu.tsx b/packages/editor/examples/src/examples/custom-bubble-menu.tsx new file mode 100644 index 0000000000..794566bf97 --- /dev/null +++ b/packages/editor/examples/src/examples/custom-bubble-menu.tsx @@ -0,0 +1,45 @@ +import { StarterKit } from '@react-email/editor/extensions'; +import { BubbleMenu } from '@react-email/editor/ui'; +import { EditorProvider } from '@tiptap/react'; +import { ExampleShell } from '../example-shell'; + +const extensions = [StarterKit]; + +const content = { + type: 'doc', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: 'Select text to see a custom bubble menu built from primitives — only bold, italic, underline, and alignment.', + }, + ], + }, + ], +}; + +export function CustomBubbleMenu() { + return ( + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/editor/examples/src/examples/custom-extensions.tsx b/packages/editor/examples/src/examples/custom-extensions.tsx new file mode 100644 index 0000000000..9da4e7ed12 --- /dev/null +++ b/packages/editor/examples/src/examples/custom-extensions.tsx @@ -0,0 +1,115 @@ +import { StarterKit } from '@react-email/editor/extensions'; +import { BubbleMenu } from '@react-email/editor/ui'; +import { mergeAttributes, Node } from '@tiptap/core'; +import { EditorProvider, useCurrentEditor } from '@tiptap/react'; +import { Info } from 'lucide-react'; +import { ExampleShell } from '../example-shell'; + +const Callout = Node.create({ + name: 'callout', + group: 'block', + content: 'inline*', + + parseHTML() { + return [{ tag: 'div[data-callout]' }]; + }, + + renderHTML({ HTMLAttributes }) { + return [ + 'div', + mergeAttributes(HTMLAttributes, { + 'data-callout': '', + style: + 'padding: 12px 16px; background: var(--re-hover); border-left: 3px solid var(--re-text); border-radius: 4px; margin: 8px 0;', + }), + 0, + ]; + }, + + renderToReactEmail({ children, style }) { + return ( +
+ {children} +
+ ); + }, +}); + +const extensions = [StarterKit, Callout]; + +const content = { + type: 'doc', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: 'This example shows a custom "Callout" node created with Node.create and renderToReactEmail. Use the toolbar to insert one.', + }, + ], + }, + { + type: 'callout', + content: [ + { + type: 'text', + text: 'This is a callout block — a custom extension!', + }, + ], + }, + ], +}; + +function Toolbar() { + const { editor } = useCurrentEditor(); + if (!editor) return null; + + return ( +
+ +
+ ); +} + +export function CustomExtensions() { + return ( + + } + > + + + + ); +} diff --git a/packages/editor/examples/src/examples/email-export.tsx b/packages/editor/examples/src/examples/email-export.tsx new file mode 100644 index 0000000000..5fdc3c5c46 --- /dev/null +++ b/packages/editor/examples/src/examples/email-export.tsx @@ -0,0 +1,85 @@ +import { ReactEmail } from '@react-email/editor/core'; +import { StarterKit } from '@react-email/editor/extensions'; +import { EmailTheming } from '@react-email/editor/plugins'; +import { BubbleMenu } from '@react-email/editor/ui'; +import { EditorProvider, useCurrentEditor } from '@tiptap/react'; +import { useState } from 'react'; +import { ExampleShell } from '../example-shell'; + +const extensions = [StarterKit, EmailTheming, ReactEmail]; + +const content = { + type: 'doc', + content: [ + { + type: 'heading', + attrs: { level: 1 }, + content: [{ type: 'text', text: 'My Email Newsletter' }], + }, + { + type: 'paragraph', + content: [ + { type: 'text', text: 'Edit this content, then click ' }, + { type: 'text', marks: [{ type: 'bold' }], text: 'Export HTML' }, + { type: 'text', text: ' to see the generated email markup.' }, + ], + }, + { + type: 'paragraph', + content: [ + { + type: 'text', + text: 'The exported HTML uses React Email components and is ready to send.', + }, + ], + }, + ], +}; + +function ExportPanel() { + const { editor } = useCurrentEditor(); + const [html, setHtml] = useState(''); + const [exporting, setExporting] = useState(false); + + const handleExport = async () => { + if (!editor) return; + setExporting(true); + const result = await editor.getReactEmail(); + setHtml(result.html); + setExporting(false); + }; + + return ( +
+ + {html && ( +