Repository navigation
Conversation
d4396a7 to
071da45
Compare
- Format markdown tables by padding columns to align content - Use tree-sitter markdown_inline parser to detect concealed characters (backticks, bold **, italic *) - Return transformedContent from highlightOnce for formatted markdown - Add React example demonstrating table formatting with copy-to-clipboard - Add comprehensive tests for table formatting
071da45 to
aa2a84e
Compare
There was a problem hiding this comment.
Pull request overview
This PR adds automatic markdown table alignment functionality that formats table columns by padding cells to align content when rendering. The feature uses Tree-sitter AST parsing to identify tables and calculate display widths that account for concealed markdown formatting characters (backticks, bold/italic markers).
Key Changes:
- Implemented table formatting logic that calculates visual display width (excluding concealed characters) and pads cells accordingly
- Extended the highlighting pipeline to support transformed content that can be different from the original input
- Added comprehensive test coverage for various table formatting scenarios including inline code, bold/italic text, and alignment markers
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react/examples/markdown-table.tsx | Adds a demo application showcasing automatic table alignment with syntax highlighting and clipboard copying functionality |
| packages/core/src/renderables/Code.ts | Integrates transformed content support to display formatted tables instead of original markdown |
| packages/core/src/lib/tree-sitter/parser.worker.ts | Implements core table formatting logic including display width calculation and column alignment with Tree-sitter AST traversal |
| packages/core/src/lib/tree-sitter/client.ts | Updates type definitions to support transformedContent in the highlighting response |
| packages/core/src/lib/tree-sitter/client.test.ts | Adds comprehensive test suite covering various table formatting scenarios and edge cases |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- use tree-sitter AST nodes (pipe_table_cell) instead of string splitting - add conceal parameter to control width calculation for formatting markers - use Bun.stringWidth for proper unicode/emoji terminal width - preserve trailing whitespace after tables - pass conceal setting from CodeRenderable to highlightOnce
|
Here is how table rendering looks like now. Formatting is handled both in conceal and non conceal mode using treesitter AST I added a lot of inline snapshots so you can see how the result looks like. There is a small delay because treesitter parsing runs in the background asynchronously 
|
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
|
You'll probably hate me for this 😬, but I don't like that the formatting happens in the parser worker, that it is type aware and that it re-parses after formatting. I think the formatting should just happen before the markdown source is handed to the parser. I could see it as CodeRenderable |
|
Markdown parsing perspectively: I don't want to use this kind of markdown parsing in opencode long term. I want to have a The flow would be kind of:
That will allow showing fenced code blocks for example with custom background/borders/whatever and it does not have to re-parse the full markdown for every update it gets, only the last block worst case. |
|
I previously implemented this same solution at Opentui level, using Tree-sitter, and it produced really good results: 
However, I ultimately had to delete the PR because it felt more like a hack than a true solution. Also, this is parsing the text on each render. Instead, I moved to a more robust approach and developed a parser at the plugin level that parses the text only once once the |
|
Would you implement the markdown renderable in Zig or TypeScript? I thought about using marked npm package which exposes a fast lexer to find top level AST nodes, then I would use marked parser to render the nodes via opentui renderables Tables could even use CSS grid when it is in Yoga so that they render well even if there is no space horizontally by wrapping the text I don't like much the plugin @franlol because it uses regex to parse the markdown, which probably have unknown bugs and edge cases |
|
@remorses For now it is only possible to do that in typescript. Using the marked package seems fine, as long as it does not re-parse the whole text for every incoming chunk in the stream, but incremental. I think something like @franlol did works well, as markdown is a really simple, small and very well defined set. Simple compared to html or a programming language. Not that much that can go wrong. We should have that formatting by default in opencode. Can we add it as a default plugin maybe? |
|
Markdown parsing is more complex than it looks trust me, using marked is totally worth it |
Automatically formats markdown tables by padding columns to align content when rendering. Using tree sitter AST