Add wave:editablediv component for inline text editing

[Copilot]

Implements a lightweight inline text editor using contenteditable for labels and short text fields.

Changes

• tsunami/frontend/src/element/editablediv.tsx - New component

  • Controlled component that syncs DOM text on prop changes
  • Fires onChange(newText) only on blur (no per-character callbacks)
  • Enter key submits the edit by triggering blur and firing onChange
  • Escape key reverts to original text and stops editing
  • Props: text, onChange, className, placeholder, plus passthrough for standard HTML attributes

• tsunami/frontend/src/vdom.tsx - Register wave:editablediv in WaveTagMap

• tsunami/frontend/src/tailwind.css - Placeholder styling via :empty:before pseudo-element

Usage

<wave:editablediv 
  text="Edit me" 
  onChange={(newText) => console.log(newText)}
  placeholder="Enter text..."
  className="text-sm px-2 py-1"
/>

Keyboard Behavior

• Enter: Submits the edit and stops editing (triggers blur → onChange)
• Escape: Reverts to original text and stops editing (no onChange fired)

The component uses Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> to avoid type conflicts between the custom onChange(string) signature and the standard HTML onChange(FormEvent).

Original prompt

I want to add a new element in tsunami/frontend/src/element/editablediv.tsx

(note do NOT modify the go.mod go.sum files in the tsunami demo dirs)

Component: wave:editablediv

Purpose: Lightweight inline text editor using contenteditable.

Props:

• className (string) — Tailwind classes for styling.
• text (string) — current text value.
• onChange (func(string)) — called once on blur with final text.
• (optional) placeholder (string) — shown when empty.
• also just pass through other props through to the underlying div e.g. style, aria, other event handlers etc.

Behavior:

• Renders a <div contentEditable> showing text.
• Syncs DOM text when text prop changes.
• Fires onChange(newText) on blur.
• Ignores intermediate keystrokes (no per-character updates).
• Prevents default Enter key (single-line editing).
• Adds a “placeholder” style when empty.

Goal: Simple, controlled inline editor for labels or short text fields.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[coderabbitai[bot]]

[!IMPORTANT]

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[sawka]

@copilot for the keydown handler. Enter should "submit" it -- stop the content editing and fire the onChange event. And hitting "Escape" should revert it back to the original contents and stop editing.

[Copilot]

@copilot for the keydown handler. Enter should "submit" it -- stop the content editing and fire the onChange event. And hitting "Escape" should revert it back to the original contents and stop editi...

Updated the keydown handler in commit d799b29:

• Enter key now submits the edit by calling blur(), which triggers onChange with the new text
• Escape key reverts the content to the original text stored in textRef.current and calls blur() to stop editing

Both keys prevent their default behavior and stop editing by blurring the contenteditable div.