From ffa848fb267e44d8bf58a61adf108350fcddd334 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 26 Feb 2025 15:49:13 +0800
Subject: [PATCH] text_view: Fix markdown table alignment. (#666)

---
 crates/story/examples/markdown.md | 10 ++++----
 crates/ui/src/text/element.rs     | 40 +++++++++++++++++++++++++++++++
 crates/ui/src/text/markdown.rs    |  6 +++++
 3 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/crates/story/examples/markdown.md b/crates/story/examples/markdown.md
index e3f204d6..7f8239b9 100644
--- a/crates/story/examples/markdown.md
+++ b/crates/story/examples/markdown.md
@@ -79,11 +79,11 @@ Here is a link to [Google](https://www.google.com), and another to [Rust](https:
 
 ### Table
 
-| Header 1 | Header 2 | Header 3                             | Header 4 |
-| -------- | -------- | ------------------------------------ | -------- |
-| Cell 0   | Cell 1   | This is a long cell with line break. | Cell 3   |
-| Row 2    | Row 2    | Row 2<br>[Link](https://github.com)  | Row 2    |
-| Row 3    | **Bold** | Row 3                                | Row 3    |
+| Header 1 | Centered | Header 3                             | Align Right |
+| -------- | :------: | ------------------------------------ | ----------: |
+| Cell 0   |  Cell 1  | This is a long cell with line break. |      Cell 3 |
+| Row 2    |  Row 2   | Row 2<br>[Link](https://github.com)  |       Row 2 |
+| Row 3    | **Bold** | Row 3                                |       Row 3 |
 
 #### Lists
 
diff --git a/crates/ui/src/text/element.rs b/crates/ui/src/text/element.rs
index a8c36c49..88573f4d 100644
--- a/crates/ui/src/text/element.rs
+++ b/crates/ui/src/text/element.rs
@@ -6,6 +6,7 @@ use gpui::{
     IntoElement, Length, ObjectFit, ParentElement, RenderOnce, SharedString, SharedUri, Styled,
     StyledImage as _, StyledText, Window,
 };
+use markdown::mdast;
 
 use crate::{h_flex, v_flex, ActiveTheme as _, Icon, IconName};
 
@@ -99,6 +100,32 @@ impl From<String> for Paragraph {
 #[derive(Debug, Default, Clone, PartialEq)]
 pub struct Table {
     pub children: Vec<TableRow>,
+    pub column_aligns: Vec<TableColumnAlign>,
+}
+
+impl Table {
+    pub(crate) fn column_align(&self, index: usize) -> TableColumnAlign {
+        self.column_aligns.get(index).copied().unwrap_or_default()
+    }
+}
+
+#[derive(Debug, Default, Copy, Clone, PartialEq)]
+pub enum TableColumnAlign {
+    #[default]
+    Left,
+    Center,
+    Right,
+}
+
+impl From<mdast::AlignKind> for TableColumnAlign {
+    fn from(value: mdast::AlignKind) -> Self {
+        match value {
+            mdast::AlignKind::None => TableColumnAlign::Left,
+            mdast::AlignKind::Left => TableColumnAlign::Left,
+            mdast::AlignKind::Center => TableColumnAlign::Center,
+            mdast::AlignKind::Right => TableColumnAlign::Right,
+        }
+    }
 }
 
 #[derive(Debug, Default, Clone, PartialEq)]
@@ -461,6 +488,8 @@ impl Node {
                                 .children({
                                     let mut cells = Vec::with_capacity(row.children.len());
                                     for (ix, cell) in row.children.iter().enumerate() {
+                                        let align = table.column_align(ix);
+                                        let is_last_col = ix == row.children.len() - 1;
                                         let len = col_lens
                                             .get(ix)
                                             .copied()
@@ -470,9 +499,20 @@ impl Node {
                                         cells.push(
                                             div()
                                                 .id("cell")
+                                                .flex()
+                                                .when(align == TableColumnAlign::Center, |this| {
+                                                    this.justify_center()
+                                                })
+                                                .when(align == TableColumnAlign::Right, |this| {
+                                                    this.justify_end()
+                                                })
                                                 .w(Length::Definite(relative(len as f32)))
                                                 .px_2()
                                                 .py_1()
+                                                .when(!is_last_col, |this| {
+                                                    this.border_r_1()
+                                                        .border_color(cx.theme().border)
+                                                })
                                                 .truncate()
                                                 .child(cell.children.clone()),
                                         )
diff --git a/crates/ui/src/text/markdown.rs b/crates/ui/src/text/markdown.rs
index 72a08947..984db6b0 100644
--- a/crates/ui/src/text/markdown.rs
+++ b/crates/ui/src/text/markdown.rs
@@ -437,6 +437,12 @@ impl From<mdast::Node> for element::Node {
             Node::ThematicBreak(_) => element::Node::Divider,
             Node::Table(val) => {
                 let mut table = Table::default();
+                table.column_aligns = val
+                    .align
+                    .clone()
+                    .into_iter()
+                    .map(|align| align.into())
+                    .collect();
                 val.children.iter().for_each(|c| {
                     if let Node::TableRow(row) = c {
                         parse_table_row(&mut table, row);