Image Upload API

import { StarterKit } from '@react-email/editor/extensions';
import { useEditorImage } from '@react-email/editor/plugins';

const imageExtension = useEditorImage({
  uploadImage: async (file) => {
    const url = await uploadToStorage(file);
    return { url };
  },
});

const extensions = [StarterKit, imageExtension];

interface UseEditorImageOptions {
  uploadImage: (file: File) => Promise<UploadImageResult>;
}

interface UploadImageResult {
  url: string;
}

import { imageSlashCommand } from '@react-email/editor/plugins';
import { defaultSlashCommands, SlashCommand } from '@react-email/editor/ui';

<SlashCommand.Root items={[...defaultSlashCommands, imageSlashCommand]} />

editor.commands.uploadImage();

editor.commands.setImage({
  src: 'https://example.com/hero.png',
  alt: 'Hero image',
  width: '600',
  height: '320',
  alignment: 'center',
  href: 'https://react.email',
});

<EmailEditor
  onUploadImage={async (file) => ({ url: await uploadToStorage(file) })}
/>