tiennm99/ccstatusline
1
0 Fork 0
mirror of https://github.com/tiennm99/ccstatusline.git synced 2026-10-14 14:17:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: support Unicode code points >4 hex digits for separators (resolves #133)

Browse Source
This commit is contained in:
Matthew Breedlove committed 2026-03-04 09:31:53 -05:00
1 parent 87fac953aa
commit 7925ec3e9a
1 file changed
+24 -19
Download Patch File Download Diff File Expand all files Collapse all files
src/tui/components/PowerlineSeparatorEditor.tsx
+24 -19
View File
@@ -83,8 +83,9 @@ export const PowerlineSeparatorEditor: React.FC<PowerlineSeparatorEditorProps> =
const inversionText = mode === 'separator' && invertBg ? ' [Inverted]' : '';
return `${preset.char} - ${preset.name}${inversionText}`;
}
const hexCode = char.charCodeAt(0).toString(16).toUpperCase().padStart(4, '0');
return `${char} - Custom (\\u${hexCode})${invertBg ? ' [Inverted]' : ''}`;
const codePoint = char.codePointAt(0) ?? 0;
const hexCode = codePoint.toString(16).toUpperCase().padStart(4, '0');
return `${char} - Custom (U+${hexCode})${invertBg ? ' [Inverted]' : ''}`;
};
const updateSeparators = (newSeparators: string[], newInvertBgs?: boolean[]) => {
@@ -117,24 +118,27 @@ export const PowerlineSeparatorEditor: React.FC<PowerlineSeparatorEditorProps> =
setHexInput('');
setCursorPos(0);
} else if (key.return) {
if (hexInput.length === 4) {
const char = String.fromCharCode(parseInt(hexInput, 16));
const newSeparators = [...separators];
if (separators.length === 0) {
// Add new item if list is empty
newSeparators.push(char);
} else {
newSeparators[selectedIndex] = char;
if (hexInput.length >= 4 && hexInput.length <= 6) {
const codePoint = parseInt(hexInput, 16);
if (codePoint >= 0 && codePoint <= 0x10FFFF) {
const char = String.fromCodePoint(codePoint);
const newSeparators = [...separators];
if (separators.length === 0) {
// Add new item if list is empty
newSeparators.push(char);
} else {
newSeparators[selectedIndex] = char;
}
updateSeparators(newSeparators);
setHexInputMode(false);
setHexInput('');
setCursorPos(0);
}
updateSeparators(newSeparators);
setHexInputMode(false);
setHexInput('');
setCursorPos(0);
}
} else if (key.backspace && cursorPos > 0) {
setHexInput(hexInput.slice(0, cursorPos - 1) + hexInput.slice(cursorPos));
setCursorPos(cursorPos - 1);
} else if (shouldInsertInput(input, key) && /[0-9a-fA-F]/.test(input) && hexInput.length < 4) {
} else if (shouldInsertInput(input, key) && /[0-9a-fA-F]/.test(input) && hexInput.length < 6) {
setHexInput(hexInput.slice(0, cursorPos) + input.toUpperCase() + hexInput.slice(cursorPos));
setCursorPos(cursorPos + 1);
}
@@ -276,20 +280,21 @@ export const PowerlineSeparatorEditor: React.FC<PowerlineSeparatorEditorProps> =
{hexInputMode ? (
<Box marginTop={2} flexDirection='column'>
<Text>
Enter 4-digit hex code for
Enter hex code (4-6 digits) for
{' '}
{mode === 'separator' ? 'separator' : 'cap'}
{separators.length > 0 ? ` ${selectedIndex + 1}` : ''}
:
</Text>
<Text>
\u
U+
{hexInput.slice(0, cursorPos)}
<Text backgroundColor='gray' color='black'>{hexInput[cursorPos] ?? '_'}</Text>
{hexInput.slice(cursorPos + 1)}
{hexInput.length < 4 && hexInput.length === cursorPos && <Text dimColor>{'_'.repeat(4 - hexInput.length - 1)}</Text>}
{hexInput.length < 6 && hexInput.length === cursorPos && <Text dimColor>{'_'.repeat(6 - hexInput.length - 1)}</Text>}
</Text>
<Text dimColor>Enter 4 hex digits (0-9, A-F), then press Enter. ESC to cancel.</Text>
<Text dimColor>Enter 4-6 hex digits (0-9, A-F) for a Unicode code point, then press Enter. ESC to cancel.</Text>
<Text dimColor>Examples: E0B0 (powerline), 1F984 (🦄), 2764 (❤)</Text>
</Box>
) : (
<>