Renders the editing of a text in place, with no page or form of its own. InlineEdit shows the text and opens the field over it: a dump's title and note, a playlist's title and description, a profile's description and email. InlineEditField is that field alone, for a text that opens it with an action of its own: a comment's Edit, a chat message's ✎.
Renders children, which a click on them, or the ✎ button after them,
swaps for a field holding value, with Save and Cancel under it. The ✎
shows on hover and on keyboard focus. A click on a link in the text, or one
that ends a selection, follows the link or keeps the selection instead.
Closing the field gives the focus back to the ✎ when the field had it.
Renders the field holding value, focused with the caret at its end, and
Save and Cancel under it. Enter saves a line, Ctrl/Cmd+Enter a Markdown
text, Escape leaves. Saving is refused while the text is empty and
required, or longer than maxLength. It is mounted afresh on each
opening, so that it starts from value.
Passed to InlineEditField by InlineEdit, and by the
components that open it with an action of their own, CommentNode and
ChatMessageItem, in place of the text while it is edited.
-
countFrom: number
Where the Markdown editor's counter starts, near
maxLength. -
enterSaves: boolean
In the Markdown editor, saves on Enter, a line breaking on Shift+Enter, as the chat's composer does. Ctrl/Cmd+Enter saves in either case.
-
fieldClassName: string
Added to the field: for a one-line one, the class of the text it edits, such as
dump-title, so that it takes on its type in every style. -
label: string
Names a one-line field, such as "Edit title".
-
onClose: () => void
Called once the text is saved, or left: the field is to unmount.
-
onSave: (value: string) => Promise<void> | void
Saves the trimmed text. The field closes once it is done, and stays open under the error it throws. A text left as it was isn't passed to it.
-
returnFocusTo: React.RefObject<HTMLElement | null>
Takes the focus once the field is gone, if it had it and no one has taken it since: the button that opened it, back in its place.
Passed to InlineEdit by the component showing the text, which
renders it as children and saves it in onSave.
- children: ReactNode
-
className: string
Added to the wrapper, which the text and the field both sit in.
-
editable: boolean
Without it,
childrenshow alone. -
fieldClassName: string
Added to the field: see InlineEditFieldProps.
-
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. -
label: string
Names the action, such as "Edit title": the text's tooltip.
- maxLength: number
-
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. - placeholder: string
-
required: boolean
Refuses to save an empty text.
-
value: string
The text as saved, which the field opens on.
Usage
import * as mod from "src/components/form/InlineEdit.tsx";