'use client'; import { StarterKit } from '@react-email/editor/extensions'; import { EmailTheming } from '@react-email/editor/plugins'; import { Inspector } from '@react-email/editor/ui'; import { EditorContent, EditorContext, useEditor } from '@tiptap/react'; import { ExampleShell } from '../example-shell'; const extensions = [StarterKit, EmailTheming]; const content = `

Inspector Defaults

Click on any element to inspect it. The sidebar renders sensible defaults for each node type — no configuration needed.

Click me

Try selecting text to see the text inspector, or click the background to see document-level styles.

`; export function InspectorDefaults() { const editor = useEditor({ extensions, content, immediatelyRender: false, }); if (!editor) return null; return (

); } function Breadcrumb() { return (

{(segments) => segments.map((segment, i) => { const label = segment.node?.nodeType ?? 'Layout'; if (i === segments.length - 1) { return (

{i !== 0 && ( / )} {label}

); } return (

{i !== 0 && /}

); }) }

); }