text_view: Add heading_base_font_size to TextViewStyle and fix text wrap for list item. (#670)

- Fix list item to wrap text.

<img width="797" alt="image"
src="https://github.com/user-attachments/assets/9e8156ad-bf58-4d7a-a850-69dfcb56c850"
/>

crates/story/examples/markdown.md

@@ -37,8 +37,8 @@ Here is a link to [Google](https://www.google.com), and another to [Rust](https:
 
 ##### Bulleted List
 
-- Bullet 1
-- Bullet 2
+- Bullet 1, this is very long and needs to be wrapped to the next line, display should be wrapped to the next line as well.
+- Bullet 2, the second bullet item is also long and needs to be wrapped to the next line.
   - Bullet 2.1
     - Bullet 2.1.1
       - Bullet 2.1.1.1
@@ -57,8 +57,8 @@ Here is a link to [Google](https://www.google.com), and another to [Rust](https:
 
 ##### To-Do List
 
-- [x] Task 1
-- [ ] Task 2
+- [x] Task 1, a long long text task, this line is very long and needs to be wrapped to the next line, display should be wrapped to the next line as well.
+- [ ] Task 2, going to do something if there is a long text that needs to be wrapped to the next line.
 - [ ] Task 3
 
 #### Heading for Code

crates/ui/src/text/element.rs

@@ -391,7 +391,10 @@ impl Node {
                             Node::Paragraph(_) => {
                                 items.push(
                                     h_flex()
-                                        .items_center()
+                                        .relative()
+                                        .items_start()
+                                        .content_start()
+                                        .flex_1()
                                         .when(!state.todo && checked.is_none(), |this| {
                                             this.child(list_item_prefix(
                                                 ix,
@@ -400,9 +403,11 @@ impl Node {
                                             ))
                                         })
                                         .when_some(checked, |this, checked| {
+                                            // Checkmark
                                             this.child(
                                                 div()
                                                     .flex()
+                                                    .mt(rems(0.4))
                                                     .mr_1p5()
                                                     .size(rems(0.875))
                                                     .items_center()
@@ -419,16 +424,18 @@ impl Node {
                                                     }),
                                             )
                                         })
-                                        .child(child.render(
-                                            Some(ListState {
-                                                depth: state.depth + 1,
-                                                ordered: state.ordered,
-                                                todo: checked.is_some(),
-                                            }),
-                                            true,
-                                            text_view_style,
-                                            window,
-                                            cx,
+                                        .child(div().flex_1().overflow_hidden().child(
+                                            child.render(
+                                                Some(ListState {
+                                                    depth: state.depth + 1,
+                                                    ordered: state.ordered,
+                                                    todo: checked.is_some(),
+                                                }),
+                                                true,
+                                                text_view_style,
+                                                window,
+                                                cx,
+                                            ),
                                         )),
                                 );
                             }
@@ -578,8 +585,10 @@ impl Node {
                     _ => (rems(1.), FontWeight::NORMAL),
                 };
 
+                let text_size = text_size.to_pixels(text_view_style.heading_base_font_size);
+
                 h_flex()
-                    .mb(rems(0.5))
+                    .mb(rems(0.3))
                     .whitespace_normal()
                     .text_size(text_size)
                     .font_weight(font_weight)

crates/ui/src/text/text_view.rs

@@ -1,4 +1,4 @@
-use gpui::{rems, App, ElementId, IntoElement, Rems, RenderOnce, SharedString, Window};
+use gpui::{px, rems, App, ElementId, IntoElement, Pixels, Rems, RenderOnce, SharedString, Window};
 
 use super::{html::HtmlElement, markdown::MarkdownElement};
 
@@ -67,13 +67,17 @@ impl RenderOnce for Text {
 /// TextViewStyle used to customize the style for [`TextView`].
 #[derive(Copy, Clone)]
 pub struct TextViewStyle {
+    /// Gap of each paragraphs, default is 1 rem.
     pub paragraph_gap: Rems,
+    /// Base font size for headings, default is 14px.
+    pub heading_base_font_size: Pixels,
 }
 
 impl Default for TextViewStyle {
     fn default() -> Self {
         Self {
             paragraph_gap: rems(1.),
+            heading_base_font_size: px(14.),
         }
     }
 }