Fix markdown tables overflowing/wrapping in TUI (width-aware rendering) (#206)

Fix markdown tables overflowing/wrapping in TUI

packages/tui/test/markdown.test.ts

@@ -164,6 +164,192 @@ describe("Markdown component", () => {
 			assert.ok(plainLines.some((line) => line.includes("Very long column header")));
 			assert.ok(plainLines.some((line) => line.includes("This is a much longer cell content")));
 		});
+
+		it("should wrap table cells when table exceeds available width", () => {
+			const markdown = new Markdown(
+				`| Command | Description | Example |
+| --- | --- | --- |
+| npm install | Install all dependencies | npm install |
+| npm run build | Build the project | npm run build |`,
+				0,
+				0,
+				defaultMarkdownTheme,
+			);
+
+			// Render at narrow width that forces wrapping
+			const lines = markdown.render(50);
+			const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
+
+			// All lines should fit within width
+			for (const line of plainLines) {
+				assert.ok(line.length <= 50, `Line exceeds width 50: "${line}" (length: ${line.length})`);
+			}
+
+			// Content should still be present (possibly wrapped across lines)
+			const allText = plainLines.join(" ");
+			assert.ok(allText.includes("Command"), "Should contain 'Command'");
+			assert.ok(allText.includes("Description"), "Should contain 'Description'");
+			assert.ok(allText.includes("npm install"), "Should contain 'npm install'");
+			assert.ok(allText.includes("Install"), "Should contain 'Install'");
+		});
+
+		it("should wrap long cell content to multiple lines", () => {
+			const markdown = new Markdown(
+				`| Header |
+| --- |
+| This is a very long cell content that should wrap |`,
+				0,
+				0,
+				defaultMarkdownTheme,
+			);
+
+			// Render at width that forces the cell to wrap
+			const lines = markdown.render(25);
+			const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
+
+			// Should have multiple data rows due to wrapping
+			const dataRows = plainLines.filter((line) => line.startsWith("│") && !line.includes("─"));
+			assert.ok(dataRows.length > 2, `Expected wrapped rows, got ${dataRows.length} rows`);
+
+			// All content should be preserved (may be split across lines)
+			const allText = plainLines.join(" ");
+			assert.ok(allText.includes("very long"), "Should preserve 'very long'");
+			assert.ok(allText.includes("cell content"), "Should preserve 'cell content'");
+			assert.ok(allText.includes("should wrap"), "Should preserve 'should wrap'");
+		});
+
+		it("should wrap long unbroken tokens inside table cells (not only at line start)", () => {
+			const url = "https://example.com/this/is/a/very/long/url/that/should/wrap";
+			const markdown = new Markdown(
+				`| Value |
+| --- |
+| prefix ${url} |`,
+				0,
+				0,
+				defaultMarkdownTheme,
+			);
+
+			const width = 30;
+			const lines = markdown.render(width);
+			const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
+
+			for (const line of plainLines) {
+				assert.ok(line.length <= width, `Line exceeds width ${width}: "${line}" (length: ${line.length})`);
+			}
+
+			// Borders should stay intact (exactly 2 vertical borders for a 1-col table)
+			const tableLines = plainLines.filter((line) => line.startsWith("│"));
+			for (const line of tableLines) {
+				const borderCount = line.split("│").length - 1;
+				assert.strictEqual(borderCount, 2, `Expected 2 borders, got ${borderCount}: "${line}"`);
+			}
+
+			// Strip box drawing characters + whitespace so we can assert the URL is preserved
+			// even if it was split across multiple wrapped lines.
+			const extracted = plainLines.join("").replace(/[│├┤─\s]/g, "");
+			assert.ok(extracted.includes("prefix"), "Should preserve 'prefix'");
+			assert.ok(extracted.includes(url), "Should preserve URL");
+		});
+
+		it("should wrap styled inline code inside table cells without breaking borders", () => {
+			const markdown = new Markdown(
+				`| Code |
+| --- |
+| \`averyveryveryverylongidentifier\` |`,
+				0,
+				0,
+				defaultMarkdownTheme,
+			);
+
+			const width = 20;
+			const lines = markdown.render(width);
+			const joinedOutput = lines.join("\n");
+			assert.ok(joinedOutput.includes("\x1b[33m"), "Inline code should be styled (yellow)");
+
+			const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
+			for (const line of plainLines) {
+				assert.ok(line.length <= width, `Line exceeds width ${width}: "${line}" (length: ${line.length})`);
+			}
+
+			const tableLines = plainLines.filter((line) => line.startsWith("│"));
+			for (const line of tableLines) {
+				const borderCount = line.split("│").length - 1;
+				assert.strictEqual(borderCount, 2, `Expected 2 borders, got ${borderCount}: "${line}"`);
+			}
+		});
+
+		it("should handle extremely narrow width gracefully", () => {
+			const markdown = new Markdown(
+				`| A | B | C |
+| --- | --- | --- |
+| 1 | 2 | 3 |`,
+				0,
+				0,
+				defaultMarkdownTheme,
+			);
+
+			// Very narrow width
+			const lines = markdown.render(15);
+			const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
+
+			// Should not crash and should produce output
+			assert.ok(lines.length > 0, "Should produce output");
+
+			// Lines should not exceed width
+			for (const line of plainLines) {
+				assert.ok(line.length <= 15, `Line exceeds width 15: "${line}" (length: ${line.length})`);
+			}
+		});
+
+		it("should render table correctly when it fits naturally", () => {
+			const markdown = new Markdown(
+				`| A | B |
+| --- | --- |
+| 1 | 2 |`,
+				0,
+				0,
+				defaultMarkdownTheme,
+			);
+
+			// Wide width where table fits naturally
+			const lines = markdown.render(80);
+			const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
+
+			// Should have proper table structure
+			const headerLine = plainLines.find((line) => line.includes("A") && line.includes("B"));
+			assert.ok(headerLine, "Should have header row");
+			assert.ok(headerLine?.includes("│"), "Header should have borders");
+
+			const separatorLine = plainLines.find((line) => line.includes("├") && line.includes("┼"));
+			assert.ok(separatorLine, "Should have separator row");
+
+			const dataLine = plainLines.find((line) => line.includes("1") && line.includes("2"));
+			assert.ok(dataLine, "Should have data row");
+		});
+
+		it("should respect paddingX when calculating table width", () => {
+			const markdown = new Markdown(
+				`| Column One | Column Two |
+| --- | --- |
+| Data 1 | Data 2 |`,
+				2, // paddingX = 2
+				0,
+				defaultMarkdownTheme,
+			);
+
+			// Width 40 with paddingX=2 means contentWidth=36
+			const lines = markdown.render(40);
+			const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
+
+			// All lines should respect width
+			for (const line of plainLines) {
+				assert.ok(line.length <= 40, `Line exceeds width 40: "${line}" (length: ${line.length})`);
+			}
+
+			// Table rows should have left padding
+			const tableRow = plainLines.find((line) => line.includes("│"));
+			assert.ok(tableRow?.startsWith("  "), "Table should have left padding");
+		});
 	});
 
 	describe("Combined features", () => {