@effect-tui/react 0.15.2 → 2.0.0

package/src/components/TextInput.tsx

@@ -7,12 +7,15 @@ import {
 	deleteCharBackward,
 	deleteCharForward,
 	deleteWordBackward,
+	deleteWordForward,
 	insertText,
 	killToEnd,
 	killToStart,
 	matchNextWord,
 	matchPrevWord,
+	resolveTextInputAction,
 	type TextState,
+	type TextKeyEvent,
 	transposeChars,
 } from "./text-editing.js"
 
@@ -97,17 +100,20 @@ export function TextInput({
 	}, [value, cursorPos])
 
 	const handleKey = useCallback(
-		(key: { name: string; text?: string; ctrl?: boolean; meta?: boolean; shift?: boolean }) => {
+		(key: TextKeyEvent) => {
 			if (!focused) return
 
+			const action = resolveTextInputAction(key)
+			if (!action) return
+
 			const state: TextState = { text: value, cursor: cursorPos, killRing }
 
 			// Helper to apply an edit result
-			const applyEdit = (result: { state: TextState; changed: boolean }) => {
+			const applyEdit = (result: { state: TextState; changed: boolean }, options?: { keepKillRing?: boolean }) => {
 				if (result.changed) {
 					onChange(result.state.text)
 					setCursorPos(result.state.cursor)
-					if (result.state.killRing !== killRing) {
+					if (!options?.keepKillRing && result.state.killRing !== killRing) {
 						setKillRing(result.state.killRing)
 					}
 				}
@@ -126,114 +132,63 @@ export function TextInput({
 				setCursorPos(match ? cursorPos + match.length : value.length)
 			}
 
-			switch (key.name) {
-				case "left":
-					if (key.meta) {
-						moveToPrevWord()
-					} else {
-						setCursorPos(Math.max(0, cursorPos - 1))
-					}
+			switch (action.type) {
+				case "move-left":
+					setCursorPos(Math.max(0, cursorPos - 1))
 					break
-
-				case "right":
-					if (key.meta) {
-						moveToNextWord()
-					} else {
-						setCursorPos(Math.min(value.length, cursorPos + 1))
-					}
+				case "move-right":
+					setCursorPos(Math.min(value.length, cursorPos + 1))
 					break
-
-				case "home":
+				case "move-word-left":
+					moveToPrevWord()
+					break
+				case "move-word-right":
+					moveToNextWord()
+					break
+				case "move-start":
+				case "move-doc-start":
 					setCursorPos(0)
 					break
-
-				case "end":
+				case "move-end":
+				case "move-doc-end":
 					setCursorPos(value.length)
 					break
-
-				case "backspace":
-					if (key.meta) {
-						// Option+Backspace: Delete to previous word boundary
-						const beforeCursor = value.slice(0, cursorPos)
-						const match = matchPrevWord(beforeCursor)
-						if (match) {
-							const newPos = cursorPos - match.length
-							onChange(value.slice(0, newPos) + value.slice(cursorPos))
-							setCursorPos(newPos)
-						} else if (cursorPos > 0) {
-							onChange(value.slice(cursorPos))
-							setCursorPos(0)
-						}
-					} else {
-						applyEdit(deleteCharBackward(state))
-					}
+				case "delete-backward":
+					applyEdit(deleteCharBackward(state))
 					break
-
-				case "delete":
-					if (key.meta) {
-						// Option+Delete: Delete to next word boundary
-						const afterCursor = value.slice(cursorPos)
-						const match = matchNextWord(afterCursor)
-						if (match) {
-							onChange(value.slice(0, cursorPos) + value.slice(cursorPos + match.length))
-						} else if (cursorPos < value.length) {
-							onChange(value.slice(0, cursorPos))
-						}
-					} else {
-						applyEdit(deleteCharForward(state))
-					}
+				case "delete-forward":
+					applyEdit(deleteCharForward(state))
+					break
+				case "delete-word-backward":
+					applyEdit(deleteWordBackward(state), { keepKillRing: action.scope === "line" })
+					break
+				case "delete-word-forward":
+					applyEdit(deleteWordForward(state), { keepKillRing: action.scope === "line" })
+					break
+				case "kill-to-end":
+					applyEdit(killToEnd(state))
+					break
+				case "kill-to-start":
+					applyEdit(killToStart(state))
+					break
+				case "transpose":
+					applyEdit(transposeChars(state))
+					break
+				case "yank":
+					applyEdit(insertText(state, killRing))
+					break
+				case "insert":
+					applyEdit(insertText(state, action.text))
 					break
-
 				case "enter":
+				case "submit":
 					onSubmit?.(value)
 					break
-
-				case "escape":
+				case "cancel":
 					onCancel?.()
 					break
-
-				case "char":
-				case "space":
-					if (key.ctrl && key.text) {
-						// Emacs-style keybindings
-						switch (key.text) {
-							case "a":
-								setCursorPos(0)
-								break
-							case "e":
-								setCursorPos(value.length)
-								break
-							case "b":
-								setCursorPos(Math.max(0, cursorPos - 1))
-								break
-							case "f":
-								setCursorPos(Math.min(value.length, cursorPos + 1))
-								break
-							case "d":
-								applyEdit(deleteCharForward(state))
-								break
-							case "h":
-								applyEdit(deleteCharBackward(state))
-								break
-							case "k":
-								applyEdit(killToEnd(state))
-								break
-							case "u":
-								applyEdit(killToStart(state))
-								break
-							case "w":
-								applyEdit(deleteWordBackward(state))
-								break
-							case "t":
-								applyEdit(transposeChars(state))
-								break
-							case "y":
-								applyEdit(insertText(state, killRing))
-								break
-						}
-					} else if (key.text && !key.meta) {
-						applyEdit(insertText(state, key.text))
-					}
+				case "move-up":
+				case "move-down":
 					break
 			}
 		},
@@ -268,7 +223,7 @@ export function TextInput({
 
 			// Clear the line with background color
 			if (bg !== undefined) {
-				ctx.fill(0, 0, ctx.width, 1, " ", { bg })
+				ctx.fillRect(0, 0, ctx.width, 1, " ", { bg })
 			}
 
 			// Calculate scroll offset to keep cursor visible

package/src/components/text-editing.ts

@@ -25,6 +25,40 @@ export interface MultilineState {
 	killRing: string
 }
 
+export interface TextKeyEvent {
+	name: string
+	text?: string
+	ctrl?: boolean
+	meta?: boolean
+	shift?: boolean
+}
+
+export type WordScope = "line" | "document"
+
+export type TextInputAction =
+	| { type: "move-left" }
+	| { type: "move-right" }
+	| { type: "move-up" }
+	| { type: "move-down" }
+	| { type: "move-start" }
+	| { type: "move-end" }
+	| { type: "move-doc-start" }
+	| { type: "move-doc-end" }
+	| { type: "move-word-left" }
+	| { type: "move-word-right" }
+	| { type: "delete-backward" }
+	| { type: "delete-forward" }
+	| { type: "delete-word-backward"; scope: WordScope }
+	| { type: "delete-word-forward"; scope: WordScope }
+	| { type: "kill-to-end" }
+	| { type: "kill-to-start" }
+	| { type: "transpose" }
+	| { type: "yank" }
+	| { type: "insert"; text: string }
+	| { type: "enter" }
+	| { type: "submit" }
+	| { type: "cancel" }
+
 /** Result of an edit operation */
 export interface EditResult<T> {
 	state: T
@@ -37,6 +71,79 @@ export interface EditResult<T> {
 
 export { matchNextWord, matchPrevWord }
 
+// ============================================================================
+// Keybinding resolution (shared by TextInput and MultilineTextInput)
+// ============================================================================
+
+export function resolveTextInputAction(key: TextKeyEvent): TextInputAction | null {
+	switch (key.name) {
+		case "left":
+			return key.meta ? { type: "move-word-left" } : { type: "move-left" }
+		case "right":
+			return key.meta ? { type: "move-word-right" } : { type: "move-right" }
+		case "up":
+			return key.meta ? { type: "move-doc-start" } : { type: "move-up" }
+		case "down":
+			return key.meta ? { type: "move-doc-end" } : { type: "move-down" }
+		case "home":
+			return { type: "move-start" }
+		case "end":
+			return { type: "move-end" }
+		case "backspace":
+			return key.meta
+				? { type: "delete-word-backward", scope: "line" }
+				: { type: "delete-backward" }
+		case "delete":
+			return key.meta
+				? { type: "delete-word-forward", scope: "line" }
+				: { type: "delete-forward" }
+		case "enter":
+			return key.ctrl || key.meta ? { type: "submit" } : { type: "enter" }
+		case "escape":
+			return { type: "cancel" }
+		case "char":
+		case "space": {
+			if (key.ctrl && key.text) {
+				switch (key.text) {
+					case "a":
+						return { type: "move-start" }
+					case "e":
+						return { type: "move-end" }
+					case "b":
+						return { type: "move-left" }
+					case "f":
+						return { type: "move-right" }
+					case "n":
+						return { type: "move-down" }
+					case "p":
+						return { type: "move-up" }
+					case "d":
+						return { type: "delete-forward" }
+					case "h":
+						return { type: "delete-backward" }
+					case "k":
+						return { type: "kill-to-end" }
+					case "u":
+						return { type: "kill-to-start" }
+					case "w":
+						return { type: "delete-word-backward", scope: "document" }
+					case "t":
+						return { type: "transpose" }
+					case "y":
+						return { type: "yank" }
+				}
+			}
+
+			if (key.text && !key.meta) {
+				return { type: "insert", text: key.text }
+			}
+			break
+		}
+	}
+
+	return null
+}
+
 // ============================================================================
 // Single-line operations (for TextInput)
 // ============================================================================
@@ -64,6 +171,35 @@ export function deleteWordBackward(state: TextState): EditResult<TextState> {
 	}
 }
 
+/** Delete word forward */
+export function deleteWordForward(state: TextState): EditResult<TextState> {
+	const { text, cursor } = state
+	if (cursor >= text.length) {
+		return { state, changed: false }
+	}
+
+	const afterCursor = text.slice(cursor)
+	const match = matchNextWord(afterCursor)
+
+	if (match) {
+		const newText = text.slice(0, cursor) + text.slice(cursor + match.length)
+		return {
+			state: { text: newText, cursor, killRing: match },
+			changed: true,
+		}
+	}
+
+	const killed = text.slice(cursor)
+	if (!killed) {
+		return { state, changed: false }
+	}
+
+	return {
+		state: { text: text.slice(0, cursor), cursor, killRing: killed },
+		changed: true,
+	}
+}
+
 /** Kill to end of line */
 export function killToEnd(state: TextState): EditResult<TextState> {
 	const { text, cursor } = state
@@ -247,6 +383,50 @@ export function deleteWordBackwardMultiline(state: MultilineState): EditResult<M
 	return { state, changed: false }
 }
 
+/** Delete word forward in multiline (line-scoped) */
+export function deleteWordForwardMultiline(state: MultilineState): EditResult<MultilineState> {
+	const { lines, cursor } = state
+	const line = lines[cursor.row]
+	const lineLen = graphemes(line).length
+
+	if (cursor.col < lineLen) {
+		const charIdx = graphemeColToCharIdx(line, cursor.col)
+		const afterCursor = line.slice(charIdx)
+		const match = matchNextWord(afterCursor)
+		const newLines = [...lines]
+
+		if (match) {
+			const newLine = line.slice(0, charIdx) + line.slice(charIdx + match.length)
+			newLines[cursor.row] = newLine
+			return {
+				state: {
+					lines: newLines,
+					cursor,
+					killRing: match,
+				},
+				changed: true,
+			}
+		}
+
+		const killed = line.slice(charIdx)
+		if (!killed) {
+			return { state, changed: false }
+		}
+
+		newLines[cursor.row] = line.slice(0, charIdx)
+		return {
+			state: {
+				lines: newLines,
+				cursor,
+				killRing: killed,
+			},
+			changed: true,
+		}
+	}
+
+	return { state, changed: false }
+}
+
 /** Kill to end of line in multiline */
 export function killToEndMultiline(state: MultilineState): EditResult<MultilineState> {
 	const { lines, cursor } = state