Skip to content

fix: fix note component overflow bug #376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
43081j merged 11 commits into from
Aug 25, 2025
Merged

fix: fix note component overflow bug #376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c4bbe7d
fix: fix overflow note component
hyperz111 Aug 12, 2025
f0caf47
edit note component test file, update note component test snapshot, f…
hyperz111 Aug 13, 2025
65fcfce
add changeset
hyperz111 Aug 13, 2025
23b15ef
not overflow when use formatter
hyperz111 Aug 13, 2025
76456be
fix wrapWithFormat
hyperz111 Aug 13, 2025
09608c1
update snapshot
hyperz111 Aug 13, 2025
c718cc6
some refactor
hyperz111 Aug 22, 2025
816c976
some refactor (2)
hyperz111 Aug 22, 2025
ce1e06f
some fix
hyperz111 Aug 22, 2025
8240505
edit test file
hyperz111 Aug 25, 2025
8e68b31
update snapshot
hyperz111 Aug 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/floppy-laws-tan.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@clack/prompts": patch
---

fix note component overflow bug
15 changes: 13 additions & 2 deletions packages/prompts/src/note.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,29 @@ import {
S_CORNER_TOP_RIGHT,
S_STEP_SUBMIT,
} from './common.js';
import { wrapAnsi } from "fast-wrap-ansi";
import process from "node:process";

export interface NoteOptions extends CommonOptions {
format?: (line: string) => string;
}

const defaultNoteFormatter = (line: string): string => color.dim(line);

const wrapWithFormat = (message: string, width: number, format: NoteOptions["format"]): string => {
const wrapMsg = wrapAnsi(message, width).split("\n");
const maxWidthNormal = wrapMsg.reduce((sum, ln) => Math.max(strip(ln).length, sum), 0);
const maxWidthFormat = wrapMsg.map(format).reduce((sum, ln) => Math.max(strip(ln).length, sum), 0);
const wrapWidth = width - (maxWidthFormat - maxWidthNormal);
return wrapAnsi(message, wrapWidth);
}

export const note = (message = '', title = '', opts?: NoteOptions) => {
const output: Writable = opts?.output ?? process.stdout;
const format = opts?.format ?? defaultNoteFormatter;
const lines = ['', ...message.split('\n').map(format), ''];
const wrapMsg = wrapWithFormat(message, output.columns - 6, format);
const lines = ['', ...wrapMsg.split('\n').map(format), ''];
const titleLen = strip(title).length;
const output: Writable = opts?.output ?? process.stdout;
const len =
Math.max(
lines.reduce((sum, ln) => {
Expand Down
148 changes: 148 additions & 0 deletions packages/prompts/test/__snapshots__/note.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,79 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`note (isCI = false) > don't overflow 1`] = `
[
"│
◇ title ──────────────────────────────────────────────────────────────╮
│ │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string │
│ │
├──────────────────────────────────────────────────────────────────────╯
",
]
`;

exports[`note (isCI = false) > don't overflow with formatter 1`] = `
[
"│
◇ title ────────────────────────────────────────────────────────────────╮
│ │
│ * test string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string * │
│ * test string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string * │
│ * test string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string * │
│ * test string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string * │
│ │
├────────────────────────────────────────────────────────────────────────╯
",
]
`;

exports[`note (isCI = false) > formatter which adds colors works 1`] = `
[
"│
Expand Down Expand Up @@ -53,6 +127,80 @@ exports[`note (isCI = false) > renders message with title 1`] = `
]
`;

exports[`note (isCI = true) > don't overflow 1`] = `
[
"│
◇ title ──────────────────────────────────────────────────────────────╮
│ │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string test string │
│ test string test string test string test string test string test │
│ string test string test string test string test string │
│ │
├──────────────────────────────────────────────────────────────────────╯
",
]
`;

exports[`note (isCI = true) > don't overflow with formatter 1`] = `
[
"│
◇ title ────────────────────────────────────────────────────────────────╮
│ │
│ * test string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string * │
│ * test string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string * │
│ * test string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string * │
│ * test string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string test string test string test string test * │
│ * string test string * │
│ │
├────────────────────────────────────────────────────────────────────────╯
",
]
`;

exports[`note (isCI = true) > formatter which adds colors works 1`] = `
[
"│
Expand Down
21 changes: 21 additions & 0 deletions packages/prompts/test/note.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,4 +63,25 @@ describe.each(['true', 'false'])('note (isCI = %s)', (isCI) => {

expect(output.buffer).toMatchSnapshot();
});

test('don\'t overflow', () => {
const input = `${'test string '.repeat(32)}\n`.repeat(4).trim();
prompts.note(input, 'title', {
input,
output: Object.assign(output, { columns: 75 }),
});

expect(output.buffer).toMatchSnapshot();
});

test('don\'t overflow with formatter', () => {
const input = `${'test string '.repeat(32)}\n`.repeat(4).trim();
prompts.note(input, 'title', {
format: (line) => colors.red(`* ${colors.cyan(line)} *`),
input,
output: Object.assign(output, { columns: 75 }),
});

expect(output.buffer).toMatchSnapshot();
});
});
Loading