UI kit reference

components/EditableTitle

import { … } from 'zidane-ui'ui/src/components/EditableTitle.tsx

Breadcrumb (long path truncates left)

EditableTitle (double-click)

Rate limit the chat endpoint

DiffCounts, RowBadge, Highlighted

+14−2+120−8mergeddraft3 filessession-title.ts

SegmentSpinner

ZidaneMark

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.

TypeScript

function EditableTitle(props: EditableTitleProps): Element

Parameters

Parameters
Name	Type	Description
props	`EditableTitleProps`	Component props.

Returns

Element

Props

EditableTitle props
Name	Type	Description
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.

ui/src/components/EditableTitle.tsx:55

Interfaces#

`EditableTitleProps`Interface#

Props for EditableTitle.

TypeScript

interface EditableTitleProps

Properties

EditableTitleProps properties
Name	Type	Description
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.

ui/src/components/EditableTitle.tsx:11