@effect-tui/react 0.1.3 → 0.1.5

package/src/components/MultilineTextInput.tsx

@@ -0,0 +1,749 @@
+import { useState, useCallback, useEffect, useMemo, useRef } from "react"
+import { Colors, type Color, displayWidth, graphemes } from "@effect-tui/core"
+import { useKeyboard } from "../hooks/use-keyboard.js"
+import type { DrawContext } from "../hosts/canvas.js"
+import {
+	type MultilineState,
+	graphemeColToCharIdx,
+	deleteWordBackwardMultiline,
+	killToEndMultiline,
+	killToStartMultiline,
+	transposeCharsMultiline,
+	deleteCharForwardMultiline,
+	deleteCharBackwardMultiline,
+	insertTextMultiline,
+	matchPrevWord,
+	matchNextWord,
+} from "./text-editing.js"
+
+export interface MultilineTextInputProps {
+	/** Current input value (controlled) */
+	value: string
+	/** Called when value changes */
+	onChange: (value: string) => void
+	/** Placeholder text shown when value is empty */
+	placeholder?: string
+	/** Width of the input (if omitted, fills available width) */
+	width?: number
+	/** Height of the input (visible lines) */
+	height?: number
+	/** Foreground color for text */
+	fg?: Color
+	/** Background color */
+	bg?: Color
+	/** Cursor foreground color */
+	cursorFg?: Color
+	/** Cursor background color */
+	cursorBg?: Color
+	/** Placeholder foreground color */
+	placeholderFg?: Color
+	/** Line number foreground color */
+	lineNumberFg?: Color
+	/** Called when Escape is pressed */
+	onCancel?: () => void
+	/** Called when Ctrl+Enter or Cmd+Enter is pressed */
+	onSubmit?: (value: string) => void
+	/** Whether the input is focused and accepts input */
+	focused?: boolean
+	/** Show cursor even when not focused */
+	showCursor?: boolean
+	/** Show line numbers (for logical lines) */
+	showLineNumbers?: boolean
+	/** Enable word wrap (default: true) */
+	wordWrap?: boolean
+}
+
+/** Logical cursor position */
+interface CursorPos {
+	row: number // logical line index
+	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) => /\s/.test(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 } {
+	const lineLayout = layout.lines[cursor.row]
+	if (!lineLayout) {
+		return { visualRow: 0, visualCol: 0 }
+	}
+
+	// Find which visual line contains this column
+	let visualRowOffset = 0
+	for (let r = 0; r < cursor.row; r++) {
+		visualRowOffset += layout.lines[r].visualLines.length
+	}
+
+	for (let i = 0; i < lineLayout.visualLines.length; i++) {
+		const vl = lineLayout.visualLines[i]
+		if (cursor.col >= vl.startCol && cursor.col < vl.endCol) {
+			// Cursor is in this visual line
+			const visualCol = lineLayout.prefixWidths[cursor.col] - lineLayout.prefixWidths[vl.startCol]
+			return { visualRow: visualRowOffset + i, visualCol }
+		}
+	}
+
+	// Cursor at end - use last visual line
+	const lastVl = lineLayout.visualLines[lineLayout.visualLines.length - 1]
+	const visualCol = lineLayout.prefixWidths[cursor.col] - lineLayout.prefixWidths[lastVl.startCol]
+	return {
+		visualRow: visualRowOffset + lineLayout.visualLines.length - 1,
+		visualCol,
+	}
+}
+
+/**
+ * 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 {
+	if (visualRow < 0) {
+		return { row: 0, col: 0 }
+	}
+	if (visualRow >= layout.allVisualLines.length) {
+		const lastLine = layout.lines[layout.lines.length - 1]
+		return {
+			row: layout.lines.length - 1,
+			col: lastLine?.graphemeList.length ?? 0,
+		}
+	}
+
+	const vl = layout.allVisualLines[visualRow]
+	const lineLayout = layout.lines[vl.logicalRow]
+
+	// Binary search for the grapheme at targetVisualX
+	let col = vl.startCol
+	let currentX = 0
+	for (let i = vl.startCol; i < vl.endCol; i++) {
+		const w = lineLayout.widths[i]
+		if (currentX + w > targetVisualX) {
+			// If we're past halfway into this char, go to next
+			if (currentX + w / 2 <= targetVisualX) {
+				col = i + 1
+			} else {
+				col = i
+			}
+			break
+		}
+		currentX += w
+		col = i + 1
+	}
+
+	return { row: vl.logicalRow, col: Math.min(col, vl.endCol) }
+}
+
+/**
+ * A controlled multiline text input component for terminal UIs.
+ *
+ * Features:
+ * - Word wrap (fills available width)
+ * - Arrow key navigation between lines (respects visual line breaks)
+ * - Word-by-word navigation with Option/Alt+Arrow
+ * - Emacs keybindings: Ctrl+A/E (start/end of line), Ctrl+B/F (back/forward char),
+ *   Ctrl+H/D (delete back/forward char), Ctrl+K/U (kill to end/start of line),
+ *   Ctrl+W (delete word back), Ctrl+T (transpose), Ctrl+Y (yank),
+ *   Ctrl+N/P (next/previous line)
+ * - Enter inserts newline, Ctrl+Enter/Cmd+Enter submits
+ * - Kill ring for Ctrl+Y (yank last killed text)
+ * - Scrolling when content exceeds visible height
+ * - Optional line numbers
+ *
+ * @example
+ * ```tsx
+ * const [text, setText] = useState("")
+ * <MultilineTextInput
+ *   value={text}
+ *   onChange={setText}
+ *   height={10}
+ * />
+ * ```
+ */
+export function MultilineTextInput({
+	value,
+	onChange,
+	placeholder = "",
+	width,
+	height = 5,
+	fg = Colors.brightWhite,
+	bg,
+	cursorFg = Colors.black,
+	cursorBg = Colors.brightWhite,
+	placeholderFg = Colors.gray(10),
+	lineNumberFg = Colors.gray(12),
+	onCancel,
+	onSubmit,
+	focused = true,
+	showCursor = true,
+	showLineNumbers = false,
+	wordWrap = true,
+}: MultilineTextInputProps) {
+	const logicalLines = useMemo(() => value.split("\n"), [value])
+	const [cursor, setCursor] = useState<CursorPos>({ row: 0, col: 0 })
+	const [scrollY, setScrollY] = useState(0)
+	const [killRing, setKillRing] = useState("")
+	const [preferredVisualX, setPreferredVisualX] = useState(0)
+	// Ref to track whether preferredVisualX should be updated after cursor change
+	// Set to false only during vertical movement, true otherwise
+	const shouldUpdatePreferredXRef = useRef(true)
+
+	// We need to know content width for layout - use a ref updated in draw
+	const [contentWidth, setContentWidth] = useState(80)
+
+	// Calculate line number gutter width
+	const lineNumGutterWidth = showLineNumbers ? String(logicalLines.length).length + 1 : 0
+
+	// 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])
+
+	// Keep cursor in bounds when value changes externally
+	useEffect(() => {
+		const maxRow = Math.max(0, logicalLines.length - 1)
+		const newRow = Math.min(cursor.row, maxRow)
+		const lineGraphemes = layout.lines[newRow]?.graphemeList ?? []
+		const maxCol = lineGraphemes.length
+		const newCol = Math.min(cursor.col, maxCol)
+		if (newRow !== cursor.row || newCol !== cursor.col) {
+			setCursor({ row: newRow, col: newCol })
+		}
+	}, [value, logicalLines, layout.lines, cursor.row, cursor.col])
+
+	// Keep scroll in bounds (visual lines)
+	useEffect(() => {
+		const { visualRow } = logicalToVisual(layout, cursor)
+		if (visualRow < scrollY) {
+			setScrollY(visualRow)
+		} else if (visualRow >= scrollY + height) {
+			setScrollY(visualRow - height + 1)
+		}
+	}, [cursor, layout, scrollY, height])
+
+	// Update preferredVisualX after cursor/layout changes (except during vertical movement)
+	useEffect(() => {
+		if (!shouldUpdatePreferredXRef.current) {
+			// Reset ref for next action
+			shouldUpdatePreferredXRef.current = true
+			return
+		}
+		const { visualCol } = logicalToVisual(layout, cursor)
+		setPreferredVisualX(visualCol)
+	}, [cursor, layout])
+
+	const currentLine = logicalLines[cursor.row] ?? ""
+	const currentLineLayout = layout.lines[cursor.row]
+
+	const handleKey = useCallback(
+		(key: { name: string; text?: string; ctrl?: boolean; meta?: boolean; shift?: boolean }) => {
+			if (!focused) return
+
+			const moveCursor = (row: number, col: number) => {
+				const newRow = Math.max(0, Math.min(logicalLines.length - 1, row))
+				const lineLayout = layout.lines[newRow]
+				const lineLen = lineLayout?.graphemeList.length ?? 0
+				const newCol = Math.max(0, Math.min(lineLen, col))
+				setCursor({ row: newRow, col: newCol })
+				// preferredVisualX will be updated by the effect
+			}
+
+			const moveVisual = (deltaRows: number) => {
+				// Mark that we shouldn't update preferredVisualX after this move
+				shouldUpdatePreferredXRef.current = false
+				const { visualRow } = logicalToVisual(layout, cursor)
+				const newVisualRow = visualRow + deltaRows
+				const newCursor = visualToLogical(layout, newVisualRow, preferredVisualX)
+				setCursor(newCursor)
+			}
+
+			switch (key.name) {
+				case "up":
+					if (key.meta) {
+						// Option+Up: Move to start of document
+						moveCursor(0, 0)
+					} else {
+						moveVisual(-1)
+					}
+					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)
+					}
+					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)
+						} 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)
+						} else if (cursor.row < logicalLines.length - 1) {
+							moveCursor(cursor.row + 1, 0)
+						}
+					}
+					break
+
+				case "home":
+					moveCursor(cursor.row, 0)
+					break
+
+				case "end":
+					moveCursor(cursor.row, currentLineLayout?.graphemeList.length ?? 0)
+					break
+
+				case "backspace":
+					if (key.meta && cursor.col > 0) {
+						// Option+Backspace: Delete previous word
+						const charIdx = graphemeColToCharIdx(currentLine, cursor.col)
+						const beforeCursor = currentLine.slice(0, charIdx)
+						const match = matchPrevWord(beforeCursor)
+						if (match) {
+							const newCharIdx = beforeCursor.length - match.length
+							const newCol = graphemes(currentLine.slice(0, newCharIdx)).length
+							const newLine = currentLine.slice(0, newCharIdx) + currentLine.slice(charIdx)
+							const newLines = [...logicalLines]
+							newLines[cursor.row] = newLine
+							onChange(newLines.join("\n"))
+							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)
+						}
+					}
+					break
+
+				case "delete": {
+					const state: MultilineState = { lines: logicalLines, cursor, killRing }
+					const result = deleteCharForwardMultiline(state)
+					if (result.changed) {
+						onChange(result.state.lines.join("\n"))
+					}
+					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)
+						}
+					}
+					break
+
+				case "escape":
+					onCancel?.()
+					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)
+						}
+					}
+					break
+			}
+		},
+		[
+			value,
+			logicalLines,
+			layout,
+			cursor,
+			currentLine,
+			currentLineLayout,
+			focused,
+			onChange,
+			onSubmit,
+			onCancel,
+			killRing,
+			preferredVisualX,
+		],
+	)
+
+	useKeyboard(handleKey, { phase: "any" })
+
+	const draw = useCallback(
+		(ctx: DrawContext) => {
+			// Update content width for layout calculations
+			const newContentWidth = width ?? ctx.width
+			if (newContentWidth !== contentWidth) {
+				setContentWidth(newContentWidth)
+			}
+
+			const lineNumWidth = showLineNumbers ? String(logicalLines.length).length + 1 : 0
+
+			const isPlaceholder = !value
+			const textColor = isPlaceholder ? placeholderFg : fg
+
+			// Clear with background
+			if (bg !== undefined) {
+				ctx.fill(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 { visualRow: cursorVisualRow } = isPlaceholder ? { visualRow: 0 } : logicalToVisual(layout, cursor)
+
+			// Draw visible visual lines
+			for (let y = 0; y < height && y + scrollY < displayLayout.allVisualLines.length; y++) {
+				const visualIdx = y + scrollY
+				const vl = displayLayout.allVisualLines[visualIdx]
+				const lineLayout = displayLayout.lines[vl.logicalRow]
+
+				let x = 0
+
+				// Draw line number (only on first visual line of logical line)
+				if (showLineNumbers) {
+					if (vl.startCol === 0) {
+						const lineNum = String(vl.logicalRow + 1).padStart(lineNumWidth - 1, " ")
+						ctx.text(0, y, lineNum, { fg: lineNumberFg, bg })
+					}
+					x = lineNumWidth
+				}
+
+				// Draw line content
+				for (let g = vl.startCol; g < vl.endCol; g++) {
+					const grapheme = lineLayout.graphemeList[g]
+					const charWidth = lineLayout.widths[g]
+
+					// Draw cursor if at this position
+					const isCursor = !isPlaceholder && vl.logicalRow === cursor.row && g === cursor.col && focused && showCursor
+
+					if (isCursor) {
+						ctx.text(x, y, grapheme, { fg: cursorFg, bg: cursorBg })
+					} else {
+						ctx.text(x, y, grapheme, { fg: textColor, bg })
+					}
+
+					x += charWidth
+				}
+
+				// Draw cursor at end of visual line if cursor is there
+				if (!isPlaceholder && visualIdx === cursorVisualRow && cursor.col >= vl.endCol && focused && showCursor) {
+					ctx.text(x, y, " ", { fg: cursorFg, bg: cursorBg })
+				}
+			}
+
+			// If placeholder and focused, show cursor at start
+			if (isPlaceholder && focused && showCursor) {
+				const firstChar = placeholder[0] || " "
+				ctx.text(lineNumWidth, 0, firstChar, { fg: cursorFg, bg: cursorBg })
+			}
+		},
+		[
+			value,
+			placeholder,
+			layout,
+			logicalLines,
+			cursor,
+			scrollY,
+			height,
+			focused,
+			showCursor,
+			showLineNumbers,
+			fg,
+			bg,
+			cursorFg,
+			cursorBg,
+			placeholderFg,
+			lineNumberFg,
+			width,
+			contentWidth,
+		],
+	)
+
+	return <canvas draw={draw} width={width} height={height} />
+}