import assert from "node:assert";
import { afterEach, describe, it } from "node:test";
import type { Terminal as XtermTerminalType } from "@xterm/headless";
import { Chalk } from "chalk";
import { Markdown } from "../src/components/markdown.js";
import { resetCapabilitiesCache, setCapabilities } from "../src/terminal-image.js";
import { type Component, TUI } from "../src/tui.js";
import { defaultMarkdownTheme } from "./test-themes.js";
import { VirtualTerminal } from "./virtual-terminal.js";
const chalk = new Chalk({ level: 3 });
function getCellItalic(terminal: VirtualTerminal, row: number, col: number): number {
const xterm = (terminal as unknown as { xterm: XtermTerminalType }).xterm;
const buffer = xterm.buffer.active;
const line = buffer.getLine(buffer.viewportY + row);
assert.ok(line, `Missing buffer line at row ${row}`);
const cell = line.getCell(col);
assert.ok(cell, `Missing cell at row ${row} col ${col}`);
return cell.isItalic();
}
function getCellUnderline(terminal: VirtualTerminal, row: number, col: number): number {
const xterm = (terminal as unknown as { xterm: XtermTerminalType }).xterm;
const buffer = xterm.buffer.active;
const line = buffer.getLine(buffer.viewportY + row);
assert.ok(line, `Missing buffer line at row ${row}`);
const cell = line.getCell(col);
assert.ok(cell, `Missing cell at row ${row} col ${col}`);
return cell.isUnderline();
}
describe("Markdown component", () => {
describe("Nested lists", () => {
it("should render simple nested list", () => {
const markdown = new Markdown(
`- Item 1
- Nested 1.1
- Nested 1.2
- Item 2`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
assert.ok(lines.length > 0);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
assert.ok(plainLines.some((line) => line.includes("- Item 1")));
assert.ok(plainLines.some((line) => line.includes(" - Nested 1.1")));
assert.ok(plainLines.some((line) => line.includes(" - Nested 1.2")));
assert.ok(plainLines.some((line) => line.includes("- Item 2")));
});
it("should render deeply nested list", () => {
const markdown = new Markdown(
`- Level 1
- Level 2
- Level 3
- Level 4`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
assert.ok(plainLines.some((line) => line.includes("- Level 1")));
assert.ok(plainLines.some((line) => line.includes(" - Level 2")));
assert.ok(plainLines.some((line) => line.includes(" - Level 3")));
assert.ok(plainLines.some((line) => line.includes(" - Level 4")));
});
it("should render ordered nested list", () => {
const markdown = new Markdown(
`1. First
1. Nested first
2. Nested second
2. Second`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
assert.ok(plainLines.some((line) => line.includes("1. First")));
assert.ok(plainLines.some((line) => line.includes(" 1. Nested first")));
assert.ok(plainLines.some((line) => line.includes(" 2. Nested second")));
assert.ok(plainLines.some((line) => line.includes("2. Second")));
});
it("should render mixed ordered and unordered nested lists", () => {
const markdown = new Markdown(
`1. Ordered item
- Unordered nested
- Another nested
2. Second ordered
- More nested`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
assert.ok(plainLines.some((line) => line.includes("1. Ordered item")));
assert.ok(plainLines.some((line) => line.includes(" - Unordered nested")));
assert.ok(plainLines.some((line) => line.includes("2. Second ordered")));
});
it("should maintain numbering when code blocks are not indented (LLM output)", () => {
const markdown = new Markdown(
`1. First item
\`\`\`typescript
// code block
\`\`\`
2. Second item
\`\`\`typescript
// another code block
\`\`\`
3. Third item`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trim());
const numberedLines = plainLines.filter((line) => /^\d+\./.test(line));
assert.strictEqual(numberedLines.length, 3, `Expected 3 numbered items, got: ${numberedLines.join(", ")}`);
assert.ok(numberedLines[0].startsWith("1."), `First item should be "1.", got: ${numberedLines[0]}`);
assert.ok(numberedLines[1].startsWith("2."), `Second item should be "2.", got: ${numberedLines[1]}`);
assert.ok(numberedLines[2].startsWith("3."), `Third item should be "3.", got: ${numberedLines[2]}`);
});
});
describe("Tables", () => {
it("should render simple table", () => {
const markdown = new Markdown(
`| Name | Age |
| --- | --- |
| Alice | 30 |
| Bob | 25 |`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
assert.ok(plainLines.some((line) => line.includes("Name")));
assert.ok(plainLines.some((line) => line.includes("Age")));
assert.ok(plainLines.some((line) => line.includes("Alice")));
assert.ok(plainLines.some((line) => line.includes("Bob")));
assert.ok(plainLines.some((line) => line.includes("│")));
assert.ok(plainLines.some((line) => line.includes("─")));
});
it("should render row dividers between data rows", () => {
const markdown = new Markdown(
`| Name | Age |
| --- | --- |
| Alice | 30 |
| Bob | 25 |`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
const dividerLines = plainLines.filter((line) => line.includes("┼"));
assert.strictEqual(dividerLines.length, 2, "Expected header + row divider");
});
it("should keep column width at least the longest word", () => {
const longestWord = "superlongword";
const markdown = new Markdown(
`| Column One | Column Two |
| --- | --- |
| ${longestWord} short | otherword |
| small | tiny |`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(32);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
const dataLine = plainLines.find((line) => line.includes(longestWord));
assert.ok(dataLine, "Expected data row containing longest word");
const segments = dataLine.split("│").slice(1, -1);
const [firstSegment] = segments;
assert.ok(firstSegment, "Expected first column segment");
const firstColumnWidth = firstSegment.length - 2;
assert.ok(
firstColumnWidth >= longestWord.length,
`Expected first column width >= ${longestWord.length}, got ${firstColumnWidth}`,
);
});
it("should render table with alignment", () => {
const markdown = new Markdown(
`| Left | Center | Right |
| :--- | :---: | ---: |
| A | B | C |
| Long text | Middle | End |`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
assert.ok(plainLines.some((line) => line.includes("Left")));
assert.ok(plainLines.some((line) => line.includes("Center")));
assert.ok(plainLines.some((line) => line.includes("Right")));
assert.ok(plainLines.some((line) => line.includes("Long text")));
});
it("should handle tables with varying column widths", () => {
const markdown = new Markdown(
`| Short | Very long column header |
| --- | --- |
| A | This is a much longer cell content |
| B | Short |`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
assert.ok(lines.length > 0);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
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,
);
const lines = markdown.render(50);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
for (const line of plainLines) {
assert.ok(line.length <= 50, `Line exceeds width 50: "${line}" (length: ${line.length})`);
}
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,
);
const lines = markdown.render(25);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
const dataRows = plainLines.filter((line) => line.startsWith("│") && !line.includes("─"));
assert.ok(dataRows.length > 2, `Expected wrapped rows, got ${dataRows.length} rows`);
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)", () => {
setCapabilities({ images: null, trueColor: false, hyperlinks: false });
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);
resetCapabilitiesCache();
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("│"));
assert.ok(tableLines.length > 0, "Expected table rows to render");
for (const line of tableLines) {
const borderCount = line.split("│").length - 1;
assert.strictEqual(borderCount, 2, `Expected 2 borders, got ${borderCount}: "${line}"`);
}
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 expose wrapped table cell boundaries without changing rendered text", () => {
setCapabilities({ images: null, trueColor: false, hyperlinks: false });
const url = "https://example.com/this/is/a/long/path";
const markdown = new Markdown(
`| URL | Status |
| --- | --- |
| ${url} | ready |`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(32);
resetCapabilitiesCache();
const regions = markdown.getSelectionRegions();
const urlRegions = regions.filter((region) => region.row === 1 && region.column === 0);
const statusRegions = regions.filter((region) => region.row === 1 && region.column === 1);
assert.ok(urlRegions.length > 1, "URL cell should wrap across physical lines");
assert.strictEqual(statusRegions.length, urlRegions.length);
assert.ok(
lines.every((line) => !line.includes("\x1b_pi:table:")),
"metadata markers must be stripped",
);
assert.ok(urlRegions.every((region) => region.table === urlRegions[0].table));
assert.ok(urlRegions.every((region) => region.content === url));
for (let i = 0; i < urlRegions.length; i++) {
assert.strictEqual(urlRegions[i].line, statusRegions[i].line);
assert.ok(urlRegions[i].col + urlRegions[i].width < statusRegions[i].col);
}
});
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,
);
const lines = markdown.render(15);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
assert.ok(lines.length > 0, "Should produce output");
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,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
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,
);
const lines = markdown.render(40);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
for (const line of plainLines) {
assert.ok(line.length <= 40, `Line exceeds width 40: "${line}" (length: ${line.length})`);
}
const tableRow = plainLines.find((line) => line.includes("│"));
assert.ok(tableRow?.startsWith(" "), "Table should have left padding");
});
it("should not add a trailing blank line when table is the last rendered block", () => {
const markdown = new Markdown(
`| Name |
| --- |
| Alice |`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
assert.notStrictEqual(
plainLines.at(-1),
"",
`Expected table to end without a blank line: ${JSON.stringify(plainLines)}`,
);
});
});
describe("Combined features", () => {
it("should render lists and tables together", () => {
const markdown = new Markdown(
`# Test Document
- Item 1
- Nested item
- Item 2
| Col1 | Col2 |
| --- | --- |
| A | B |`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
assert.ok(plainLines.some((line) => line.includes("Test Document")));
assert.ok(plainLines.some((line) => line.includes("- Item 1")));
assert.ok(plainLines.some((line) => line.includes(" - Nested item")));
assert.ok(plainLines.some((line) => line.includes("Col1")));
assert.ok(plainLines.some((line) => line.includes("│")));
});
});
describe("Pre-styled text (thinking traces)", () => {
it("should preserve gray italic styling after inline code", () => {
const markdown = new Markdown(
"This is thinking with `inline code` and more text after",
1,
0,
defaultMarkdownTheme,
{
color: (text) => chalk.gray(text),
italic: true,
},
);
const lines = markdown.render(80);
const joinedOutput = lines.join("\n");
assert.ok(joinedOutput.includes("inline code"));
assert.ok(joinedOutput.includes("\x1b[90m"), "Should have gray color code");
assert.ok(joinedOutput.includes("\x1b[3m"), "Should have italic code");
const hasCodeColor = joinedOutput.includes("\x1b[33m");
assert.ok(hasCodeColor, "Should style inline code");
});
it("should preserve gray italic styling after bold text", () => {
const markdown = new Markdown(
"This is thinking with **bold text** and more after",
1,
0,
defaultMarkdownTheme,
{
color: (text) => chalk.gray(text),
italic: true,
},
);
const lines = markdown.render(80);
const joinedOutput = lines.join("\n");
assert.ok(joinedOutput.includes("bold text"));
assert.ok(joinedOutput.includes("\x1b[90m"), "Should have gray color code");
assert.ok(joinedOutput.includes("\x1b[3m"), "Should have italic code");
assert.ok(joinedOutput.includes("\x1b[1m"), "Should have bold code");
});
it("should not leak styles into following lines when rendered in TUI", async () => {
class MarkdownWithInput implements Component {
public markdownLineCount = 0;
constructor(private readonly markdown: Markdown) {}
render(width: number): string[] {
const lines = this.markdown.render(width);
this.markdownLineCount = lines.length;
return [...lines, "INPUT"];
}
invalidate(): void {
this.markdown.invalidate();
}
}
const markdown = new Markdown("This is thinking with `inline code`", 1, 0, defaultMarkdownTheme, {
color: (text) => chalk.gray(text),
italic: true,
});
const terminal = new VirtualTerminal(80, 6);
const tui = new TUI(terminal);
const component = new MarkdownWithInput(markdown);
tui.addChild(component);
tui.start();
await terminal.waitForRender();
assert.ok(component.markdownLineCount > 0);
const inputRow = component.markdownLineCount;
assert.strictEqual(getCellItalic(terminal, inputRow, 0), 0);
tui.stop();
});
});
describe("Spacing after code blocks", () => {
it("should have only one blank line between code block and following paragraph", () => {
const markdown = new Markdown(
`hello world
\`\`\`js
const hello = "world";
\`\`\`
again, hello world`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
const codeBlockIndex = plainLines.indexOf(' const hello = "world";');
assert.ok(codeBlockIndex !== -1, "Should have code block content");
const afterCodeBlock = plainLines.slice(codeBlockIndex + 1);
const emptyLineCount = afterCodeBlock.findIndex((line) => line !== "");
assert.strictEqual(
emptyLineCount,
1,
`Expected 1 empty line after code block, but found ${emptyLineCount}. Lines after code block: ${JSON.stringify(afterCodeBlock.slice(0, 5))}`,
);
});
it("should not render code fence markers or language labels", () => {
const markdown = new Markdown("```python\nprint('hello')\n```", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
assert.deepStrictEqual(plainLines, [" print('hello')"]);
});
it("should normalize paragraph and code block spacing to one blank line", () => {
const cases = [
`hello this is text
\`\`\`
code block
\`\`\`
more text`,
`hello this is text
\`\`\`
code block
\`\`\`
more text`,
];
const expectedLines = ["hello this is text", "", " code block", "", "more text"];
for (const text of cases) {
const markdown = new Markdown(text, 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
assert.deepStrictEqual(
plainLines,
expectedLines,
`Unexpected spacing for markdown: ${JSON.stringify(text)}`,
);
}
});
it("should not add a trailing blank line when code block is the last rendered block", () => {
const cases = ["```js\nconst hello = 'world';\n```", "hello world\n\n```js\nconst hello = 'world';\n```"];
for (const text of cases) {
const markdown = new Markdown(text, 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
assert.notStrictEqual(
plainLines.at(-1),
"",
`Expected code block to end without a blank line: ${JSON.stringify(plainLines)}`,
);
}
});
});
describe("Spacing after dividers", () => {
it("should have only one blank line between divider and following paragraph", () => {
const markdown = new Markdown(
`hello world
---
again, hello world`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
const dividerIndex = plainLines.findIndex((line) => line.includes("─"));
assert.ok(dividerIndex !== -1, "Should have divider");
const afterDivider = plainLines.slice(dividerIndex + 1);
const emptyLineCount = afterDivider.findIndex((line) => line !== "");
assert.strictEqual(
emptyLineCount,
1,
`Expected 1 empty line after divider, but found ${emptyLineCount}. Lines after divider: ${JSON.stringify(afterDivider.slice(0, 5))}`,
);
});
it("should not add a trailing blank line when divider is the last rendered block", () => {
const markdown = new Markdown("---", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
assert.notStrictEqual(
plainLines.at(-1),
"",
`Expected divider to end without a blank line: ${JSON.stringify(plainLines)}`,
);
});
});
describe("Spacing after headings", () => {
it("should have only one blank line between heading and following paragraph", () => {
const markdown = new Markdown(
`# Hello
This is a paragraph`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
const headingIndex = plainLines.findIndex((line) => line.includes("Hello"));
assert.ok(headingIndex !== -1, "Should have heading");
const afterHeading = plainLines.slice(headingIndex + 1);
const emptyLineCount = afterHeading.findIndex((line) => line !== "");
assert.strictEqual(
emptyLineCount,
1,
`Expected 1 empty line after heading, but found ${emptyLineCount}. Lines after heading: ${JSON.stringify(afterHeading.slice(0, 5))}`,
);
});
it("should not add a trailing blank line when heading is the last rendered block", () => {
const markdown = new Markdown("# Hello", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
assert.notStrictEqual(
plainLines.at(-1),
"",
`Expected heading to end without a blank line: ${JSON.stringify(plainLines)}`,
);
});
});
describe("Spacing after blockquotes", () => {
it("should have only one blank line between blockquote and following paragraph", () => {
const markdown = new Markdown(
`hello world
> This is a quote
again, hello world`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
const quoteIndex = plainLines.findIndex((line) => line.includes("This is a quote"));
assert.ok(quoteIndex !== -1, "Should have blockquote");
const afterQuote = plainLines.slice(quoteIndex + 1);
const emptyLineCount = afterQuote.findIndex((line) => line !== "");
assert.strictEqual(
emptyLineCount,
1,
`Expected 1 empty line after blockquote, but found ${emptyLineCount}. Lines after quote: ${JSON.stringify(afterQuote.slice(0, 5))}`,
);
});
it("should not add a trailing blank line when blockquote is the last rendered block", () => {
const markdown = new Markdown("> This is a quote", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
assert.notStrictEqual(
plainLines.at(-1),
"",
`Expected blockquote to end without a blank line: ${JSON.stringify(plainLines)}`,
);
});
});
describe("Blockquotes with multiline content", () => {
it("should apply consistent styling to all lines in lazy continuation blockquote", () => {
const markdown = new Markdown(
`>Foo
bar`,
0,
0,
defaultMarkdownTheme,
{
color: (text) => chalk.magenta(text), // This should NOT be applied to blockquotes
},
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
const quotedLines = plainLines.filter((line) => line.startsWith("│ "));
assert.strictEqual(quotedLines.length, 2, `Expected 2 quoted lines, got: ${JSON.stringify(plainLines)}`);
const fooLine = lines.find((line) => line.includes("Foo"));
const barLine = lines.find((line) => line.includes("bar"));
assert.ok(fooLine, "Should have Foo line");
assert.ok(barLine, "Should have bar line");
assert.ok(fooLine?.includes("\x1b[3m"), `Foo line should have italic: ${fooLine}`);
assert.ok(barLine?.includes("\x1b[3m"), `bar line should have italic: ${barLine}`);
assert.ok(!fooLine?.includes("\x1b[35m"), `Foo line should NOT have magenta color: ${fooLine}`);
assert.ok(!barLine?.includes("\x1b[35m"), `bar line should NOT have magenta color: ${barLine}`);
});
it("should apply consistent styling to explicit multiline blockquote", () => {
const markdown = new Markdown(
`>Foo
>bar`,
0,
0,
defaultMarkdownTheme,
{
color: (text) => chalk.cyan(text), // This should NOT be applied to blockquotes
},
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
const quotedLines = plainLines.filter((line) => line.startsWith("│ "));
assert.strictEqual(quotedLines.length, 2, `Expected 2 quoted lines, got: ${JSON.stringify(plainLines)}`);
const fooLine = lines.find((line) => line.includes("Foo"));
const barLine = lines.find((line) => line.includes("bar"));
assert.ok(fooLine?.includes("\x1b[3m"), `Foo line should have italic: ${fooLine}`);
assert.ok(barLine?.includes("\x1b[3m"), `bar line should have italic: ${barLine}`);
assert.ok(!fooLine?.includes("\x1b[36m"), `Foo line should NOT have cyan color: ${fooLine}`);
assert.ok(!barLine?.includes("\x1b[36m"), `bar line should NOT have cyan color: ${barLine}`);
});
it("should render list content inside blockquotes", () => {
const markdown = new Markdown(
`> 1. bla bla
> - nested bullet`,
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
const quotedLines = plainLines.filter((line) => line.startsWith("│ "));
assert.ok(
quotedLines.some((line) => line.includes("1. bla bla")),
`Missing ordered list item: ${JSON.stringify(quotedLines)}`,
);
assert.ok(
quotedLines.some((line) => line.includes("- nested bullet")),
`Missing unordered list item: ${JSON.stringify(quotedLines)}`,
);
});
it("should wrap long blockquote lines and add border to each wrapped line", () => {
const longText = "This is a very long blockquote line that should wrap to multiple lines when rendered";
const markdown = new Markdown(`> ${longText}`, 0, 0, defaultMarkdownTheme);
const lines = markdown.render(30);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
const contentLines = plainLines.filter((line) => line.length > 0);
assert.ok(contentLines.length > 1, `Expected multiple wrapped lines, got: ${JSON.stringify(contentLines)}`);
for (const line of contentLines) {
assert.ok(line.startsWith("│ "), `Wrapped line should have quote border: "${line}"`);
}
const allText = contentLines.join(" ");
assert.ok(allText.includes("very long"), "Should preserve 'very long'");
assert.ok(allText.includes("blockquote"), "Should preserve 'blockquote'");
assert.ok(allText.includes("multiple"), "Should preserve 'multiple'");
});
it("should properly indent wrapped blockquote lines with styling", () => {
const markdown = new Markdown(
"> This is styled text that is long enough to wrap",
0,
0,
defaultMarkdownTheme,
{
color: (text) => chalk.yellow(text), // This should NOT be applied to blockquotes
italic: true,
},
);
const lines = markdown.render(25);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd());
const contentLines = plainLines.filter((line) => line.length > 0);
for (const line of contentLines) {
assert.ok(line.startsWith("│ "), `Line should have quote border: "${line}"`);
}
const allOutput = lines.join("\n");
assert.ok(allOutput.includes("\x1b[3m"), "Should have italic");
assert.ok(!allOutput.includes("\x1b[33m"), "Should NOT have yellow color from default style");
});
it("should render inline formatting inside blockquotes and reapply quote styling after", () => {
const markdown = new Markdown("> Quote with **bold** and `code`", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
assert.ok(
plainLines.some((line) => line.startsWith("│ ")),
"Should have quote border",
);
const allPlain = plainLines.join(" ");
assert.ok(allPlain.includes("Quote with"), "Should preserve 'Quote with'");
assert.ok(allPlain.includes("bold"), "Should preserve 'bold'");
assert.ok(allPlain.includes("code"), "Should preserve 'code'");
const allOutput = lines.join("\n");
assert.ok(allOutput.includes("\x1b[1m"), "Should have bold styling");
assert.ok(allOutput.includes("\x1b[33m"), "Should have code styling (yellow)");
assert.ok(allOutput.includes("\x1b[3m"), "Should have italic from quote styling");
});
});
describe("Heading with inline code", () => {
it("should preserve heading styling after inline code", () => {
const markdown = new Markdown("### Why `sourceInfo` should not be optional", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const joinedOutput = lines.join("\n");
assert.ok(joinedOutput.includes("\x1b[33m"), "Should have yellow for inline code");
const afterCodeIndex = joinedOutput.indexOf("should not be optional");
assert.ok(afterCodeIndex > 0, "Should contain text after inline code");
const precedingChunk = joinedOutput.slice(Math.max(0, afterCodeIndex - 40), afterCodeIndex);
assert.ok(
precedingChunk.includes("\x1b[1m"),
`Should re-apply bold before text after code: ${precedingChunk}`,
);
assert.ok(
precedingChunk.includes("\x1b[36m"),
`Should re-apply cyan before text after code: ${precedingChunk}`,
);
});
it("should preserve heading styling after inline code for h1", () => {
const markdown = new Markdown("# Title with `code` inside", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const joinedOutput = lines.join("\n");
const afterCodeIndex = joinedOutput.indexOf("inside");
assert.ok(afterCodeIndex > 0, "Should contain text after inline code");
const precedingChunk = joinedOutput.slice(Math.max(0, afterCodeIndex - 40), afterCodeIndex);
assert.ok(precedingChunk.includes("\x1b[1m"), `Should re-apply bold for h1: ${precedingChunk}`);
assert.ok(precedingChunk.includes("\x1b[36m"), `Should re-apply cyan for h1: ${precedingChunk}`);
assert.ok(precedingChunk.includes("\x1b[4m"), `Should re-apply underline for h1: ${precedingChunk}`);
});
it("should not leak h1 underline into padding when inline code is the last token", async () => {
const markdown = new Markdown("# Important distinction from `open()`", 0, 0, defaultMarkdownTheme);
const terminal = new VirtualTerminal(80, 4);
const tui = new TUI(terminal);
tui.addChild(markdown);
tui.start();
await terminal.waitForRender();
const renderedLine = markdown.render(80)[0];
assert.ok(renderedLine, "Should render heading line");
const contentWidth = renderedLine.replace(/\x1b\[[0-9;]*m/g, "").trimEnd().length;
assert.ok(contentWidth > 0, "Should have visible heading content");
for (let col = contentWidth; col < 80; col++) {
assert.strictEqual(getCellUnderline(terminal, 0, col), 0, `Expected no underline in padding at col ${col}`);
}
tui.stop();
});
it("should preserve heading styling after bold text", () => {
const markdown = new Markdown("## Heading with **bold** and more", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const joinedOutput = lines.join("\n");
const afterBoldIndex = joinedOutput.indexOf("and more");
assert.ok(afterBoldIndex > 0, "Should contain text after bold");
const precedingChunk = joinedOutput.slice(Math.max(0, afterBoldIndex - 40), afterBoldIndex);
assert.ok(precedingChunk.includes("\x1b[1m"), `Should re-apply bold for h2: ${precedingChunk}`);
assert.ok(precedingChunk.includes("\x1b[36m"), `Should re-apply cyan for h2: ${precedingChunk}`);
});
});
describe("Strikethrough syntax", () => {
it("should render ~~text~~ as strikethrough", () => {
const markdown = new Markdown("Use ~~strikethrough~~ here", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const joinedOutput = lines.join("\n");
const joinedPlain = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "")).join(" ");
assert.ok(joinedOutput.includes("\x1b[9m"), "Should apply strikethrough styling");
assert.ok(joinedPlain.includes("strikethrough"), "Should include struck text content");
assert.ok(!joinedPlain.includes("~~strikethrough~~"), "Should not render delimiters as text");
});
it("should keep ~text~ as plain text", () => {
const markdown = new Markdown("Use ~strikethrough~ literally", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const joinedOutput = lines.join("\n");
const joinedPlain = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "")).join(" ");
assert.ok(joinedPlain.includes("~strikethrough~"), "Single-tilde delimiters should remain visible");
assert.ok(!joinedOutput.includes("\x1b[9m"), "Single-tilde text should not use strikethrough styling");
});
});
describe("Links", () => {
afterEach(() => {
resetCapabilitiesCache();
});
it("should not duplicate URL for autolinked emails", () => {
setCapabilities({ images: null, trueColor: false, hyperlinks: false });
const markdown = new Markdown("Contact user@example.com for help", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
const joinedPlain = plainLines.join(" ");
assert.ok(joinedPlain.includes("user@example.com"), "Should contain email");
assert.ok(!joinedPlain.includes("mailto:"), "Should not show mailto: prefix for autolinked emails");
});
it("should not duplicate URL for bare URLs", () => {
setCapabilities({ images: null, trueColor: false, hyperlinks: false });
const markdown = new Markdown("Visit https://example.com for more", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
const joinedPlain = plainLines.join(" ");
const urlCount = (joinedPlain.match(/https:\/\/example\.com/g) || []).length;
assert.strictEqual(urlCount, 1, "URL should appear exactly once");
});
it("should show URL in parentheses when hyperlinks are not supported", () => {
setCapabilities({ images: null, trueColor: false, hyperlinks: false });
const markdown = new Markdown("[click here](https://example.com)", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
const joinedPlain = plainLines.join(" ");
assert.ok(joinedPlain.includes("click here"), "Should contain link text");
assert.ok(joinedPlain.includes("(https://example.com)"), "Should show URL in parentheses");
});
it("should show mailto URL in parentheses when hyperlinks are not supported", () => {
setCapabilities({ images: null, trueColor: false, hyperlinks: false });
const markdown = new Markdown("[Email me](mailto:test@example.com)", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
const joinedPlain = plainLines.join(" ");
assert.ok(joinedPlain.includes("Email me"), "Should contain link text");
assert.ok(joinedPlain.includes("(mailto:test@example.com)"), "Should show mailto URL in parentheses");
});
it("should emit OSC 8 hyperlink sequence when terminal supports hyperlinks", () => {
setCapabilities({ images: null, trueColor: false, hyperlinks: true });
const markdown = new Markdown("[click here](https://example.com)", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const joined = lines.join("");
assert.ok(joined.includes("\x1b]8;;https://example.com\x1b\\"), "Should contain OSC 8 open sequence");
assert.ok(joined.includes("\x1b]8;;\x1b\\"), "Should contain OSC 8 close sequence");
const plainLines = lines.map((line) => line.replace(/\x1b[^a-zA-Z]*[a-zA-Z]|\x1b\].*?\x1b\\/g, ""));
assert.ok(plainLines.join("").includes("click here"), "Should contain link text");
const rawPlain = lines.map((line) =>
line.replace(/\x1b\]8;;[^\x1b]*\x1b\\/g, "").replace(/\x1b\[[0-9;]*m/g, ""),
);
assert.ok(!rawPlain.join("").includes("(https://example.com)"), "URL should not appear inline in parentheses");
});
it("should use OSC 8 for mailto links when terminal supports hyperlinks", () => {
setCapabilities({ images: null, trueColor: false, hyperlinks: true });
const markdown = new Markdown("[Email me](mailto:test@example.com)", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const joined = lines.join("");
assert.ok(
joined.includes("\x1b]8;;mailto:test@example.com\x1b\\"),
"Should contain OSC 8 open with mailto URL",
);
assert.ok(joined.includes("\x1b]8;;\x1b\\"), "Should contain OSC 8 close sequence");
});
it("should use OSC 8 for bare URLs when terminal supports hyperlinks", () => {
setCapabilities({ images: null, trueColor: false, hyperlinks: true });
const markdown = new Markdown("Visit https://example.com for more", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const joined = lines.join("");
assert.ok(joined.includes("\x1b]8;;https://example.com\x1b\\"), "Should contain OSC 8 hyperlink");
const rawPlain = lines.map((line) =>
line.replace(/\x1b\]8;;[^\x1b]*\x1b\\/g, "").replace(/\x1b\[[0-9;]*m/g, ""),
);
assert.ok(!rawPlain.join("").includes("(https://example.com)"), "URL should not appear twice");
});
});
describe("HTML-like tags in text", () => {
it("should render content with HTML-like tags as text", () => {
const markdown = new Markdown(
"This is text with <thinking>hidden content</thinking> that should be visible",
0,
0,
defaultMarkdownTheme,
);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
const joinedPlain = plainLines.join(" ");
assert.ok(
joinedPlain.includes("hidden content") || joinedPlain.includes("<thinking>"),
"Should render HTML-like tags or their content as text, not hide them",
);
});
it("should render HTML tags in code blocks correctly", () => {
const markdown = new Markdown("```html\n<div>Some HTML</div>\n```", 0, 0, defaultMarkdownTheme);
const lines = markdown.render(80);
const plainLines = lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, ""));
const joinedPlain = plainLines.join("\n");
assert.ok(
joinedPlain.includes("<div>") && joinedPlain.includes("</div>"),
"Should render HTML in code blocks",
);
});
});
describe("Streaming identity", () => {
const assertStreamingIdentity = (corpus: string, chunkSize: number, width: number) => {
const streaming = new Markdown("", 1, 1, defaultMarkdownTheme);
let text = "";
for (let offset = 0; offset < corpus.length; offset += chunkSize) {
text += corpus.slice(offset, offset + chunkSize);
streaming.setText(text);
const incremental = streaming.render(width);
const fresh = new Markdown(text, 1, 1, defaultMarkdownTheme).render(width);
assert.deepStrictEqual(
incremental,
fresh,
`Streaming render diverged at ${text.length}/${corpus.length} chars`,
);
}
};
const corpus = [
"# Title",
"",
"Intro paragraph with **bold**, *italic*, and `code` that wraps at narrow widths.",
"",
"- item one",
"- item two",
" - nested",
"- item three",
"",
"```ts",
"function f(x: number) {",
" return x * 2;",
"}",
"```",
"",
"| a | b |",
"| - | - |",
"| 1 | 2 |",
"| 3 | 4 |",
"",
"> quote line that is long enough to wrap when rendered at narrow widths",
"",
"Closing paragraph.",
].join("\n");
it("renders identically when streamed in 3-char chunks", () => {
assertStreamingIdentity(corpus, 3, 60);
});
it("renders identically when streamed in 7-char chunks", () => {
assertStreamingIdentity(corpus, 7, 100);
});
it("handles a code fence that stays unterminated then closes", () => {
assertStreamingIdentity("Some text\n\n```js\nconst a = 1;\nconst b = 2;\n```\n\nAfter fence.", 4, 80);
});
it("handles a paragraph that becomes a setext heading", () => {
assertStreamingIdentity("Heading text\n===\n\nBody paragraph.", 2, 80);
});
it("handles width changes mid-stream", () => {
const streaming = new Markdown("", 1, 1, defaultMarkdownTheme);
let text = "";
const widths = [40, 80, 60, 100];
for (let offset = 0, i = 0; offset < corpus.length; offset += 16, i++) {
text += corpus.slice(offset, offset + 16);
streaming.setText(text);
const width = widths[i % widths.length];
const incremental = streaming.render(width);
const fresh = new Markdown(text, 1, 1, defaultMarkdownTheme).render(width);
assert.deepStrictEqual(incremental, fresh, `Diverged at ${text.length} chars, width ${width}`);
}
});
it("handles invalidate mid-stream", () => {
const streaming = new Markdown("", 1, 1, defaultMarkdownTheme);
let text = "";
for (let offset = 0, i = 0; offset < corpus.length; offset += 16, i++) {
text += corpus.slice(offset, offset + 16);
streaming.setText(text);
if (i % 5 === 4) {
streaming.invalidate();
}
const incremental = streaming.render(80);
const fresh = new Markdown(text, 1, 1, defaultMarkdownTheme).render(80);
assert.deepStrictEqual(incremental, fresh, `Diverged at ${text.length} chars`);
}
});
});
});