fix: improve custom input editor rendering

tests/render-helpers.test.ts

@@ -5,6 +5,7 @@ import { renderEditorBlock } from "../src/ui/render-helpers.ts";
 const ABC_PATTERN = /abc/;
 const BORDER_PATTERN = /┌|└/;
 const TYPE_YOUR_PATTERN = /Type your/;
+const SELECTED_BG_PATTERN = /\{selectedBg\}/;
 
 function mockTheme() {
 	return {
@@ -21,7 +22,7 @@ test("renderEditorBlock strips editor borders", () => {
 	const lines: string[] = [];
 	renderEditorBlock({
 		lines,
-		editorLines: ["┌──┐", "│abc│", "└──┘"],
+		editorLines: ["┌──┐", "abc", "└──┘"],
 		width: 40,
 		theme: mockTheme() as never,
 		indent: "   ",
@@ -30,6 +31,7 @@ test("renderEditorBlock strips editor borders", () => {
 
 	assert.equal(lines.length, 1);
 	assert.match(lines[0], ABC_PATTERN);
+	assert.match(lines[0], SELECTED_BG_PATTERN);
 	assert.doesNotMatch(lines[0], BORDER_PATTERN);
 });
 
@@ -37,7 +39,7 @@ test("renderEditorBlock shows a muted placeholder when empty", () => {
 	const lines: string[] = [];
 	renderEditorBlock({
 		lines,
-		editorLines: ["┌──┐", "│  │", "└──┘"],
+		editorLines: ["┌──┐", "  ", "└──┘"],
 		width: 40,
 		theme: mockTheme() as never,
 		indent: "   ",
@@ -48,5 +50,22 @@ test("renderEditorBlock shows a muted placeholder when empty", () => {
 
 	assert.equal(lines.length, 1);
 	assert.match(lines[0], TYPE_YOUR_PATTERN);
+	assert.match(lines[0], SELECTED_BG_PATTERN);
 	assert.doesNotMatch(lines[0], BORDER_PATTERN);
 });
+
+test("renderEditorBlock reapplies background after editor reset sequences", () => {
+	const lines: string[] = [];
+	renderEditorBlock({
+		lines,
+		editorLines: ["┌──┐", "abc\x1b[7m \x1b[0m", "└──┘"],
+		width: 40,
+		theme: mockTheme() as never,
+		indent: "   ",
+		availableWidth: 40,
+	});
+
+	assert.equal(lines.length, 1);
+	assert.match(lines[0], SELECTED_BG_PATTERN);
+	assert(lines[0].includes("\x1b[0m{selectedBg}"));
+});

tests/render-question.test.ts

@@ -19,13 +19,13 @@ function mockTheme() {
 	} as never;
 }
 
-function mockEditor(text = "") {
+function mockEditor(text = "", renderedLines?: string[]) {
 	return {
 		getText() {
 			return text;
 		},
 		render() {
-			return [];
+			return renderedLines ?? [];
 		},
 	} as never;
 }
@@ -56,7 +56,7 @@ test("custom option stays labeled before selection", () => {
 	assert(!lines.some((line) => line.includes("Type your answer...")));
 });
 
-test("selected custom option becomes inline input", () => {
+test("selected custom option keeps its label and renders editor below", () => {
 	let state = createInitialState({
 		questions: [
 			{
@@ -70,7 +70,7 @@ test("selected custom option becomes inline input", () => {
 
 	const lines: string[] = [];
 	renderQuestionScreen({
-		editor: mockEditor(""),
+		editor: mockEditor("", ["┌────┐", "", "└────┘"]),
 		lines,
 		options: getRenderableOptions(state.questions[0]),
 		question: state.questions[0],
@@ -79,6 +79,40 @@ test("selected custom option becomes inline input", () => {
 		width: 80,
 	});
 
+	assert(lines.some((line) => line.includes("Type your own")));
 	assert(lines.some((line) => line.includes("Type your answer...")));
-	assert(!lines.some((line) => line.includes("Type your own answer")));
+});
+
+test("selected multiline custom option renders full editor block", () => {
+	let state = createInitialState({
+		questions: [
+			{
+				id: "q1",
+				prompt: "Pick one",
+				options: [{ value: "a", label: "A" }],
+			},
+		],
+	});
+	state = applyNumberShortcut(state, 2);
+
+	const lines: string[] = [];
+	renderQuestionScreen({
+		editor: mockEditor("first line\nsecond line", [
+			"┌────┐",
+			"first line",
+			"second line",
+			"└────┘",
+		]),
+		lines,
+		options: getRenderableOptions(state.questions[0]),
+		question: state.questions[0],
+		state,
+		theme: mockTheme(),
+		width: 80,
+	});
+
+	assert(lines.some((line) => line.includes("Type your own")));
+	assert(lines.some((line) => line.includes("first line")));
+	assert(lines.some((line) => line.includes("second line")));
+	assert(!lines.some((line) => line.includes("first line second line")));
 });