Inspector and fields

ContentEditor.Inspector shows the fields of the element the selection sits in: the url of a link, the file, alternative text and caption of an image, or anything a feature of yours declares. It edits the node in place, so the canvas updates as you type and one undo takes the change back. Nothing about an element is edited anywhere else.

Placing it

The inspector is a part like the others, rendered inside ContentEditor.Root wherever the host wants it. On a wide screen, a side panel:

<ContentEditor.Root features={features} value={value} onChange={setValue}>
	<div className="grid gap-6 md:grid-cols-[1fr_18rem]">
		<ContentEditor.Layout>
			<ContentEditor.Toolbar />
			<ContentEditor.Canvas />
		</ContentEditor.Layout>
		<ContentEditor.Inspector />
	</div>
</ContentEditor.Root>

On a phone, a sheet. useInspectedElement() returns the element being inspected, or null, so the host enables its button, or opens the sheet, only when there is something to show:

function SettingsSheet() {
	const inspected = useInspectedElement();
	const [open, setOpen] = useState(false);
	return (
		<Sheet.Root open={open && inspected !== null} onOpenChange={setOpen}>
			<Button disabled={inspected === null} onClick={() => setOpen(true)}>
				Settings
			</Button>
			<Sheet.Content side="bottom">
				<ContentEditor.Inspector />
			</Sheet.Content>
		</Sheet.Root>
	);
}

When the selection sits in two elements with fields at once (a link inside a highlighted paragraph), the inspector shows the innermost one.

Field types

A field is data: a type, the attribute it edits (key) and a label. Each type has one control, and stores one kind of value on the node.

Every field also takes a description, shown under its control. An image field on an editor without onUploadImage falls back to a url input.

A money amount is stored as integer minor units and a currency, never as a formatted string, so a document sent in several locales is formatted per reader at render time.

Labels

A field's label, description, placeholder and each option's label are keys under labels.fields. A key with no entry is shown as written, so a host that does not translate writes the text itself, and one that does passes its own:

<ContentEditor.Root
	labels={{
		fields: { alt: "Texte alternatif", caption: "Légende" },
		chrome: { inspector: "Réglages", inspectorEmpty: "Sélectionnez un bloc." },
	}}
/>

The inspector's title is the element's name under labels.items, the same key the slash menu shows.

API

Plus every <section> prop. Source: content-editor/components/inspector.tsx.