InPlaceEditor

Shows a record value and turns it into an input on click. It reads the record in context, sends only the changed fields through update, and makes no call when nothing changed. Escape cancels, and a blur cancels unless cancelOnBlur is false. Editing needs edit access to the resource. Do not put it inside an <Edit> or <Create> form: it has a form of its own.

Installation

pnpm dlx shadcn@latest add @chelone/in-place-editor

Loading preview…

Shows a record value and turns it into an input on click. It reads the record in context, sends only the changed fields through update, and makes no call when nothing changed. Escape cancels, and a blur cancels unless cancelOnBlur is false. Editing needs edit access to the resource. Do not put it inside an <Edit> or <Create> form: it has a form of its own.

Props

Prop	Type	Default	Description
cancelOnBlur	boolean	—	Cancel on a focus move out of the editor; when false, save instead. Default `true`.
children	ReactNode	—	What to show while reading and saving. Default `<TextField source={source} />`.
className	string	—
editor	ReactNode	—	What to edit with, inside the form. Default `<TextInput source={source} label={false} helperText={false} autoFocus />`.
meta	Record<string, unknown>	—	Sent with the update.
mutationMode	MutationMode	—	Default is `useUpdate`'s own.
notifyOnSuccess	boolean	—	Notify `chelone.notification.updated` on success. Undoable mode always notifies, with Undo. Default `false`.
onError	(error: unknown) => void	—	Runs with the failure after a rejected update.
onSuccess	(record: TRecord) => void	—	Runs with the saved record after a successful update.
resource	string	—	Override the ambient resource.
showButtons	boolean	—	Show Save and Cancel buttons beside the input. Default `false`.
source	SourceProp<TRecord>	—	The field to show and edit. Required unless both `children` and `editor` are given.