1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
|
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import React from 'react';
import { Text, Box } from 'ink';
import { common, createLowlight } from 'lowlight';
import type {
Root,
Element,
Text as HastText,
ElementContent,
RootContent,
} from 'hast';
import { themeManager } from '../themes/theme-manager.js';
import { Theme } from '../themes/theme.js';
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);
function renderHastNode(
node: Root | Element | HastText | RootContent,
theme: Theme,
inheritedColor: string | undefined,
): React.ReactNode {
if (node.type === 'text') {
// Use the color passed down from parent element, if any
return <Text color={inheritedColor}>{node.value}</Text>;
}
// Handle Element Nodes: Determine color and pass it down, don't wrap
if (node.type === 'element') {
const nodeClasses: string[] =
(node.properties?.['className'] as string[]) || [];
let elementColor: string | undefined = undefined;
// Find color defined specifically for this element's class
for (let i = nodeClasses.length - 1; i >= 0; i--) {
const color = theme.getInkColor(nodeClasses[i]);
if (color) {
elementColor = color;
break;
}
}
// Determine the color to pass down: Use this element's specific color
// if found; otherwise, continue passing down the already inherited color.
const colorToPassDown = elementColor || inheritedColor;
// Recursively render children, passing the determined color down
// Ensure child type matches expected HAST structure (ElementContent is common)
const children = node.children?.map(
(child: ElementContent, index: number) => (
<React.Fragment key={index}>
{renderHastNode(child, theme, colorToPassDown)}
</React.Fragment>
),
);
// Element nodes now only group children; color is applied by Text nodes.
// Use a React Fragment to avoid adding unnecessary elements.
return <React.Fragment>{children}</React.Fragment>;
}
// Handle Root Node: Start recursion with initially inherited color
if (node.type === 'root') {
// Check if children array is empty - this happens when lowlight can't detect language – fall back to plain text
if (!node.children || node.children.length === 0) {
return null;
}
// Pass down the initial inheritedColor (likely undefined from the top call)
// Ensure child type matches expected HAST structure (RootContent is common)
return node.children?.map((child: RootContent, index: number) => (
<React.Fragment key={index}>
{renderHastNode(child, theme, inheritedColor)}
</React.Fragment>
));
}
// Handle unknown or unsupported node types
return null;
}
function highlightAndRenderLine(
line: string,
language: string | null,
theme: Theme,
): React.ReactNode {
try {
const getHighlightedLine = () =>
!language || !lowlight.registered(language)
? lowlight.highlightAuto(line)
: lowlight.highlight(language, line);
const renderedNode = renderHastNode(getHighlightedLine(), theme, undefined);
return renderedNode !== null ? renderedNode : line;
} catch (_error) {
return line;
}
}
export function colorizeLine(
line: string,
language: string | null,
theme?: Theme,
): React.ReactNode {
const activeTheme = theme || themeManager.getActiveTheme();
return highlightAndRenderLine(line, language, activeTheme);
}
/**
* Renders syntax-highlighted code for Ink applications using a selected theme.
*
* @param code The code string to highlight.
* @param language The language identifier (e.g., 'javascript', 'css', 'html')
* @returns A React.ReactNode containing Ink <Text> elements for the highlighted code.
*/
export function colorizeCode(
code: string,
language: string | null,
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
// Apply the theme's default foreground color to the top-level Text element
let lines = codeToHighlight.split('\n');
const padWidth = String(lines.length).length; // Calculate padding width based on number of lines
let hiddenLinesCount = 0;
// Optimization to avoid highlighting lines that cannot possibly be displayed.
if (availableHeight !== undefined) {
availableHeight = Math.max(availableHeight, MINIMUM_MAX_HEIGHT);
if (lines.length > availableHeight) {
const sliceIndex = lines.length - availableHeight;
hiddenLinesCount = sliceIndex;
lines = lines.slice(sliceIndex);
}
}
return (
<MaxSizedBox
maxHeight={availableHeight}
maxWidth={maxWidth}
additionalHiddenLinesCount={hiddenLinesCount}
overflowDirection="top"
>
{lines.map((line, index) => {
const contentToRender = highlightAndRenderLine(
line,
language,
activeTheme,
);
return (
<Box key={index}>
{showLineNumbers && (
<Text color={activeTheme.colors.Gray}>
{`${String(index + 1 + hiddenLinesCount).padStart(
padWidth,
' ',
)} `}
</Text>
)}
<Text color={activeTheme.defaultColor} wrap="wrap">
{contentToRender}
</Text>
</Box>
);
})}
</MaxSizedBox>
);
} catch (error) {
console.error(
`[colorizeCode] Error highlighting code for language "${language}":`,
error,
);
// Fall back to plain text with default color on error
// Also display line numbers in fallback
const lines = codeToHighlight.split('\n');
const padWidth = String(lines.length).length; // Calculate padding width based on number of lines
return (
<MaxSizedBox
maxHeight={availableHeight}
maxWidth={maxWidth}
overflowDirection="top"
>
{lines.map((line, index) => (
<Box key={index}>
{showLineNumbers && (
<Text color={activeTheme.defaultColor}>
{`${String(index + 1).padStart(padWidth, ' ')} `}
</Text>
)}
<Text color={activeTheme.colors.Gray}>{line}</Text>
</Box>
))}
</MaxSizedBox>
);
}
}
|
