HyInlineEdit

Click-to-edit text: a display ⇄ edit swap with an async commit lifecycle.

The value of this component is encapsulating the error-prone commit logic — Enter / Escape / blur-commit with a relatedTarget guard, optional confirm/cancel buttons, async validation that keeps the edit view open, and an optimistic-commit-then-rollback contract via a cancelable change event. It is editor-agnostic: the default editor is hy-text-input, but any hy-* form control can be slotted into editor.

Key Features:

• trigger: click / dblclick / manual (pencil button or programmatic)
• submit-on: blur / enter / confirm (Escape always reverts)
• Editor-agnostic editor slot (defaults to hy-text-input)
• validate keeps the edit view open with an inline error
• loading + cancelable change → optimistic update with rollback
• Display ≠ edit: the default slot renders formatted display; the editor edits the raw value

Examples

Basic rename

<hy-inline-edit value="Untitled"></hy-inline-edit>

Async commit with rollback

<hy-inline-edit value="Untitled" submit-on="blur"></hy-inline-edit>
<script>
el.addEventListener('change', (e) => {
e.preventDefault();            // keep the edit view open
el.loading = true;
save(e.detail.value).then(
() => { el.value = e.detail.value; el.editing = false; el.loading = false; },
() => { el.loading = false; } // stay open on failure
);
});
</script>

Events

• edit-start - Fired when the edit view opens. Detail: {}
• change - Commit. Cancelable — preventDefault() keeps the edit view open. Detail: { value: string }
• cancel - Fired when editing is canceled (Escape / cancel button). Detail: {}

Slots

• default - The display rendering of the rest state (formatted). Falls back to value / placeholder.
• editor - The edit control (defaults to hy-text-input).
• edit-trigger - The pencil / edit affordance (defaults to a hy-icon-button).