feat: Add option to hide line numbers in code blocks (#5857)
Co-authored-by: Jacob Richman <jacob314@gmail.com>
This commit is contained in:
parent
69322e12e4
commit
c03ae43777
|
@ -141,6 +141,7 @@ export interface Settings {
|
|||
loadMemoryFromIncludeDirectories?: boolean;
|
||||
|
||||
chatCompression?: ChatCompressionSettings;
|
||||
showLineNumbers?: boolean;
|
||||
}
|
||||
|
||||
export interface SettingsError {
|
||||
|
|
|
@ -41,6 +41,7 @@ import { validateNonInteractiveAuth } from './validateNonInterActiveAuth.js';
|
|||
import { checkForUpdates } from './ui/utils/updateCheck.js';
|
||||
import { handleAutoUpdate } from './utils/handleAutoUpdate.js';
|
||||
import { appEvents, AppEvent } from './utils/events.js';
|
||||
import { SettingsContext } from './ui/contexts/SettingsContext.js';
|
||||
|
||||
export function validateDnsResolutionOrder(
|
||||
order: string | undefined,
|
||||
|
@ -257,12 +258,14 @@ export async function main() {
|
|||
setWindowTitle(basename(workspaceRoot), settings);
|
||||
const instance = render(
|
||||
<React.StrictMode>
|
||||
<AppWrapper
|
||||
config={config}
|
||||
settings={settings}
|
||||
startupWarnings={startupWarnings}
|
||||
version={version}
|
||||
/>
|
||||
<SettingsContext.Provider value={settings}>
|
||||
<AppWrapper
|
||||
config={config}
|
||||
settings={settings}
|
||||
startupWarnings={startupWarnings}
|
||||
version={version}
|
||||
/>
|
||||
</SettingsContext.Provider>
|
||||
</React.StrictMode>,
|
||||
{ exitOnCtrlC: false },
|
||||
);
|
||||
|
|
|
@ -0,0 +1,20 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import React, { useContext } from 'react';
|
||||
import { LoadedSettings } from '../../config/settings.js';
|
||||
|
||||
export const SettingsContext = React.createContext<LoadedSettings | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
export const useSettings = () => {
|
||||
const context = useContext(SettingsContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useSettings must be used within a SettingsProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
|
@ -20,6 +20,7 @@ import {
|
|||
MaxSizedBox,
|
||||
MINIMUM_MAX_HEIGHT,
|
||||
} from '../components/shared/MaxSizedBox.js';
|
||||
import { LoadedSettings } from '../../config/settings.js';
|
||||
|
||||
// Configure theming and parsing utilities.
|
||||
const lowlight = createLowlight(common);
|
||||
|
@ -129,9 +130,11 @@ export function colorizeCode(
|
|||
availableHeight?: number,
|
||||
maxWidth?: number,
|
||||
theme?: Theme,
|
||||
settings?: LoadedSettings,
|
||||
): React.ReactNode {
|
||||
const codeToHighlight = code.replace(/\n$/, '');
|
||||
const activeTheme = theme || themeManager.getActiveTheme();
|
||||
const showLineNumbers = settings?.merged.showLineNumbers ?? true;
|
||||
|
||||
try {
|
||||
// Render the HAST tree using the adapted theme
|
||||
|
@ -167,12 +170,14 @@ export function colorizeCode(
|
|||
|
||||
return (
|
||||
<Box key={index}>
|
||||
<Text color={activeTheme.colors.Gray}>
|
||||
{`${String(index + 1 + hiddenLinesCount).padStart(
|
||||
padWidth,
|
||||
' ',
|
||||
)} `}
|
||||
</Text>
|
||||
{showLineNumbers && (
|
||||
<Text color={activeTheme.colors.Gray}>
|
||||
{`${String(index + 1 + hiddenLinesCount).padStart(
|
||||
padWidth,
|
||||
' ',
|
||||
)} `}
|
||||
</Text>
|
||||
)}
|
||||
<Text color={activeTheme.defaultColor} wrap="wrap">
|
||||
{contentToRender}
|
||||
</Text>
|
||||
|
@ -198,9 +203,11 @@ export function colorizeCode(
|
|||
>
|
||||
{lines.map((line, index) => (
|
||||
<Box key={index}>
|
||||
<Text color={activeTheme.defaultColor}>
|
||||
{`${String(index + 1).padStart(padWidth, ' ')} `}
|
||||
</Text>
|
||||
{showLineNumbers && (
|
||||
<Text color={activeTheme.defaultColor}>
|
||||
{`${String(index + 1).padStart(padWidth, ' ')} `}
|
||||
</Text>
|
||||
)}
|
||||
<Text color={activeTheme.colors.Gray}>{line}</Text>
|
||||
</Box>
|
||||
))}
|
||||
|
|
|
@ -7,6 +7,8 @@
|
|||
import { render } from 'ink-testing-library';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { MarkdownDisplay } from './MarkdownDisplay.js';
|
||||
import { LoadedSettings } from '../../config/settings.js';
|
||||
import { SettingsContext } from '../contexts/SettingsContext.js';
|
||||
|
||||
describe('<MarkdownDisplay />', () => {
|
||||
const baseProps = {
|
||||
|
@ -15,19 +17,32 @@ describe('<MarkdownDisplay />', () => {
|
|||
availableTerminalHeight: 40,
|
||||
};
|
||||
|
||||
const mockSettings = new LoadedSettings(
|
||||
{ path: '', settings: {} },
|
||||
{ path: '', settings: {} },
|
||||
{ path: '', settings: {} },
|
||||
[],
|
||||
);
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('renders nothing for empty text', () => {
|
||||
const { lastFrame } = render(<MarkdownDisplay {...baseProps} text="" />);
|
||||
const { lastFrame } = render(
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text="" />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders a simple paragraph', () => {
|
||||
const text = 'Hello, world.';
|
||||
const { lastFrame } = render(
|
||||
<MarkdownDisplay {...baseProps} text={text} />,
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
});
|
||||
|
@ -40,7 +55,9 @@ describe('<MarkdownDisplay />', () => {
|
|||
#### Header 4
|
||||
`;
|
||||
const { lastFrame } = render(
|
||||
<MarkdownDisplay {...baseProps} text={text} />,
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
});
|
||||
|
@ -48,7 +65,9 @@ describe('<MarkdownDisplay />', () => {
|
|||
it('renders a fenced code block with a language', () => {
|
||||
const text = '```javascript\nconst x = 1;\nconsole.log(x);\n```';
|
||||
const { lastFrame } = render(
|
||||
<MarkdownDisplay {...baseProps} text={text} />,
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
});
|
||||
|
@ -56,7 +75,9 @@ describe('<MarkdownDisplay />', () => {
|
|||
it('renders a fenced code block without a language', () => {
|
||||
const text = '```\nplain text\n```';
|
||||
const { lastFrame } = render(
|
||||
<MarkdownDisplay {...baseProps} text={text} />,
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
});
|
||||
|
@ -64,7 +85,9 @@ describe('<MarkdownDisplay />', () => {
|
|||
it('handles unclosed (pending) code blocks', () => {
|
||||
const text = '```typescript\nlet y = 2;';
|
||||
const { lastFrame } = render(
|
||||
<MarkdownDisplay {...baseProps} text={text} isPending={true} />,
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} isPending={true} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
});
|
||||
|
@ -76,7 +99,9 @@ describe('<MarkdownDisplay />', () => {
|
|||
+ item C
|
||||
`;
|
||||
const { lastFrame } = render(
|
||||
<MarkdownDisplay {...baseProps} text={text} />,
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
});
|
||||
|
@ -88,7 +113,9 @@ describe('<MarkdownDisplay />', () => {
|
|||
* Level 3
|
||||
`;
|
||||
const { lastFrame } = render(
|
||||
<MarkdownDisplay {...baseProps} text={text} />,
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
});
|
||||
|
@ -99,7 +126,9 @@ describe('<MarkdownDisplay />', () => {
|
|||
2. Second item
|
||||
`;
|
||||
const { lastFrame } = render(
|
||||
<MarkdownDisplay {...baseProps} text={text} />,
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
});
|
||||
|
@ -113,7 +142,9 @@ World
|
|||
Test
|
||||
`;
|
||||
const { lastFrame } = render(
|
||||
<MarkdownDisplay {...baseProps} text={text} />,
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
});
|
||||
|
@ -126,7 +157,9 @@ Test
|
|||
| Cell 3 | Cell 4 |
|
||||
`;
|
||||
const { lastFrame } = render(
|
||||
<MarkdownDisplay {...baseProps} text={text} />,
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
});
|
||||
|
@ -138,7 +171,9 @@ Some text before.
|
|||
|---|
|
||||
| 1 | 2 |`;
|
||||
const { lastFrame } = render(
|
||||
<MarkdownDisplay {...baseProps} text={text} />,
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
});
|
||||
|
@ -148,7 +183,9 @@ Some text before.
|
|||
|
||||
Paragraph 2.`;
|
||||
const { lastFrame } = render(
|
||||
<MarkdownDisplay {...baseProps} text={text} />,
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
});
|
||||
|
@ -169,8 +206,39 @@ some code
|
|||
Another paragraph.
|
||||
`;
|
||||
const { lastFrame } = render(
|
||||
<MarkdownDisplay {...baseProps} text={text} />,
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('hides line numbers in code blocks when showLineNumbers is false', () => {
|
||||
const text = '```javascript\nconst x = 1;\n```';
|
||||
const settings = new LoadedSettings(
|
||||
{ path: '', settings: {} },
|
||||
{ path: '', settings: { showLineNumbers: false } },
|
||||
{ path: '', settings: {} },
|
||||
[],
|
||||
);
|
||||
|
||||
const { lastFrame } = render(
|
||||
<SettingsContext.Provider value={settings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
expect(lastFrame()).not.toContain(' 1 ');
|
||||
});
|
||||
|
||||
it('shows line numbers in code blocks by default', () => {
|
||||
const text = '```javascript\nconst x = 1;\n```';
|
||||
const { lastFrame } = render(
|
||||
<SettingsContext.Provider value={mockSettings}>
|
||||
<MarkdownDisplay {...baseProps} text={text} />
|
||||
</SettingsContext.Provider>,
|
||||
);
|
||||
expect(lastFrame()).toMatchSnapshot();
|
||||
expect(lastFrame()).toContain(' 1 ');
|
||||
});
|
||||
});
|
||||
|
|
|
@ -10,6 +10,7 @@ import { Colors } from '../colors.js';
|
|||
import { colorizeCode } from './CodeColorizer.js';
|
||||
import { TableRenderer } from './TableRenderer.js';
|
||||
import { RenderInline } from './InlineMarkdownRenderer.js';
|
||||
import { useSettings } from '../contexts/SettingsContext.js';
|
||||
|
||||
interface MarkdownDisplayProps {
|
||||
text: string;
|
||||
|
@ -298,6 +299,7 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
|
|||
availableTerminalHeight,
|
||||
terminalWidth,
|
||||
}) => {
|
||||
const settings = useSettings();
|
||||
const MIN_LINES_FOR_MESSAGE = 1; // Minimum lines to show before the "generating more" message
|
||||
const RESERVED_LINES = 2; // Lines reserved for the message itself and potential padding
|
||||
|
||||
|
@ -322,6 +324,8 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
|
|||
lang,
|
||||
availableTerminalHeight,
|
||||
terminalWidth - CODE_BLOCK_PREFIX_PADDING,
|
||||
undefined,
|
||||
settings,
|
||||
);
|
||||
return (
|
||||
<Box paddingLeft={CODE_BLOCK_PREFIX_PADDING} flexDirection="column">
|
||||
|
@ -338,6 +342,8 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
|
|||
lang,
|
||||
availableTerminalHeight,
|
||||
terminalWidth - CODE_BLOCK_PREFIX_PADDING,
|
||||
undefined,
|
||||
settings,
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
|
@ -23,6 +23,8 @@ exports[`<MarkdownDisplay /> > handles a table at the end of the input 1`] = `
|
|||
|
||||
exports[`<MarkdownDisplay /> > handles unclosed (pending) code blocks 1`] = `" 1 let y = 2;"`;
|
||||
|
||||
exports[`<MarkdownDisplay /> > hides line numbers in code blocks when showLineNumbers is false 1`] = `" const x = 1;"`;
|
||||
|
||||
exports[`<MarkdownDisplay /> > inserts a single space between paragraphs 1`] = `
|
||||
"Paragraph 1.
|
||||
|
||||
|
@ -87,3 +89,5 @@ exports[`<MarkdownDisplay /> > renders unordered lists with different markers 1`
|
|||
+ item C
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`<MarkdownDisplay /> > shows line numbers in code blocks by default 1`] = `" 1 const x = 1;"`;
|
||||
|
|
Loading…
Reference in New Issue