gpui-component/crates/story/examples/markdown.rs
Jason Lee da85754b96
input: Refactor diagnostics. (#1240)
<img width="613" height="530" alt="image"
src="https://github.com/user-attachments/assets/be86658d-706c-411c-8ba6-09b495208051"
/>

## Break Changes

- The `Markers` has been renamed to use `Diagnostics`.
- The `input::LineNumber` has renamed to `input::Position` and changed
from 1-based to use 0-based.
- Renamed `go_to_line` to `set_cursor_position`, `line_column` to
`cursor_position`.

```diff
- pub fn line_column(&self) -> LineColumn
+ pub fn cursor_position(&self) -> Position

- pub fn go_to_line(&mut self, line: usize, column: Option<usize>, window: &mut Window, cx: &mut Context<Self>)
+ pub fn set_cursor_position(&mut self, position: impl Into<Position>, window: &mut Window, cx: &mut Context<Self>)
```
2025-09-11 16:54:40 +08:00

109 lines
3.4 KiB
Rust

use gpui::*;
use gpui_component::{
highlighter::{HighlightTheme, Language},
input::{InputEvent, InputState, TabSize, TextInput},
resizable::{h_resizable, resizable_panel, ResizableState},
text::{TextView, TextViewStyle},
ActiveTheme as _,
};
use story::Assets;
pub struct Example {
input_state: Entity<InputState>,
resizable_state: Entity<ResizableState>,
_subscriptions: Vec<Subscription>,
}
const EXAMPLE: &str = include_str!("./fixtures/test.md");
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(Language::Markdown)
.line_number(true)
.tab_size(TabSize {
tab_size: 2,
..Default::default()
})
.placeholder("Enter your Markdown here...")
.default_value(EXAMPLE)
});
let resizable_state = ResizableState::new(cx);
let _subscriptions = vec![cx.subscribe(&input_state, |_, _, _: &InputEvent, _| {})];
Self {
resizable_state,
input_state,
_subscriptions,
}
}
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, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
let theme = if cx.theme().mode.is_dark() {
HighlightTheme::default_dark()
} else {
HighlightTheme::default_light()
};
let is_dark = cx.theme().mode.is_dark();
h_resizable("container", self.resizable_state.clone())
.child(
resizable_panel().child(
div()
.id("source")
.size_full()
.font_family("Monaco")
.text_size(px(12.))
.child(
TextInput::new(&self.input_state)
.h_full()
.appearance(false)
.focus_bordered(false),
),
),
)
.child(
resizable_panel().child(
div()
.id("preview")
.size_full()
.p_5()
.overflow_y_scroll()
.child(
TextView::markdown(
"preview",
self.input_state.read(cx).value().clone(),
window,
cx,
)
.selectable()
.style(TextViewStyle {
highlight_theme: theme.clone(),
is_dark,
..Default::default()
}),
),
),
)
}
}
fn main() {
let app = Application::new().with_assets(Assets);
app.run(move |cx| {
story::init(cx);
cx.activate(true);
story::create_new_window("Markdown Editor", Example::view, cx);
});
}