@effect-tui/react 0.1.1 → 0.1.4

package/src/components/text-editing.ts

@@ -0,0 +1,464 @@
+/**
+ * Pure functions for text editing operations.
+ * These are used by TextInput and MultilineTextInput components.
+ * Being pure functions makes them easy to test.
+ */
+
+import { graphemes } from "@effect-tui/core"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/** Single-line text state */
+export interface TextState {
+	text: string
+	cursor: number // character index
+	killRing: string
+}
+
+/** Multi-line text state */
+export interface MultilineState {
+	lines: string[]
+	cursor: { row: number; col: number } // col is grapheme index
+	killRing: string
+}
+
+/** Result of an edit operation */
+export interface EditResult<T> {
+	state: T
+	changed: boolean
+}
+
+// ============================================================================
+// Word boundary helpers (shared by TextInput and MultilineTextInput)
+// ============================================================================
+
+/** Match the previous word (and trailing whitespace) or whitespace-only chunk. */
+export function matchPrevWord(beforeCursor: string): string | null {
+	return beforeCursor.match(/(\S+\s*|\s+)$/)?.[0] ?? null
+}
+
+/** Match the next word (including leading whitespace). */
+export function matchNextWord(afterCursor: string): string | null {
+	return afterCursor.match(/^\s*\S+/)?.[0] ?? null
+}
+
+// ============================================================================
+// Single-line operations (for TextInput)
+// ============================================================================
+
+/** Delete word backward */
+export function deleteWordBackward(state: TextState): EditResult<TextState> {
+	const { text, cursor } = state
+	if (cursor <= 0) {
+		return { state, changed: false }
+	}
+
+	const beforeCursor = text.slice(0, cursor)
+	const match = matchPrevWord(beforeCursor)
+
+	if (!match) {
+		return { state, changed: false }
+	}
+
+	const newCursor = cursor - match.length
+	const newText = text.slice(0, newCursor) + text.slice(cursor)
+
+	return {
+		state: { text: newText, cursor: newCursor, killRing: match },
+		changed: true,
+	}
+}
+
+/** Kill to end of line */
+export function killToEnd(state: TextState): EditResult<TextState> {
+	const { text, cursor } = state
+	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 start of line */
+export function killToStart(state: TextState): EditResult<TextState> {
+	const { text, cursor } = state
+	const killed = text.slice(0, cursor)
+
+	if (!killed) {
+		return { state, changed: false }
+	}
+
+	return {
+		state: { text: text.slice(cursor), cursor: 0, killRing: killed },
+		changed: true,
+	}
+}
+
+/** Delete character at cursor */
+export function deleteCharForward(state: TextState): EditResult<TextState> {
+	const { text, cursor, killRing } = state
+	if (cursor >= text.length) {
+		return { state, changed: false }
+	}
+
+	const newText = text.slice(0, cursor) + text.slice(cursor + 1)
+	return {
+		state: { text: newText, cursor, killRing },
+		changed: true,
+	}
+}
+
+/** Delete character before cursor */
+export function deleteCharBackward(state: TextState): EditResult<TextState> {
+	const { text, cursor, killRing } = state
+	if (cursor <= 0) {
+		return { state, changed: false }
+	}
+
+	const newText = text.slice(0, cursor - 1) + text.slice(cursor)
+	return {
+		state: { text: newText, cursor: cursor - 1, killRing },
+		changed: true,
+	}
+}
+
+/** Transpose characters before cursor */
+export function transposeChars(state: TextState): EditResult<TextState> {
+	const { text, cursor, killRing } = state
+	if (cursor <= 0 || text.length < 2) {
+		return { state, changed: false }
+	}
+
+	let newText: string
+	let newCursor = cursor
+
+	if (cursor === text.length) {
+		// At end: swap last two chars
+		newText = text.slice(0, cursor - 2) + text[cursor - 1] + text[cursor - 2]
+	} else {
+		// Swap char before cursor with char at cursor
+		newText = text.slice(0, cursor - 1) + text[cursor] + text[cursor - 1] + text.slice(cursor + 1)
+		newCursor = cursor + 1
+	}
+
+	return {
+		state: { text: newText, cursor: newCursor, killRing },
+		changed: true,
+	}
+}
+
+/** Insert text at cursor (yank) */
+export function insertText(state: TextState, toInsert: string): EditResult<TextState> {
+	const { text, cursor, killRing } = state
+	if (!toInsert) {
+		return { state, changed: false }
+	}
+
+	const newText = text.slice(0, cursor) + toInsert + text.slice(cursor)
+	return {
+		state: { text: newText, cursor: cursor + toInsert.length, killRing },
+		changed: true,
+	}
+}
+
+// ============================================================================
+// Multi-line operations (for MultilineTextInput)
+// ============================================================================
+
+/** Convert grapheme column to character index in a line */
+export function graphemeColToCharIdx(line: string, col: number): number {
+	const gs = graphemes(line)
+	return gs.slice(0, col).join("").length
+}
+
+/** Convert character index to grapheme column */
+export function charIdxToGraphemeCol(line: string, charIdx: number): number {
+	return graphemes(line.slice(0, charIdx)).length
+}
+
+/** Delete word backward in multiline (crosses line boundaries) */
+export function deleteWordBackwardMultiline(state: MultilineState): EditResult<MultilineState> {
+	const { lines, cursor } = state
+
+	if (cursor.col > 0) {
+		// Delete on current line
+		const line = lines[cursor.row]
+		const charIdx = graphemeColToCharIdx(line, cursor.col)
+		const beforeCursor = line.slice(0, charIdx)
+		const match = matchPrevWord(beforeCursor)
+
+		if (!match) {
+			return { state, changed: false }
+		}
+
+		const newCharIdx = charIdx - match.length
+		const newCol = charIdxToGraphemeCol(line, newCharIdx)
+		const newLine = line.slice(0, newCharIdx) + line.slice(charIdx)
+		const newLines = [...lines]
+		newLines[cursor.row] = newLine
+
+		return {
+			state: {
+				lines: newLines,
+				cursor: { row: cursor.row, col: newCol },
+				killRing: match,
+			},
+			changed: true,
+		}
+	} else if (cursor.row > 0) {
+		// At start of line - delete last word of previous line + newline
+		const prevLine = lines[cursor.row - 1]
+		const currentLine = lines[cursor.row]
+		const match = matchPrevWord(prevLine)
+
+		if (match) {
+			const killed = match + "\n"
+			const newPrevLine = prevLine.slice(0, prevLine.length - match.length)
+			const newLines = [...lines]
+			newLines[cursor.row - 1] = newPrevLine + currentLine
+			newLines.splice(cursor.row, 1)
+			const newCol = graphemes(newPrevLine).length
+
+			return {
+				state: {
+					lines: newLines,
+					cursor: { row: cursor.row - 1, col: newCol },
+					killRing: killed,
+				},
+				changed: true,
+			}
+		} else {
+			// Previous line is empty - just kill the newline
+			const newLines = [...lines]
+			newLines[cursor.row - 1] = prevLine + currentLine
+			newLines.splice(cursor.row, 1)
+
+			return {
+				state: {
+					lines: newLines,
+					cursor: { row: cursor.row - 1, col: graphemes(prevLine).length },
+					killRing: "\n",
+				},
+				changed: true,
+			}
+		}
+	}
+
+	return { state, changed: false }
+}
+
+/** Kill to end of line in multiline */
+export function killToEndMultiline(state: MultilineState): EditResult<MultilineState> {
+	const { lines, cursor } = state
+	const line = lines[cursor.row]
+	const charIdx = graphemeColToCharIdx(line, cursor.col)
+	const killed = line.slice(charIdx)
+
+	if (killed) {
+		const newLine = line.slice(0, charIdx)
+		const newLines = [...lines]
+		newLines[cursor.row] = newLine
+		return {
+			state: { lines: newLines, cursor, killRing: killed },
+			changed: true,
+		}
+	} else if (cursor.row < lines.length - 1) {
+		// At end of line - kill the newline (join with next)
+		const newLines = [...lines]
+		newLines[cursor.row] = line + lines[cursor.row + 1]
+		newLines.splice(cursor.row + 1, 1)
+		return {
+			state: { lines: newLines, cursor, killRing: "\n" },
+			changed: true,
+		}
+	}
+
+	return { state, changed: false }
+}
+
+/** Kill to start of line in multiline */
+export function killToStartMultiline(state: MultilineState): EditResult<MultilineState> {
+	const { lines, cursor } = state
+	const line = lines[cursor.row]
+	const charIdx = graphemeColToCharIdx(line, cursor.col)
+	const killed = line.slice(0, charIdx)
+
+	if (!killed) {
+		return { state, changed: false }
+	}
+
+	const newLine = line.slice(charIdx)
+	const newLines = [...lines]
+	newLines[cursor.row] = newLine
+
+	return {
+		state: {
+			lines: newLines,
+			cursor: { row: cursor.row, col: 0 },
+			killRing: killed,
+		},
+		changed: true,
+	}
+}
+
+/** Transpose characters in multiline */
+export function transposeCharsMultiline(state: MultilineState): EditResult<MultilineState> {
+	const { lines, cursor, killRing } = state
+	const line = lines[cursor.row]
+	const gs = graphemes(line)
+
+	if (cursor.col <= 0 || gs.length < 2) {
+		return { state, changed: false }
+	}
+
+	let newGs: string[]
+	let newCol = cursor.col
+
+	if (cursor.col === gs.length) {
+		// At end: swap last two chars
+		newGs = [...gs.slice(0, cursor.col - 2), gs[cursor.col - 1], gs[cursor.col - 2]]
+	} else {
+		// Swap char before cursor with char at cursor
+		newGs = [...gs.slice(0, cursor.col - 1), gs[cursor.col], gs[cursor.col - 1], ...gs.slice(cursor.col + 1)]
+		newCol = cursor.col + 1
+	}
+
+	const newLines = [...lines]
+	newLines[cursor.row] = newGs.join("")
+
+	return {
+		state: {
+			lines: newLines,
+			cursor: { row: cursor.row, col: newCol },
+			killRing,
+		},
+		changed: true,
+	}
+}
+
+/** Delete character at cursor in multiline (joins lines if at end) */
+export function deleteCharForwardMultiline(state: MultilineState): EditResult<MultilineState> {
+	const { lines, cursor, killRing } = state
+	const line = lines[cursor.row]
+	const gs = graphemes(line)
+
+	if (cursor.col < gs.length) {
+		// Delete char at cursor
+		const charIdx = graphemeColToCharIdx(line, cursor.col)
+		const nextCharIdx = graphemeColToCharIdx(line, cursor.col + 1)
+		const newLine = line.slice(0, charIdx) + line.slice(nextCharIdx)
+		const newLines = [...lines]
+		newLines[cursor.row] = newLine
+		return {
+			state: { lines: newLines, cursor, killRing },
+			changed: true,
+		}
+	} else if (cursor.row < lines.length - 1) {
+		// Join with next line
+		const newLines = [...lines]
+		newLines[cursor.row] = line + lines[cursor.row + 1]
+		newLines.splice(cursor.row + 1, 1)
+		return {
+			state: { lines: newLines, cursor, killRing },
+			changed: true,
+		}
+	}
+
+	return { state, changed: false }
+}
+
+/** Delete character before cursor in multiline (joins with previous line if at start) */
+export function deleteCharBackwardMultiline(state: MultilineState): EditResult<MultilineState> {
+	const { lines, cursor, killRing } = state
+	const line = lines[cursor.row]
+
+	if (cursor.col > 0) {
+		// Delete char before cursor
+		const charIdx = graphemeColToCharIdx(line, cursor.col)
+		const prevCharIdx = graphemeColToCharIdx(line, cursor.col - 1)
+		const newLine = line.slice(0, prevCharIdx) + line.slice(charIdx)
+		const newLines = [...lines]
+		newLines[cursor.row] = newLine
+		return {
+			state: {
+				lines: newLines,
+				cursor: { row: cursor.row, col: cursor.col - 1 },
+				killRing,
+			},
+			changed: true,
+		}
+	} else if (cursor.row > 0) {
+		// Join with previous line
+		const prevLine = lines[cursor.row - 1]
+		const prevCol = graphemes(prevLine).length
+		const newLines = [...lines]
+		newLines[cursor.row - 1] = prevLine + line
+		newLines.splice(cursor.row, 1)
+		return {
+			state: {
+				lines: newLines,
+				cursor: { row: cursor.row - 1, col: prevCol },
+				killRing,
+			},
+			changed: true,
+		}
+	}
+
+	return { state, changed: false }
+}
+
+/** Insert text at cursor in multiline (handles newlines) */
+export function insertTextMultiline(state: MultilineState, toInsert: string): EditResult<MultilineState> {
+	const { lines, cursor, killRing } = state
+	if (!toInsert) {
+		return { state, changed: false }
+	}
+
+	const line = lines[cursor.row]
+	const charIdx = graphemeColToCharIdx(line, cursor.col)
+	const beforeCursor = line.slice(0, charIdx)
+	const afterCursor = line.slice(charIdx)
+
+	const insertLines = toInsert.split("\n")
+
+	if (insertLines.length === 1) {
+		// No newlines - simple insert
+		const newLine = beforeCursor + toInsert + afterCursor
+		const newLines = [...lines]
+		newLines[cursor.row] = newLine
+		return {
+			state: {
+				lines: newLines,
+				cursor: { row: cursor.row, col: cursor.col + graphemes(toInsert).length },
+				killRing,
+			},
+			changed: true,
+		}
+	}
+
+	// Has newlines - split into multiple lines
+	const newLines = [...lines]
+	newLines[cursor.row] = beforeCursor + insertLines[0]
+	const middleLines = insertLines.slice(1, -1)
+	const lastInsertLine = insertLines[insertLines.length - 1]
+	newLines.splice(cursor.row + 1, 0, ...middleLines, lastInsertLine + afterCursor)
+
+	return {
+		state: {
+			lines: newLines,
+			cursor: {
+				row: cursor.row + insertLines.length - 1,
+				col: graphemes(lastInsertLine).length,
+			},
+			killRing,
+		},
+		changed: true,
+	}
+}