'use client'; import { EmailNode } from '@react-email/editor/core'; import { StarterKit } from '@react-email/editor/extensions'; import { BubbleMenu } from '@react-email/editor/ui'; import { mergeAttributes } from '@tiptap/core'; import { EditorProvider, useCurrentEditor } from '@tiptap/react'; import { Info } from 'lucide-react'; import { ExampleShell } from '../example-shell'; const Callout = EmailNode.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 EmailNode.create. 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 ( } > ); }

Custom extensions