From 7582ad3fb3d763ee25ec6218dbefbbe1ecd9f218 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Fri, 28 Feb 2025 11:43:08 +0800 Subject: [PATCH] text_view: Add `heading_base_font_size` to TextViewStyle and fix text wrap for list item. (#670) - Fix list item to wrap text. image --- crates/story/examples/markdown.md | 8 ++++---- crates/ui/src/text/element.rs | 33 ++++++++++++++++++++----------- crates/ui/src/text/text_view.rs | 6 +++++- 3 files changed, 30 insertions(+), 17 deletions(-) diff --git a/crates/story/examples/markdown.md b/crates/story/examples/markdown.md index fcce51b8..9d61cf84 100644 --- a/crates/story/examples/markdown.md +++ b/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 diff --git a/crates/ui/src/text/element.rs b/crates/ui/src/text/element.rs index 8abbed2a..8a1d8908 100644 --- a/crates/ui/src/text/element.rs +++ b/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) diff --git a/crates/ui/src/text/text_view.rs b/crates/ui/src/text/text_view.rs index 4b413629..f9c2bb64 100644 --- a/crates/ui/src/text/text_view.rs +++ b/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.), } } }