fix(ui): correct styled table width calculations#20042
Conversation
Summary of ChangesHello @devr0306, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request addresses a long-standing issue where tables displayed in the CLI would often have misaligned columns or unexpected text wrapping when their content included markdown. By introducing a sophisticated markdown parser that correctly interprets and measures the rendered width of styled text, the Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
There was a problem hiding this comment.
Code Review
This pull request addresses an issue with table column width calculation when cells contain markdown by introducing a new markdown-to-ANSI parser for accurate width measurement. While the changes are supported by new tests, the new markdown parsing logic in TableRenderer.tsx duplicates and diverges from the existing InlineMarkdownRenderer.tsx. This creates separate implementations, potentially leading to UI inconsistencies and increased maintenance burden. It is recommended to unify this logic into a single, shared utility.
|
Size Change: +1.54 kB (+0.01%) Total Size: 25.7 MB
ℹ️ View Unchanged
|
jacob314
left a comment
There was a problem hiding this comment.
Test Warnings (Color Resolution): Because the darkTheme configuration intentionally uses an empty string "" for the default Foreground to fall back
to the terminal's default color, passing "" into resolveColor was causing an explosion of [ColorUtils] Could not resolve color "" warnings during
test execution. I added an early return to resolveColor in packages/cli/src/ui/themes/color-utils.ts to cleanly handle empty or whitespace-only
color strings and eliminate the noise.
| @@ -0,0 +1,184 @@ | |||
| /** | |||
There was a problem hiding this comment.
engineering practices tips: when performing a refactor like this you need to do it in a way that minimizes the diff. Right not it is not clear how much of the logic is identical and how much changed. To make this clear you could either keep the parsuingUtils.ts code in InlineMarkdownRenderer.tsx and change the behavior there or first send a PR to move it to parsuingUtils and then a follow up pr in the chain that refactors it to have the new behavior. This way as a human I can review 10X more effectively than in the current form.
There was a problem hiding this comment.
Gemini may be confused but it believes the refactor did make some changes so would be helpful to write in a form that I can productively review.
- Recursive Parsing (Nested Styles)
- Old: Only parsed a single level of markdown. If you provided bold with italic, it would strip the ** markers but render bold with italic
directly as plain text. - New: The parsing is now recursive. When matching markers like ..., ...,
..., or ..., it calls parseMarkdownToANSI on the inner
slice of text. This means nested styles like bold with italic will now correctly render both bold and italic traits.
- Formatted Link Text
- Old: Link labels were treated strictly as plain text. For example, Google would render the raw asterisks.
- New: Because of the recursive capability mentioned above, link text is also recursively parsed. Google will now render "Google" as bold
text alongside the URL.
- Support for *** (Bold + Italic)
- Old: The regex only matched ** or */_. A string like Text would fall back to the bold regex (**), rendering Text in bold (leaving the inner
asterisks visible). - New: The regex was updated to explicitly capture ***.*?***, and a dedicated block was added to apply both chalk.bold() and chalk.italic()
formatting for these tags.
- Output Format
- Old: Emitted an array of React DOM nodes ({...}).
- New: Emits a single pure string containing raw ANSI escape codes using chalk. This string is then passed to a single node back in
InlineMarkdownRenderer.tsx, which allows Ink to apply the ANSI codes itself.
- Error Handling Removed
- Old: The internal loop wrapped tag evaluations in a try...catch block that emitted a debugLogger.warn('Error parsing inline markdown part...', e) if
parsing failed, gracefully failing back to raw text. - New: The try...catch block has been omitted entirely. The code assumes string slice evaluations and recursive calls are strictly safe under the
regex matches.
There was a problem hiding this comment.
I added some changes to make it similar to InlineMarkdownRenderer and here are the major changes now:
- 1, 3, 4 from the things Gemini pointed out
- Got rid of keys for the
<Text/>nodes. Before this, a list of nodes was rendered which required keys but now the string itself is preprocessed and a single node is rendered, leading to no key required. - Added color parsing as well. For now, it only works to parse the text into certain theme colors like
primary,accent, andlink.

Summary
This pull request addresses a long-standing issue where tables displayed in the CLI would often have misaligned columns or unexpected text wrapping when their content included markdown. By introducing a sophisticated markdown parser that correctly interprets and measures the rendered width of styled text, the TableRenderer now ensures that tables maintain their structural integrity and readability, regardless of the complexity of their content. This enhancement significantly improves the visual presentation of information within the command-line interface.
Details
TableRendererandInlineMarkdownRendererto make markdown parsing and rendering consistent and maintainable.Related Issues
Fixes #18942
How to Validate
Ask Gemini "Show me a markdown table with styled characters". The following should work:
Pre-Merge Checklist