Components

EditableText

Editing text in place, right where it is shown.

Text that is edited in place with a click: a task title, a description, a note. No separate form, and no edit mode for the whole page.

Example

Починить импорт из Trello

Падает на досках, где больше 500 карточек.

import { EditableText } from "@toimetdev/pathlogs-core";

<EditableText
  value={task.title}
  onSave={(next) => updateTask(task.id, { title: next })}
  big
  tip="Click to rename"
/>

<EditableText
  value={task.description}
  onSave={(next) => updateTask(task.id, { description: next })}
  multiline
  markdown
  placeholder="Add a description…"
/>

Behaviour

Saving — on blur, and on Enter in a single-line field. In a multiline field Enter inserts a line break, as it should.
Escape cancels the edit and restores the original value.
The keyboard opens editing the same way the mouse does: Enter or Space on the focused text.
While saving the text is dimmed — you can see the change has not landed yet.

Props

Prop	Type	Default	Description
`value`*	`string`	—	The current value.
`onSave`*	`(next: string) => void \| Promise<void>`	—	Saving. Until the promise resolves, the text is shown dimmed.
`multiline`	`boolean`	`false`	A multiline field instead of a single-line one.
`markdown`	`boolean`	`false`	Render the value as limited Markdown in view mode. Works together with multiline.
`big`	`boolean`	`false`	A large face — for headings.
`placeholder`	`string`	`"—"`	What to show instead of an empty value.
`tip`	`string`	—	A tooltip when hovering the text.
`rows`	`number`	`5`	The height of the multiline field.
`disabled`	`boolean`	`false`	Editing is not allowed — no permission, say.

value*string

The current value.

onSave*(next: string) => void | Promise<void>

Saving. Until the promise resolves, the text is shown dimmed.

multilineboolean

defaults to: false

A multiline field instead of a single-line one.

markdownboolean

defaults to: false

Render the value as limited Markdown in view mode. Works together with multiline.

bigboolean

defaults to: false

A large face — for headings.

placeholderstring

defaults to: "—"

What to show instead of an empty value.

tipstring

A tooltip when hovering the text.

rowsnumber

defaults to: 5

The height of the multiline field.

disabledboolean

defaults to: false

Editing is not allowed — no permission, say.