# components/EditableTitle (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/EditableTitle.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/EditableTitle.tsx).

## Components

### `EditableTitle`

Component.

In-place rename surface for the session title. Uses `contentEditable`
so the editing affordance carries the title's exact typography
instead of swapping to an input chrome that breaks the row's optical
rhythm.

HTML pasting is sanitised at the `onPaste` seam — clipboard rich
text is converted to plain text before insertion, and newlines are
collapsed to spaces (a session title is a single line by contract).
`contentEditable` accepts HTML elements via drag-drop too; the
`onInput` handler reads `textContent` (not `innerHTML`) so any node
that sneaks in still lands as flat text on commit.

The element is uncontrolled while editing — React seeds the
`textContent` once on the false→true edit transition, then leaves
the DOM alone so the caret position survives each keystroke. The
parent's `renameValue` is kept in sync via `onChange`, so a commit that
reads it from a ref sees the current text.

```ts
function EditableTitle(props: EditableTitleProps): Element
```

**Parameters**

- `props` (`EditableTitleProps`): Component props.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.
- `display?` (`ReactNode`): What shows instead of `text` while not editing (the title with its reference badges).
- `editing` (`boolean`): Whether the title is being edited in place.
- `label?` (`string`): Accessible name of the editor (default: the `rename` label).
- `onCancel` (`() => void`): Fired on Escape.
- `onChange` (`(value: string) => void`): Fired on every keystroke while editing — keeps the parent's renameValue in sync.
- `onCommit` (`() => void | Promise<void>`): Fired on blur or Enter; not on the blur that follows an Escape.
- `onStartEdit` (`() => void`): Fired on double-click while not editing.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `text` (`string`): Title shown when not editing AND the seed value when entering edit mode.

Source: [ui/src/components/EditableTitle.tsx:55](https://github.com/Tahul/zidane/blob/main/ui/src/components/EditableTitle.tsx#L55)

## Interfaces

### `EditableTitleProps`

Interface.

Props for [`EditableTitle`](https://zidane.si/docs/reference/ui-components-editable-title.md#EditableTitle).

```ts
interface EditableTitleProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.
- `display?` (`ReactNode`): What shows instead of `text` while not editing (the title with its reference badges).
- `editing` (`boolean`): Whether the title is being edited in place.
- `label?` (`string`): Accessible name of the editor (default: the `rename` label).
- `onCancel` (`() => void`): Fired on Escape.
- `onChange` (`(value: string) => void`): Fired on every keystroke while editing — keeps the parent's renameValue in sync.
- `onCommit` (`() => void | Promise<void>`): Fired on blur or Enter; not on the blur that follows an Escape.
- `onStartEdit` (`() => void`): Fired on double-click while not editing.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `text` (`string`): Title shown when not editing AND the seed value when entering edit mode.

Source: [ui/src/components/EditableTitle.tsx:11](https://github.com/Tahul/zidane/blob/main/ui/src/components/EditableTitle.tsx#L11)