[PR #433] [MERGED] feat(core): add MarkdownRenderable with automatic table alignment #1314

New issue

Closed

opened 2026-03-14 09:30:06 +03:00 by kerem · 0 comments

kerem commented

2026-03-14 09:30:06 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/anomalyco/opentui/pull/433
Author: @remorses
Created: 12/19/2025
Status: ✅ Merged
Merged: 1/18/2026
Merged by: @kommander

Base: main ← Head: markdown-renderable

📝 Commits (10+)

9e81930 add MarkdownRenderable with remark-based table alignment
5380957 use marked
34ad30c Create markdown-demo.ts
06d8d5e use marked for real
13079d6 Update markdown-demo.ts
cfd1fad render markdown tables using flexbox columns with box borders
629dfd4 fix conceal toggle by including it in cache key
6236321 format
ef97c6f remove excessive jsdoc comments and fix any cast
9c5575a move markdown tests to renderables folder and add more cases, add markdown types to react and solid

📊 Changes

13 files changed (+3357 additions, -4 deletions)

View changed files

📝 bun.lock (+17 -0)
📝 packages/core/package.json (+1 -0)
📝 packages/core/src/examples/index.ts (+20 -1)
➕ packages/core/src/examples/markdown-demo.ts (+565 -0)
➕ packages/core/src/renderables/Markdown.ts (+840 -0)
➕ packages/core/src/renderables/__tests__/Markdown.test.ts (+1705 -0)
➕ packages/core/src/renderables/__tests__/markdown-parser.test.ts (+128 -0)
📝 packages/core/src/renderables/index.ts (+1 -0)
➕ packages/core/src/renderables/markdown-parser.ts (+61 -0)
📝 packages/react/src/components/index.ts (+2 -0)
📝 packages/react/src/types/components.ts (+7 -1)
📝 packages/solid/src/elements/index.ts (+2 -0)
📝 packages/solid/src/types/elements.ts (+8 -2)

📄 Description

Adds MarkdownRenderable that extends CodeRenderable with markdown-specific features
Uses marked to parse markdown and automatically align table columns based on content width
Accounts for concealed characters (formatting markers like backticks, bold, italic) when calculating column widths
Related to #369 (table alignment) but this implements it as a dedicated Markdown renderable instead of modifying CodeRenderable

Tables are rendered via flexbox boxes:

Here's the current structure:
tableBox (flexDirection: "row")
├── columnBox[0] (flexDirection: "column", border: top/bottom/left)
│   ├── headerBox (border: bottom)
│   │   └── TextRenderable "Emoji" (paddingLeft: 1, paddingRight: 1)
│   ├── cellBox (border: bottom)
│   │   └── TextRenderable "🎉"
│   ├── cellBox (border: bottom)
│   │   └── TextRenderable "🚀"
│   └── TextRenderable "日本語"
│
├── columnBox[1] (flexDirection: "column", border: all sides)
│   ├── headerBox
│   │   └── TextRenderable "Name"
│   ├── cellBox
│   │   └── TextRenderable "Party"
│   ...

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/anomalyco/opentui/pull/433 **Author:** [@remorses](https://github.com/remorses) **Created:** 12/19/2025 **Status:** ✅ Merged **Merged:** 1/18/2026 **Merged by:** [@kommander](https://github.com/kommander) **Base:** `main` ← **Head:** `markdown-renderable` --- ### 📝 Commits (10+) - [`9e81930`](https://github.com/anomalyco/opentui/commit/9e819301548c6b2c48c454e7642ffefd871ac640) add MarkdownRenderable with remark-based table alignment - [`5380957`](https://github.com/anomalyco/opentui/commit/53809577f4c900375447375dba1ac933be6394fb) use marked - [`34ad30c`](https://github.com/anomalyco/opentui/commit/34ad30cbd76390d2d76b5f617379b7c3c795c682) Create markdown-demo.ts - [`06d8d5e`](https://github.com/anomalyco/opentui/commit/06d8d5ec031b6170700bc5a0263f430f5265e2a8) use marked for real - [`13079d6`](https://github.com/anomalyco/opentui/commit/13079d6f45c362ae534a160daee59aceaf5c6a3d) Update markdown-demo.ts - [`cfd1fad`](https://github.com/anomalyco/opentui/commit/cfd1fad3db65610459154476b0ca47967b105c69) render markdown tables using flexbox columns with box borders - [`629dfd4`](https://github.com/anomalyco/opentui/commit/629dfd466025ee0ed5328e13dfe784a3573e514b) fix conceal toggle by including it in cache key - [`6236321`](https://github.com/anomalyco/opentui/commit/6236321b9087c29912b2b9aec4b55967efae41ce) format - [`ef97c6f`](https://github.com/anomalyco/opentui/commit/ef97c6f442a63192937960e0e405b5d4f433e1f6) remove excessive jsdoc comments and fix any cast - [`9c5575a`](https://github.com/anomalyco/opentui/commit/9c5575ac360d8ba30b022ed8cfac64027ca35c53) move markdown tests to renderables folder and add more cases, add markdown types to react and solid ### 📊 Changes **13 files changed** (+3357 additions, -4 deletions) <details> <summary>View changed files</summary> 📝 `bun.lock` (+17 -0) 📝 `packages/core/package.json` (+1 -0) 📝 `packages/core/src/examples/index.ts` (+20 -1) ➕ `packages/core/src/examples/markdown-demo.ts` (+565 -0) ➕ `packages/core/src/renderables/Markdown.ts` (+840 -0) ➕ `packages/core/src/renderables/__tests__/Markdown.test.ts` (+1705 -0) ➕ `packages/core/src/renderables/__tests__/markdown-parser.test.ts` (+128 -0) 📝 `packages/core/src/renderables/index.ts` (+1 -0) ➕ `packages/core/src/renderables/markdown-parser.ts` (+61 -0) 📝 `packages/react/src/components/index.ts` (+2 -0) 📝 `packages/react/src/types/components.ts` (+7 -1) 📝 `packages/solid/src/elements/index.ts` (+2 -0) 📝 `packages/solid/src/types/elements.ts` (+8 -2) </details> ### 📄 Description - Adds `MarkdownRenderable` that extends `CodeRenderable` with markdown-specific features - Uses `marked` to parse markdown and automatically align table columns based on content width - Accounts for concealed characters (formatting markers like backticks, bold, italic) when calculating column widths - Related to #369 (table alignment) but this implements it as a dedicated Markdown renderable instead of modifying CodeRenderable <img width="615" height="1157" alt="Screenshot 2025-12-20 at 00 44 44" src="https://github.com/user-attachments/assets/804b7ab6-29d8-4713-b98d-de1485943c28" /> Tables are rendered via flexbox boxes: ``` Here's the current structure: tableBox (flexDirection: "row") ├── columnBox[0] (flexDirection: "column", border: top/bottom/left) │ ├── headerBox (border: bottom) │ │ └── TextRenderable "Emoji" (paddingLeft: 1, paddingRight: 1) │ ├── cellBox (border: bottom) │ │ └── TextRenderable "🎉" │ ├── cellBox (border: bottom) │ │ └── TextRenderable "🚀" │ └── TextRenderable "日本語" │ ├── columnBox[1] (flexDirection: "column", border: all sides) │ ├── headerBox │ │ └── TextRenderable "Name" │ ├── cellBox │ │ └── TextRenderable "Party" │ ... ``` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>