dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

example: Add resizable feature to HTML, Markdown example. (#872)

Browse source
This commit is contained in:
Jason Lee 2025-05-20 18:25:14 +08:00 committed by GitHub
parent 5658db42c7
commit e68419bc95
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 58 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
crates/story/examples/html.rs
View file

@ -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())),
),
)
}
}

58
crates/story/examples/markdown.rs
View file

@ -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()
},
),
),
),
),
)
}
}

2
rust-toolchain.toml
View file

@ -1,2 +0,0 @@
[toolchain]
channel = "1.86"