5658db42c7
## TODO - [x] Cache highlight result. - [x] Add a `code-editor` example with more languages test. - [x] Support setup font to Input (Base on window scope text style). - [x] Line number - [x] Change font size and font family. - [x] Enter newline to keep indent. - [x] Height with flex_1 - [x] Add to support press `up`, `down` to move cursor to start or end of the selection, if there is selected. - [x] Add `Tab`, `Shift-Tab` to indent or outdent for cursor and selection. - [x] Double click to select at least 1 char. https://github.com/user-attachments/assets/af74862d-15a9-4802-b4b4-2aeb606227ec
101 lines
2.8 KiB
Rust
101 lines
2.8 KiB
Rust
use std::sync::LazyLock;
|
|
|
|
use gpui::*;
|
|
use gpui_component::{
|
|
h_flex,
|
|
highlighter::{HighlightTheme, Highlighter},
|
|
input::{InputState, TextInput},
|
|
text::TextView,
|
|
ActiveTheme as _,
|
|
};
|
|
use story::Assets;
|
|
|
|
static LIGHT_THEME: LazyLock<HighlightTheme> = LazyLock::new(|| HighlightTheme::default_light());
|
|
static DARK_THEME: LazyLock<HighlightTheme> = LazyLock::new(|| HighlightTheme::default_dark());
|
|
|
|
pub struct Example {
|
|
input_state: Entity<InputState>,
|
|
is_dark: bool,
|
|
_subscribe: Subscription,
|
|
}
|
|
|
|
const EXAMPLE: &str = include_str!("./html.html");
|
|
const LANG: &str = "html";
|
|
|
|
impl Example {
|
|
pub fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
|
|
let input_state = cx.new(|cx| {
|
|
InputState::new(window, cx)
|
|
.code_editor(Some(LANG), &LIGHT_THEME)
|
|
.default_value(EXAMPLE)
|
|
.placeholder("Enter your HTML here...")
|
|
});
|
|
|
|
let _subscribe = cx.subscribe(
|
|
&input_state,
|
|
|_, _, _: &gpui_component::input::InputEvent, cx| {
|
|
cx.notify();
|
|
},
|
|
);
|
|
|
|
Self {
|
|
input_state,
|
|
is_dark: false,
|
|
_subscribe,
|
|
}
|
|
}
|
|
|
|
fn view(window: &mut Window, cx: &mut App) -> Entity<Self> {
|
|
cx.new(|cx| Self::new(window, cx))
|
|
}
|
|
}
|
|
|
|
impl Render for Example {
|
|
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
|
|
let is_dark = cx.theme().mode.is_dark();
|
|
if self.is_dark != is_dark {
|
|
self.is_dark = is_dark;
|
|
self.input_state.update(cx, |state, cx| {
|
|
if is_dark {
|
|
state.set_highlighter(Highlighter::new(Some(LANG), &DARK_THEME), cx);
|
|
} else {
|
|
state.set_highlighter(Highlighter::new(Some(LANG), &LIGHT_THEME), cx);
|
|
}
|
|
});
|
|
}
|
|
|
|
h_flex()
|
|
.h_full()
|
|
.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)),
|
|
)
|
|
.child(
|
|
div()
|
|
.id("preview")
|
|
.h_full()
|
|
.w_1_2()
|
|
.p_5()
|
|
.overflow_y_scroll()
|
|
.child(TextView::html("preview", self.input_state.read(cx).value())),
|
|
)
|
|
}
|
|
}
|
|
|
|
fn main() {
|
|
let app = Application::new().with_assets(Assets);
|
|
|
|
app.run(move |cx| {
|
|
story::init(cx);
|
|
cx.activate(true);
|
|
|
|
story::create_new_window("HTML Example", Example::view, cx);
|
|
});
|
|
}
|