1use gpui::{
2 App, AppContext as _, Context, Entity, HighlightStyle, InteractiveText, IntoElement,
3 ParentElement, Render, Styled, StyledText, Window, div, green, red,
4};
5use indoc::indoc;
6use story::*;
7
8pub struct TextStory;
9
10impl TextStory {
11 pub fn model(cx: &mut App) -> Entity<Self> {
12 cx.new(|_| Self)
13 }
14}
15
16impl Render for TextStory {
17 fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
18 Story::container(cx)
19 .child(Story::title("Text", cx))
20 .children(vec![
21 StorySection::new()
22 .child(
23 StoryItem::new("Default", div().bg(gpui::blue()).child("Hello World!"))
24 .usage(indoc! {r##"
25 div()
26 .child("Hello World!")
27 "##
28 }),
29 )
30 .child(
31 StoryItem::new(
32 "Wrapping Text",
33 div().max_w_96().child(concat!(
34 "The quick brown fox jumps over the lazy dog. ",
35 "Meanwhile, the lazy dog decided it was time for a change. ",
36 "He started daily workout routines, ate healthier and became the fastest dog in town.",
37 )),
38 )
39 .description("Set a width or max-width to enable text wrapping.")
40 .usage(indoc! {r##"
41 div()
42 .max_w_96()
43 .child("Some text that you want to wrap.")
44 "##
45 }),
46 )
47 .child(
48 StoryItem::new(
49 "tbd",
50 div().flex().w_96().child(
51 div().overflow_hidden().child(concat!(
52 "flex-row. width 96. overflow-hidden. The quick brown fox jumps over the lazy dog. ",
53 "Meanwhile, the lazy dog decided it was time for a change. ",
54 "He started daily workout routines, ate healthier and became the fastest dog in town.",
55 )),
56 ),
57 ),
58 )
59 .child(
60 StoryItem::new(
61 "Text in Horizontal Flex",
62 div().flex().w_96().bg(red()).child(concat!(
63 "flex-row. width 96. The quick brown fox jumps over the lazy dog. ",
64 "Meanwhile, the lazy dog decided it was time for a change. ",
65 "He started daily workout routines, ate healthier and became the fastest dog in town.",
66 )),
67 )
68 .usage(indoc! {r##"
69 // NOTE: When rendering text in a horizontal flex container,
70 // Taffy will not pass width constraints down from the parent.
71 // To fix this, render text in a parent with overflow: hidden
72
73 div()
74 .max_w_96()
75 .child("Some text that you want to wrap.")
76 "##
77 }),
78 )
79 .child(
80 StoryItem::new(
81 "Interactive Text",
82 InteractiveText::new(
83 "interactive",
84 StyledText::new("Hello world, how is it going?").with_default_highlights(
85 &window.text_style(),
86 [
87 (
88 6..11,
89 HighlightStyle {
90 background_color: Some(green()),
91 ..Default::default()
92 },
93 ),
94 ],
95 ),
96 )
97 .on_click(vec![2..4, 1..3, 7..9], |range_ix, _, _cx| {
98 println!("Clicked range {range_ix}");
99 }),
100 )
101 .usage(indoc! {r##"
102 InteractiveText::new(
103 "interactive",
104 StyledText::new("Hello world, how is it going?").with_highlights(&window.text_style(), [
105 (6..11, HighlightStyle {
106 background_color: Some(green()),
107 ..Default::default()
108 }),
109 ]),
110 )
111 .on_click(vec![2..4, 1..3, 7..9], |range_ix, _cx| {
112 println!("Clicked range {range_ix}");
113 })
114 "##
115 }),
116 ),
117 ])
118 .into_element()
119 }
120}