'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 = `

Composed Inspector

This example picks specific sections and adds a custom one. Click an element to see the composed sidebar.

Click me

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

{({ findStyleValue, setGlobalStyle }) => (

Theme Colors

Page setGlobalStyle( 'body', 'backgroundColor', e.target.value, ) } className="w-6 h-6 border-0 p-0 cursor-pointer" />

Container setGlobalStyle( 'container', 'backgroundColor', e.target.value, ) } className="w-6 h-6 border-0 p-0 cursor-pointer" />

)} {(ctx) => ( <> {ctx.nodeType === 'image' && }

Data

ID ctx.setAttr('data-id', e.target.value) } className="w-24 text-xs bg-transparent border border-(--re-border) rounded px-1.5 py-1" />

)} {(ctx) => ( <> {ctx.isLinkActive && } )}

); } 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 && /}

); }) }

); } function normalizeHex(value: string): string { if (!value) return '#000000'; const v = value.trim(); const shortHex = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(v); if (shortHex) { return `#${shortHex[1]}${shortHex[1]}${shortHex[2]}${shortHex[2]}${shortHex[3]}${shortHex[3]}`; } if (/^#[0-9a-f]{6}$/i.test(v)) return v; return '#000000'; }