pierrelf.com
Summary#
Implement text editing for `<input type="text">`, `<input type="password">`, and `` — the core interactive text widget.</p> <h2 id="details" class="heading">Details<a href="#details" class="anchor">#</a></h2> <h3 id="cursor" class="heading">Cursor<a href="#cursor" class="anchor">#</a></h3> <ul> <li>Blinking text cursor (caret) at insertion point</li> <li>Cursor positioning via mouse click (map click X coordinate to character offset)</li> <li>Cursor movement via arrow keys (left/right, and up/down for textarea)</li> <li>Home/End keys move to line start/end</li> <li>Cmd+Left/Right move to line start/end (macOS)</li> <li>Cmd+Up/Down move to document start/end (textarea, macOS)</li> </ul> <h3 id="text-selection" class="heading">Text selection<a href="#text-selection" class="anchor">#</a></h3> <ul> <li>Click-and-drag selects text range</li> <li>Shift+arrow keys extend selection</li> <li>Shift+click extends selection to click position</li> <li>Cmd+A selects all text in the control</li> <li>Double-click selects a word</li> <li>Selected text renders with highlight background</li> </ul> <h3 id="keyboard-input" class="heading">Keyboard input<a href="#keyboard-input" class="anchor">#</a></h3> <ul> <li>Character input inserts at cursor position (or replaces selection)</li> <li>Backspace/Delete remove characters</li> <li>Cmd+Backspace deletes to line start (macOS)</li> <li>Option+Backspace deletes previous word (macOS)</li> </ul> <h3 id="clipboard" class="heading">Clipboard<a href="#clipboard" class="anchor">#</a></h3> <ul> <li>Cmd+C copies selected text</li> <li>Cmd+X cuts selected text</li> <li>Cmd+V pastes from clipboard</li> <li>Uses macOS pasteboard via platform crate FFI</li> </ul> <h3 id="value-tracking" class="heading">Value tracking<a href="#value-tracking" class="anchor">#</a></h3> <ul> <li>`input.value` / `textarea.value` reflect current edited text</li> <li>`input` event fires on each edit</li> <li>`change` event fires on blur after value changed</li> </ul> <h2 id="acceptance-criteria" class="heading">Acceptance criteria<a href="#acceptance-criteria" class="anchor">#</a></h2> <ul> <li>Text cursor renders and blinks in focused text inputs and textareas</li> <li>Mouse click positions cursor correctly</li> <li>Arrow keys, Home/End, Cmd+arrows navigate cursor</li> <li>Click-drag and Shift+arrows create text selections</li> <li>Typing inserts text; Backspace/Delete remove text</li> <li>Clipboard operations work via macOS pasteboard</li> <li>`input.value` stays in sync with edits</li> <li>`input` and `change` events fire at correct times</li> <li>Tests cover cursor movement, selection, editing, and value synchronization</li> </ul> <h2 id="dependencies" class="heading">Dependencies<a href="#dependencies" class="anchor">#</a></h2> <ul> <li>Form element parsing and DOM interfaces</li> <li>Form control rendering</li> <li>Focus management and tab navigation</li> </ul> </body></html>