added table rendering

[PaperBoardOfficial]

Related GitHub Issue

Closes: #4787

Roo Code Task Context (Optional)

Description

I tried different ways. One was the most trivial one: use remark-gfm but it didn't render the tables properly. So, I wrote a custom table parser file. I took inspiration from one of my previous work, though I altered it according to our usecase.
First, I tried plugging the code in MarkdownBlock.tsx but I found out that it only rendered tables when they came wrapped in backticks (```). But this was not good because most of the time llms would return table that are not encapsulated in backticks.
So, I plugged the code in Markdown.tsx file. But the problem came that sometimes the table data came mix with normal text. For example:

Here is your comparison table: Header1 | Header2 |
Value1| Value2

Hence I wrote a function called splitMarkdownAndTables to split the normal text from table.
I have also added 2 test files and 26 unit tests.
If you want to test it, you can prompt Give me difference between proxy and vpn in a table. The code will properly handle tables if they are wrapped in backticks (```) or not. The code will also handle tables which has urls. The code will also handle bold text or strikethrough text.

Test Procedure

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and/or updated tests have been added to cover my changes (if applicable).
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Documentation Updates

Additional Notes

Get in Touch

---

Important

Adds custom table rendering in markdown with splitMarkdownAndTables and TableParser, including extensive tests.

• Behavior:
  • Adds table rendering in Markdown.tsx using splitMarkdownAndTables to separate text and tables.
  • Introduces parseTable in TableParser.tsx to parse and render markdown tables.
  • Handles inline markdown in tables using parseInlineMarkdown in InlineParser.tsx.
• Tests:
  • Adds MarkdownTableIntegration.spec.tsx with 13 tests for markdown table integration.
  • Adds TableParser.spec.tsx with 14 tests for table parsing and inline markdown.
• Misc:
  • Mocks MarkdownBlock and useExtensionState in tests for consistent environment.

^{This description was created by for b990949. You can customize this summary. It will automatically update as commits are pushed.}

[daniel-lxs]

Thanks for the PR. While reviewing the implementation, I noticed this adds quite a bit of complexity with a custom markdown parser for tables separate from the existing MarkdownBlock component. Have you considered whether using remark-gfm (which includes table support) within the existing markdown pipeline might be simpler?

The current implementation certainly works, but I'm wondering if there's a way to reduce the overall complexity and maintenance burden by leveraging the existing markdown processing infrastructure.

[PaperBoardOfficial]

@daniel-lxs Thanks for your reply.
I did try using remark-gfm as it was the most simplest and trivial solution but it didn't even render the raw table. I reviewed some existing issue like #4705 which mentioned remark-gfm and existing PRs like #4790 which used remark-gfm. Also, remark-gfm is already present in webview-ui/package.json, yet no one was able to use it for table rendering. So, considering people have already worked on remark-gfm and it didn't yield outcomes, I prioritised my time on a different solution.
If you believe there is some better solution, please feel free to close this PR.

[daniel-lxs]

Hey @PaperBoardOfficial I came up with this #6252, Let me know what you think!

[PaperBoardOfficial]

Hey @PaperBoardOfficial I came up with this #6252, Let me know what you think!

@daniel-lxs I’m impressed by your vibe, type beat. Way more minimal than mine, fr. You the OG when it comes to coding and already proved you can straight up cook.

[daniel-lxs]

I'm glad you like it, I really appreciate the time you put into this. Thank you!