fix: improve custom input editor rendering

src/ui/render-helpers.ts

@@ -63,7 +63,6 @@ export function renderEditorBlock(args: {
 		availableWidth,
 		placeholder,
 		placeholderColor = "muted",
-		contentColor = "text",
 		isEmpty = false,
 	} = args;
 	const innerLines =
@@ -87,18 +86,47 @@ export function renderEditorBlock(args: {
 	for (const editorLine of innerLines) {
 		lines.push(
 			truncateToWidth(
-				`${indent}${renderInputLine(
-					editorLine,
-					availableWidth,
-					theme,
-					contentColor
-				)}`,
+				`${indent}${renderEditorLine(editorLine, availableWidth, theme)}`,
 				width
 			)
 		);
 	}
 }
 
+function renderEditorLine(
+	line: string,
+	availableWidth: number,
+	theme: Theme
+): string {
+	const innerWidth = Math.max(4, availableWidth - 2);
+	const truncated = truncateToWidth(line, innerWidth);
+	const padding = " ".repeat(Math.max(0, innerWidth - visibleWidth(truncated)));
+	return renderPersistentBackground(
+		`${truncated}${padding}`,
+		theme,
+		"selectedBg"
+	);
+}
+
+function renderPersistentBackground(
+	text: string,
+	theme: Theme,
+	background: "selectedBg"
+): string {
+	const marker = "__PI_BG_MARKER__";
+	const wrappedMarker = theme.bg(background, marker);
+	const markerIndex = wrappedMarker.indexOf(marker);
+	if (markerIndex === -1) {
+		return theme.bg(background, ` ${text} `);
+	}
+
+	const prefix = wrappedMarker.slice(0, markerIndex);
+	const suffix = wrappedMarker.slice(markerIndex + marker.length);
+	const ansiReset = "\u001b[0m";
+	const reopenedText = text.split(ansiReset).join(`${ansiReset}${prefix}`);
+	return `${prefix} ${reopenedText} ${suffix}`;
+}
+
 export function renderBox(
 	content: Array<{ text: string; color: ThemeColor }>,
 	width: number,

src/ui/render-question.ts

@@ -15,7 +15,6 @@ import {
 	mergeColumns,
 	pushWrappedText,
 	renderEditorBlock,
-	renderInputLine,
 	renderPreviewPaneContent,
 } from "./render-helpers.ts";
 import type {
@@ -436,25 +435,21 @@ function renderInteractiveCustomOption(
 	optionColor: ReturnType<typeof getOptionColor>
 ) {
 	const { lines, editor, theme, width } = context;
-	const label = `${index + 1}. ${prefix}`;
-	const availableWidth = Math.max(
-		1,
-		width - visibleWidth(pointer) - visibleWidth(label)
+	pushWrappedText(
+		lines,
+		`${index + 1}. ${prefix}Type your own`,
+		width,
+		theme,
+		optionColor,
+		pointer,
+		" ".repeat(visibleWidth(pointer))
 	);
-	const text = editor.getText().replace(/\n/g, " ");
-	const hasText = text.trim().length > 0;
-	const inputText = hasText ? text : UI_TEXT.editorPlaceholderInput;
-	const inputColor = hasText ? "text" : "muted";
-	lines.push(
-		truncateToWidth(
-			`${pointer}${theme.fg(optionColor, label)}${renderInputLine(
-				inputText,
-				availableWidth,
-				theme,
-				inputColor
-			)}`,
-			width
-		)
+	renderIndentedEditor(
+		lines,
+		editor,
+		width,
+		theme,
+		UI_TEXT.editorPlaceholderInput
 	);
 }