interface InlineEditProps

Passed to InlineEdit by the component showing the text, which renders it as children and saves it in onSave.

Properties

value: string

The text as saved, which the field opens on.

editable: boolean

Without it, children show alone.

label: string

Names the action, such as "Edit title": the text's tooltip.

onSave: (value: string) => Promise<void>

Saves the trimmed text, and shows it: the field closes once it resolves. A thrown error, such as expectOk's, stays open under the field. A text left as it was closes the field without calling it.

optional
kind: "text" | "email" | "markdown"

A one-line field (text, email), where Enter saves, or the Markdown editor (markdown), where Ctrl/Cmd+Enter does. Escape cancels in both.

optional
required: boolean

Refuses to save an empty text.

optional
maxLength: number
optional
placeholder: string
optional
className: string

Added to the wrapper, which the text and the field both sit in.

optional
fieldClassName: string

Added to the field: see InlineEditFieldProps.

children: ReactNode

Usage

import { type InlineEditProps } from "src/components/form/InlineEdit.tsx";