From e68419bc95b04e05b43f65f3bd43d9efbc3eb662 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Tue, 20 May 2025 18:25:14 +0800
Subject: [PATCH] example: Add resizable feature to HTML, Markdown example.
 (#872)

---
 crates/story/examples/html.rs     | 47 ++++++++++++++-----------
 crates/story/examples/markdown.rs | 58 +++++++++++++++++--------------
 rust-toolchain.toml               |  2 --
 3 files changed, 58 insertions(+), 49 deletions(-)
 delete mode 100644 rust-toolchain.toml

diff --git a/crates/story/examples/html.rs b/crates/story/examples/html.rs
index e6cc589d..8468d8d9 100644
--- a/crates/story/examples/html.rs
+++ b/crates/story/examples/html.rs
@@ -2,9 +2,9 @@ use std::sync::LazyLock;
 
 use gpui::*;
 use gpui_component::{
-    h_flex,
     highlighter::{HighlightTheme, Highlighter},
-    input::{InputState, TextInput},
+    input::{InputState, TabSize, TextInput},
+    resizable::{h_resizable, resizable_panel, ResizableState},
     text::TextView,
     ActiveTheme as _,
 };
@@ -15,6 +15,7 @@ static DARK_THEME: LazyLock<HighlightTheme> = LazyLock::new(|| HighlightTheme::d
 
 pub struct Example {
     input_state: Entity<InputState>,
+    resizable_state: Entity<ResizableState>,
     is_dark: bool,
     _subscribe: Subscription,
 }
@@ -27,10 +28,16 @@ impl Example {
         let input_state = cx.new(|cx| {
             InputState::new(window, cx)
                 .code_editor(Some(LANG), &LIGHT_THEME)
+                .tab_size(TabSize {
+                    tab_size: 4,
+                    hard_tabs: false,
+                })
                 .default_value(EXAMPLE)
                 .placeholder("Enter your HTML here...")
         });
 
+        let resizable_state = ResizableState::new(cx);
+
         let _subscribe = cx.subscribe(
             &input_state,
             |_, _, _: &gpui_component::input::InputEvent, cx| {
@@ -40,6 +47,7 @@ impl Example {
 
         Self {
             input_state,
+            resizable_state,
             is_dark: false,
             _subscribe,
         }
@@ -64,27 +72,26 @@ impl Render for Example {
             });
         }
 
-        h_flex()
-            .h_full()
+        h_resizable("container", self.resizable_state.clone())
             .child(
-                div()
-                    .id("source")
-                    .h_full()
-                    .w_1_2()
-                    .border_r_1()
-                    .border_color(cx.theme().border)
-                    .font_family("Menlo")
-                    .text_size(px(13.))
-                    .child(TextInput::new(&self.input_state).h_full().appearance(false)),
+                resizable_panel().child(
+                    div()
+                        .id("source")
+                        .size_full()
+                        .font_family("Menlo")
+                        .text_size(px(13.))
+                        .child(TextInput::new(&self.input_state).h_full().appearance(false)),
+                ),
             )
             .child(
-                div()
-                    .id("preview")
-                    .h_full()
-                    .w_1_2()
-                    .p_5()
-                    .overflow_y_scroll()
-                    .child(TextView::html("preview", self.input_state.read(cx).value())),
+                resizable_panel().child(
+                    div()
+                        .id("preview")
+                        .size_full()
+                        .p_5()
+                        .overflow_y_scroll()
+                        .child(TextView::html("preview", self.input_state.read(cx).value())),
+                ),
             )
     }
 }
diff --git a/crates/story/examples/markdown.rs b/crates/story/examples/markdown.rs
index f2ee3f9e..873e8ff8 100644
--- a/crates/story/examples/markdown.rs
+++ b/crates/story/examples/markdown.rs
@@ -3,7 +3,8 @@ use std::{rc::Rc, sync::LazyLock};
 use gpui::*;
 use gpui_component::{
     highlighter::{HighlightTheme, Highlighter},
-    input::{InputEvent, InputState, TextInput},
+    input::{InputEvent, InputState, TabSize, TextInput},
+    resizable::{h_resizable, resizable_panel, ResizableState},
     text::{TextView, TextViewStyle},
     ActiveTheme as _,
 };
@@ -15,6 +16,7 @@ const LANG: &str = "markdown";
 
 pub struct Example {
     input_state: Entity<InputState>,
+    resizable_state: Entity<ResizableState>,
     is_dark: bool,
 }
 
@@ -25,15 +27,22 @@ impl Example {
         let input_state = cx.new(|cx| {
             InputState::new(window, cx)
                 .code_editor(Some(LANG), &LIGHT_THEME)
+                .line_number(false)
+                .tab_size(TabSize {
+                    tab_size: 2,
+                    ..Default::default()
+                })
                 .placeholder("Enter your Markdown here...")
                 .default_value(EXAMPLE)
         });
+        let resizable_state = ResizableState::new(cx);
 
         let _subscribe = cx.subscribe(&input_state, |_, _, _: &InputEvent, cx| {
             cx.notify();
         });
 
         Self {
+            resizable_state,
             input_state,
             is_dark: false,
         }
@@ -64,36 +73,31 @@ impl Render for Example {
             });
         }
 
-        div()
-            .flex()
-            .flex_row()
-            .h_full()
+        h_resizable("container", self.resizable_state.clone())
             .child(
-                div()
-                    .id("source")
-                    .h_full()
-                    .w_1_2()
-                    .border_r_1()
-                    .border_color(cx.theme().border)
-                    .flex_1()
-                    .child(TextInput::new(&self.input_state).h_full().appearance(false)),
+                resizable_panel().child(
+                    div()
+                        .id("source")
+                        .size_full()
+                        .child(TextInput::new(&self.input_state).h_full().appearance(false)),
+                ),
             )
             .child(
-                div()
-                    .id("preview")
-                    .h_full()
-                    .w_1_2()
-                    .p_5()
-                    .flex_1()
-                    .overflow_y_scroll()
-                    .child(
-                        TextView::markdown("preview", self.input_state.read(cx).value()).style(
-                            TextViewStyle {
-                                highlight_theme: Rc::new(theme),
-                                ..Default::default()
-                            },
+                resizable_panel().child(
+                    div()
+                        .id("preview")
+                        .size_full()
+                        .p_5()
+                        .overflow_y_scroll()
+                        .child(
+                            TextView::markdown("preview", self.input_state.read(cx).value()).style(
+                                TextViewStyle {
+                                    highlight_theme: Rc::new(theme),
+                                    ..Default::default()
+                                },
+                            ),
                         ),
-                    ),
+                ),
             )
     }
 }
diff --git a/rust-toolchain.toml b/rust-toolchain.toml
deleted file mode 100644
index e7f22fb8..00000000
--- a/rust-toolchain.toml
+++ /dev/null
@@ -1,2 +0,0 @@
-[toolchain]
-channel = "1.86"