'use client'; import { StarterKit } from '@react-email/editor/extensions'; import type { UploadImageResult } from '@react-email/editor/plugins'; import { imageSlashCommand, useEditorImage } from '@react-email/editor/plugins'; import { BubbleMenu, defaultSlashCommands, SlashCommand, } from '@react-email/editor/ui'; import { EditorProvider, useCurrentEditor } from '@tiptap/react'; import { useCallback, useRef, useState } from 'react'; import { ExampleShell } from '../example-shell'; const PLACEHOLDER_IMAGE = 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=640&q=60'; const delay = (ms: number) => new Promise((resolve) => { setTimeout(resolve, ms); }); const readFileAsDataUrl = (file: File) => new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(String(reader.result)); reader.onerror = () => reject(reader.error ?? new Error('Could not read file')); reader.readAsDataURL(file); }); const content = { type: 'doc', content: [ { type: 'paragraph', content: [ { type: 'text', text: 'Paste or drop an image into the editor, or type / and choose "Image" to pick a file.', }, ], }, { type: 'image', attrs: { src: PLACEHOLDER_IMAGE, alt: 'A neon-lit circuit board', alignment: 'center', }, }, { type: 'paragraph', content: [ { type: 'text', text: 'Click an image to open its bubble menu. Toggle "Simulate upload error" to see the error path.', }, ], }, ], }; function Toolbar({ simulateError, onSimulateErrorChange, lastEvent, }: { simulateError: boolean; onSimulateErrorChange: (value: boolean) => void; lastEvent: string | null; }) { const { editor } = useCurrentEditor(); return (

onSimulateErrorChange(e.target.checked)} className="cursor-pointer" /> Simulate upload error {lastEvent ? ( {lastEvent} ) : null}

); } export function ImageUpload() { const [simulateError, setSimulateError] = useState(false); const [lastEvent, setLastEvent] = useState(null); const shouldFailRef = useRef(simulateError); shouldFailRef.current = simulateError; const uploadImage = useCallback(async (file: File) => { setLastEvent(`Uploading ${file.name}…`); try { if (shouldFailRef.current) { await delay(800); throw new Error('Simulated upload failure'); } const dataUrl = await readFileAsDataUrl(file); await delay(1200); setLastEvent(`Uploaded ${file.name}`); return { url: dataUrl } satisfies UploadImageResult; } catch (error) { const message = error instanceof Error ? error.message : String(error); setLastEvent(`Error uploading ${file.name}: ${message}`); throw error; } }, []); const imageExtension = useEditorImage({ uploadImage }); const extensions = [StarterKit, imageExtension]; return ( ); }

Image upload