@effect-tui/react 0.15.2 → 2.0.0

package/src/components/MultilineTextInput.tsx

@@ -1,13 +1,14 @@
-import { type Color, Colors, displayWidth, graphemes } from "@effect-tui/core"
+import { type Color, Colors, graphemes } from "@effect-tui/core"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useKeyboard } from "../hooks/use-keyboard.js"
 import { usePaste } from "../hooks/use-paste.js"
-import { isWhitespace } from "../utils/word-boundaries.js"
+import { buildTextLayout, type TextLayout } from "../utils/index.js"
 import type { DrawContext } from "../hosts/canvas.js"
 import {
 	deleteCharBackwardMultiline,
 	deleteCharForwardMultiline,
 	deleteWordBackwardMultiline,
+	deleteWordForwardMultiline,
 	graphemeColToCharIdx,
 	insertTextMultiline,
 	killToEndMultiline,
@@ -15,6 +16,8 @@ import {
 	type MultilineState,
 	matchNextWord,
 	matchPrevWord,
+	resolveTextInputAction,
+	type TextKeyEvent,
 	transposeCharsMultiline,
 } from "./text-editing.js"
 
@@ -61,108 +64,11 @@ interface CursorPos {
 	col: number // grapheme index within logical line
 }
 
-/** A visual line that maps back to a logical line */
-interface VisualLine {
-	logicalRow: number
-	startCol: number // grapheme index in logical line (inclusive)
-	endCol: number // grapheme index in logical line (exclusive)
-	text: string // the actual text for this visual line
-}
-
-/** Layout for a single logical line */
-interface LineLayout {
-	graphemeList: string[]
-	widths: number[]
-	prefixWidths: number[] // cumulative widths, length = graphemes.length + 1
-	visualLines: VisualLine[]
-}
-
-/** Complete layout for all text */
-interface Layout {
-	lines: LineLayout[]
-	allVisualLines: VisualLine[]
-}
-
-/**
- * Wrap a single logical line into visual lines.
- * Uses word boundaries with fallback to character wrap.
- */
-function wrapLogicalLine(line: string, logicalRow: number, maxWidth: number): LineLayout {
-	const graphemeList = graphemes(line)
-	const widths = graphemeList.map((g) => displayWidth(g))
-
-	// Build prefix widths for O(1) range width queries
-	const prefixWidths: number[] = [0]
-	for (let i = 0; i < widths.length; i++) {
-		prefixWidths.push(prefixWidths[i] + widths[i])
-	}
-
-	// Find break opportunities (after spaces)
-	const isBreakable = graphemeList.map((g) => isWhitespace(g))
-
-	const visualLines: VisualLine[] = []
-	let start = 0
-	let currentWidth = 0
-	let lastBreak = -1
-
-	for (let i = 0; i < graphemeList.length; i++) {
-		const w = widths[i]
-
-		if (currentWidth + w > maxWidth && start < i) {
-			// Need to wrap - backtrack to last break if possible
-			const breakAt = lastBreak >= start ? lastBreak + 1 : i
-
-			visualLines.push({
-				logicalRow,
-				startCol: start,
-				endCol: breakAt,
-				text: graphemeList.slice(start, breakAt).join(""),
-			})
-
-			start = breakAt
-			currentWidth = prefixWidths[i + 1] - prefixWidths[start]
-			lastBreak = -1
-		} else {
-			currentWidth += w
-		}
-
-		if (isBreakable[i]) {
-			lastBreak = i
-		}
-	}
-
-	// Final segment
-	visualLines.push({
-		logicalRow,
-		startCol: start,
-		endCol: graphemeList.length,
-		text: graphemeList.slice(start).join(""),
-	})
-
-	return { graphemeList, widths, prefixWidths, visualLines }
-}
-
-/**
- * Build complete layout for text with word wrap.
- */
-function buildLayout(text: string, maxWidth: number): Layout {
-	const logicalLines = text.split("\n")
-	const lines: LineLayout[] = []
-	const allVisualLines: VisualLine[] = []
-
-	for (let row = 0; row < logicalLines.length; row++) {
-		const lineLayout = wrapLogicalLine(logicalLines[row], row, maxWidth)
-		lines.push(lineLayout)
-		allVisualLines.push(...lineLayout.visualLines)
-	}
-
-	return { lines, allVisualLines }
-}
 
 /**
  * Convert logical cursor to visual row/col.
  */
-function logicalToVisual(layout: Layout, cursor: CursorPos): { visualRow: number; visualCol: number } {
+function logicalToVisual(layout: TextLayout, cursor: CursorPos): { visualRow: number; visualCol: number } {
 	const lineLayout = layout.lines[cursor.row]
 	if (!lineLayout) {
 		return { visualRow: 0, visualCol: 0 }
@@ -196,7 +102,7 @@ function logicalToVisual(layout: Layout, cursor: CursorPos): { visualRow: number
  * Convert visual row to logical cursor (for up/down navigation).
  * Tries to preserve the visual X position.
  */
-function visualToLogical(layout: Layout, visualRow: number, targetVisualX: number): CursorPos {
+function visualToLogical(layout: TextLayout, visualRow: number, targetVisualX: number): CursorPos {
 	if (visualRow < 0) {
 		return { row: 0, col: 0 }
 	}
@@ -294,38 +200,9 @@ export function MultilineTextInput({
 
 	// Build layout with word wrap
 	const layout = useMemo(() => {
-		if (!wordWrap) {
-			// No wrap - each logical line is one visual line
-			const lines: LineLayout[] = logicalLines.map((line, row) => {
-				const graphemeList = graphemes(line)
-				const widths = graphemeList.map((g) => displayWidth(g))
-				const prefixWidths = [0]
-				for (let i = 0; i < widths.length; i++) {
-					prefixWidths.push(prefixWidths[i] + widths[i])
-				}
-				return {
-					graphemeList,
-					widths,
-					prefixWidths,
-					visualLines: [
-						{
-							logicalRow: row,
-							startCol: 0,
-							endCol: graphemeList.length,
-							text: line,
-						},
-					],
-				}
-			})
-			return {
-				lines,
-				allVisualLines: lines.flatMap((l) => l.visualLines),
-			}
-		}
-
 		const effectiveWidth = Math.max(10, contentWidth - lineNumGutterWidth)
-		return buildLayout(value, effectiveWidth)
-	}, [value, contentWidth, wordWrap, lineNumGutterWidth, logicalLines])
+		return buildTextLayout(value, effectiveWidth, { wrap: wordWrap, preserveWhitespace: true })
+	}, [value, contentWidth, wordWrap, lineNumGutterWidth])
 
 	// Keep cursor in bounds when value changes externally
 	useEffect(() => {
@@ -364,9 +241,22 @@ export function MultilineTextInput({
 	const currentLineLayout = layout.lines[cursor.row]
 
 	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 applyEdit = (result: { state: MultilineState; changed: boolean }, options?: { keepKillRing?: boolean }) => {
+				if (result.changed) {
+					onChange(result.state.lines.join("\n"))
+					setCursor(result.state.cursor)
+					if (!options?.keepKillRing && result.state.killRing !== killRing) {
+						setKillRing(result.state.killRing)
+					}
+				}
+			}
+
 			const moveCursor = (row: number, col: number) => {
 				const newRow = Math.max(0, Math.min(logicalLines.length - 1, row))
 				const lineLayout = layout.lines[newRow]
@@ -385,92 +275,93 @@ export function MultilineTextInput({
 				setCursor(newCursor)
 			}
 
-			switch (key.name) {
-				case "up":
-					if (key.meta) {
-						// Option+Up: Move to start of document
-						moveCursor(0, 0)
-					} else {
-						moveVisual(-1)
+			switch (action.type) {
+				case "move-up":
+					moveVisual(-1)
+					break
+				case "move-down":
+					moveVisual(1)
+					break
+				case "move-doc-start":
+					moveCursor(0, 0)
+					break
+				case "move-doc-end": {
+					const lastRow = logicalLines.length - 1
+					const lastLineLen = layout.lines[lastRow]?.graphemeList.length ?? 0
+					moveCursor(lastRow, lastLineLen)
+					break
+				}
+				case "move-left":
+					if (cursor.col > 0) {
+						moveCursor(cursor.row, cursor.col - 1)
+					} else if (cursor.row > 0) {
+						const prevLineLen = layout.lines[cursor.row - 1]?.graphemeList.length ?? 0
+						moveCursor(cursor.row - 1, prevLineLen)
 					}
 					break
-
-				case "down":
-					if (key.meta) {
-						// Option+Down: Move to end of document
-						const lastRow = logicalLines.length - 1
-						const lastLineLen = layout.lines[lastRow]?.graphemeList.length ?? 0
-						moveCursor(lastRow, lastLineLen)
-					} else {
-						moveVisual(1)
+				case "move-right": {
+					const lineLen = currentLineLayout?.graphemeList.length ?? 0
+					if (cursor.col < lineLen) {
+						moveCursor(cursor.row, cursor.col + 1)
+					} else if (cursor.row < logicalLines.length - 1) {
+						moveCursor(cursor.row + 1, 0)
 					}
 					break
-
-				case "left":
-					if (key.meta) {
-						// Option+Left: Move to previous word boundary
-						const lineLayout = layout.lines[cursor.row]
-						if (lineLayout) {
-							const beforeCursor = lineLayout.graphemeList.slice(0, cursor.col).join("")
-							const match = matchPrevWord(beforeCursor)
-							if (match) {
-								// Count graphemes in match
-								const matchGraphemes = graphemes(match).length
-								moveCursor(cursor.row, cursor.col - matchGraphemes)
-							} else if (cursor.col > 0) {
-								moveCursor(cursor.row, 0)
-							} else if (cursor.row > 0) {
-								const prevLineLen = layout.lines[cursor.row - 1]?.graphemeList.length ?? 0
-								moveCursor(cursor.row - 1, prevLineLen)
-							}
-						}
-					} else {
-						if (cursor.col > 0) {
-							moveCursor(cursor.row, cursor.col - 1)
+				}
+				case "move-word-left": {
+					const lineLayout = layout.lines[cursor.row]
+					if (lineLayout) {
+						const beforeCursor = lineLayout.graphemeList.slice(0, cursor.col).join("")
+						const match = matchPrevWord(beforeCursor)
+						if (match) {
+							const matchGraphemes = graphemes(match).length
+							moveCursor(cursor.row, cursor.col - matchGraphemes)
+						} else if (cursor.col > 0) {
+							moveCursor(cursor.row, 0)
 						} else if (cursor.row > 0) {
 							const prevLineLen = layout.lines[cursor.row - 1]?.graphemeList.length ?? 0
 							moveCursor(cursor.row - 1, prevLineLen)
 						}
 					}
 					break
-
-				case "right":
-					if (key.meta) {
-						// Option+Right: Move to next word boundary
-						const lineLayout = layout.lines[cursor.row]
-						if (lineLayout) {
-							const afterCursor = lineLayout.graphemeList.slice(cursor.col).join("")
-							const match = matchNextWord(afterCursor)
-							if (match) {
-								const matchGraphemes = graphemes(match).length
-								moveCursor(cursor.row, cursor.col + matchGraphemes)
-							} else if (cursor.col < lineLayout.graphemeList.length) {
-								moveCursor(cursor.row, lineLayout.graphemeList.length)
-							} else if (cursor.row < logicalLines.length - 1) {
-								moveCursor(cursor.row + 1, 0)
-							}
-						}
-					} else {
-						const lineLen = currentLineLayout?.graphemeList.length ?? 0
-						if (cursor.col < lineLen) {
-							moveCursor(cursor.row, cursor.col + 1)
+				}
+				case "move-word-right": {
+					const lineLayout = layout.lines[cursor.row]
+					if (lineLayout) {
+						const afterCursor = lineLayout.graphemeList.slice(cursor.col).join("")
+						const match = matchNextWord(afterCursor)
+						if (match) {
+							const matchGraphemes = graphemes(match).length
+							moveCursor(cursor.row, cursor.col + matchGraphemes)
+						} else if (cursor.col < lineLayout.graphemeList.length) {
+							moveCursor(cursor.row, lineLayout.graphemeList.length)
 						} else if (cursor.row < logicalLines.length - 1) {
 							moveCursor(cursor.row + 1, 0)
 						}
 					}
 					break
-
-				case "home":
+				}
+				case "move-start":
 					moveCursor(cursor.row, 0)
 					break
-
-				case "end":
+				case "move-end":
 					moveCursor(cursor.row, currentLineLayout?.graphemeList.length ?? 0)
 					break
-
-				case "backspace":
-					if (key.meta && cursor.col > 0) {
-						// Option+Backspace: Delete previous word
+				case "delete-backward": {
+					const state: MultilineState = { lines: logicalLines, cursor, killRing }
+					applyEdit(deleteCharBackwardMultiline(state))
+					break
+				}
+				case "delete-forward": {
+					const state: MultilineState = { lines: logicalLines, cursor, killRing }
+					applyEdit(deleteCharForwardMultiline(state))
+					break
+				}
+				case "delete-word-backward":
+					if (action.scope === "document") {
+						const state: MultilineState = { lines: logicalLines, cursor, killRing }
+						applyEdit(deleteWordBackwardMultiline(state))
+					} else if (cursor.col > 0) {
 						const charIdx = graphemeColToCharIdx(currentLine, cursor.col)
 						const beforeCursor = currentLine.slice(0, charIdx)
 						const match = matchPrevWord(beforeCursor)
@@ -484,157 +375,55 @@ export function MultilineTextInput({
 							setCursor({ row: cursor.row, col: newCol })
 						}
 					} else {
-						// Delete character before cursor (or join with previous line)
 						const state: MultilineState = { lines: logicalLines, cursor, killRing }
-						const result = deleteCharBackwardMultiline(state)
-						if (result.changed) {
-							onChange(result.state.lines.join("\n"))
-							setCursor(result.state.cursor)
-						}
+						applyEdit(deleteCharBackwardMultiline(state), { keepKillRing: true })
 					}
 					break
-
-				case "delete": {
+				case "delete-word-forward": {
 					const state: MultilineState = { lines: logicalLines, cursor, killRing }
-					const result = deleteCharForwardMultiline(state)
-					if (result.changed) {
-						onChange(result.state.lines.join("\n"))
+					const lineLen = currentLineLayout?.graphemeList.length ?? 0
+					if (cursor.col >= lineLen) {
+						applyEdit(deleteCharForwardMultiline(state), { keepKillRing: true })
+						break
 					}
+					applyEdit(deleteWordForwardMultiline(state), { keepKillRing: action.scope === "line" })
 					break
 				}
-
-				case "enter":
-					if (key.ctrl || key.meta) {
-						onSubmit?.(value)
-					} else {
-						// Insert newline
-						const state: MultilineState = { lines: logicalLines, cursor, killRing }
-						const result = insertTextMultiline(state, "\n")
-						if (result.changed) {
-							onChange(result.state.lines.join("\n"))
-							setCursor(result.state.cursor)
-						}
-					}
+				case "kill-to-end": {
+					const state: MultilineState = { lines: logicalLines, cursor, killRing }
+					applyEdit(killToEndMultiline(state))
 					break
-
-				case "escape":
-					onCancel?.()
+				}
+				case "kill-to-start": {
+					const state: MultilineState = { lines: logicalLines, cursor, killRing }
+					applyEdit(killToStartMultiline(state))
 					break
-
-				case "char":
-				case "space":
-					if (key.ctrl && key.text) {
-						// Emacs-style keybindings
-						switch (key.text) {
-							case "a":
-								moveCursor(cursor.row, 0)
-								break
-							case "e":
-								moveCursor(cursor.row, currentLineLayout?.graphemeList.length ?? 0)
-								break
-							case "b":
-								if (cursor.col > 0) {
-									moveCursor(cursor.row, cursor.col - 1)
-								} else if (cursor.row > 0) {
-									const prevLen = layout.lines[cursor.row - 1]?.graphemeList.length ?? 0
-									moveCursor(cursor.row - 1, prevLen)
-								}
-								break
-							case "f":
-								if (cursor.col < (currentLineLayout?.graphemeList.length ?? 0)) {
-									moveCursor(cursor.row, cursor.col + 1)
-								} else if (cursor.row < logicalLines.length - 1) {
-									moveCursor(cursor.row + 1, 0)
-								}
-								break
-							case "n":
-								moveVisual(1)
-								break
-							case "p":
-								moveVisual(-1)
-								break
-							case "d": {
-								// Delete character at cursor
-								const state: MultilineState = { lines: logicalLines, cursor, killRing }
-								const result = deleteCharForwardMultiline(state)
-								if (result.changed) {
-									onChange(result.state.lines.join("\n"))
-								}
-								break
-							}
-							case "h": {
-								// Backspace
-								const state: MultilineState = { lines: logicalLines, cursor, killRing }
-								const result = deleteCharBackwardMultiline(state)
-								if (result.changed) {
-									onChange(result.state.lines.join("\n"))
-									setCursor(result.state.cursor)
-								}
-								break
-							}
-							case "k": {
-								// Kill to end of line
-								const state: MultilineState = { lines: logicalLines, cursor, killRing }
-								const result = killToEndMultiline(state)
-								if (result.changed) {
-									onChange(result.state.lines.join("\n"))
-									setCursor(result.state.cursor)
-									setKillRing(result.state.killRing)
-								}
-								break
-							}
-							case "u": {
-								// Kill to start of line
-								const state: MultilineState = { lines: logicalLines, cursor, killRing }
-								const result = killToStartMultiline(state)
-								if (result.changed) {
-									onChange(result.state.lines.join("\n"))
-									setCursor(result.state.cursor)
-									setKillRing(result.state.killRing)
-								}
-								break
-							}
-							case "w": {
-								// Delete word backward (crosses line boundaries)
-								const state: MultilineState = { lines: logicalLines, cursor, killRing }
-								const result = deleteWordBackwardMultiline(state)
-								if (result.changed) {
-									onChange(result.state.lines.join("\n"))
-									setCursor(result.state.cursor)
-									setKillRing(result.state.killRing)
-								}
-								break
-							}
-							case "t": {
-								// Transpose characters
-								const state: MultilineState = { lines: logicalLines, cursor, killRing }
-								const result = transposeCharsMultiline(state)
-								if (result.changed) {
-									onChange(result.state.lines.join("\n"))
-									setCursor(result.state.cursor)
-								}
-								break
-							}
-							case "y": {
-								// Yank from kill ring
-								const state: MultilineState = { lines: logicalLines, cursor, killRing }
-								const result = insertTextMultiline(state, killRing)
-								if (result.changed) {
-									onChange(result.state.lines.join("\n"))
-									setCursor(result.state.cursor)
-								}
-								break
-							}
-						}
-					} else if (key.text && !key.meta) {
-						// Insert character at cursor
-						const state: MultilineState = { lines: logicalLines, cursor, killRing }
-						const result = insertTextMultiline(state, key.text)
-						if (result.changed) {
-							onChange(result.state.lines.join("\n"))
-							setCursor(result.state.cursor)
-						}
-					}
+				}
+				case "transpose": {
+					const state: MultilineState = { lines: logicalLines, cursor, killRing }
+					applyEdit(transposeCharsMultiline(state))
+					break
+				}
+				case "yank": {
+					const state: MultilineState = { lines: logicalLines, cursor, killRing }
+					applyEdit(insertTextMultiline(state, killRing))
+					break
+				}
+				case "insert": {
+					const state: MultilineState = { lines: logicalLines, cursor, killRing }
+					applyEdit(insertTextMultiline(state, action.text))
+					break
+				}
+				case "enter": {
+					const state: MultilineState = { lines: logicalLines, cursor, killRing }
+					applyEdit(insertTextMultiline(state, "\n"))
+					break
+				}
+				case "submit":
+					onSubmit?.(value)
+					break
+				case "cancel":
+					onCancel?.()
 					break
 			}
 		},
@@ -684,11 +473,16 @@ export function MultilineTextInput({
 
 			// Clear with background
 			if (bg !== undefined) {
-				ctx.fill(0, 0, ctx.width, ctx.height, " ", { bg })
+				ctx.fillRect(0, 0, ctx.width, ctx.height, " ", { bg })
 			}
 
 			// Use placeholder layout if empty
-			const displayLayout = isPlaceholder ? buildLayout(placeholder, Math.max(10, ctx.width - lineNumWidth)) : layout
+			const displayLayout = isPlaceholder
+				? buildTextLayout(placeholder, Math.max(10, ctx.width - lineNumWidth), {
+						wrap: true,
+						preserveWhitespace: true,
+					})
+				: layout
 
 			const { visualRow: cursorVisualRow } = isPlaceholder ? { visualRow: 0 } : logicalToVisual(layout, cursor)