input: Add to support multi-line Input. (#463)

crates/story/Cargo.toml

@@ -12,6 +12,7 @@ regex = "1"
 chrono = "0.4"
 serde = "1"
 serde_json = "1"
+unindent = "0.2.3"
 
 [lints]
 workspace = true

crates/story/src/input_story.rs

@@ -31,6 +31,7 @@ pub fn init(cx: &mut AppContext) {
 pub struct InputStory {
     input1: View<TextInput>,
     input2: View<TextInput>,
+    textarea: View<TextInput>,
     number_input1_value: i64,
     number_input1: View<NumberInput>,
     number_input2: View<NumberInput>,
@@ -83,6 +84,38 @@ impl InputStory {
         let input2 = cx.new_view(|cx| TextInput::new(cx).placeholder("Enter text here..."));
         cx.subscribe(&input2, Self::on_input_event).detach();
 
+        let textarea = cx.new_view(|cx| {
+            let mut input = TextInput::new(cx)
+                .multi_line()
+                .rows(10)
+                .placeholder("Enter text here...");
+            input.set_text(
+                unindent::unindent(
+                    r#"Hello 世界，this is GPUI component.
+
+                The GPUI Component is a collection of UI components for GPUI framework, including.
+
+                Button, Input, Checkbox, Radio, Dropdown, Tab, and more...
+
+                Here is an application that is built by using GPUI Component.
+
+                > This application is still under development, not published yet.
+
+                ![image](https://github.com/user-attachments/assets/559a648d-19df-4b5a-b563-b78cc79c8894)
+
+                ![image](https://github.com/user-attachments/assets/5e06ad5d-7ea0-43db-8d13-86a240da4c8d)
+
+                ## Demo
+
+                If you want to see the demo, here is a some demo applications.
+                "#,
+                ),
+                cx,
+            );
+            input
+        });
+        cx.subscribe(&textarea, Self::on_input_event).detach();
+
         let number_input1_value = 1;
         let number_input1 = cx.new_view(|cx| {
             let input = NumberInput::new(cx).placeholder("Number Input", cx);
@@ -143,6 +176,7 @@ impl InputStory {
         Self {
             input1,
             input2,
+            textarea,
             number_input1,
             number_input1_value,
             number_input2,
@@ -342,6 +376,7 @@ impl Render for InputStory {
                                     .child(self.number_input2.clone()),
                             ),
                     )
+                    .child(section("Textarea", cx).child(self.textarea.clone()))
                     .child(
                         section("Input State", cx)
                             .child(self.disabled_input.clone())