smep 0.1.6

A Simple Markdown Editor & Previewer, written in Rust
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
//! The rendered view: the document as rendered blocks, where the block you
//! click turns into its Markdown source for editing and renders again when
//! you move on (a click elsewhere, or Escape). The document itself stays in
//! the main editor state; every keystroke in a block is written through to it.

use std::ops::Range;

use gpui_kit::base::text::TextView;
use gpui_kit::component::input::{EditorState, Escape, InputEvent, Textarea, TextareaState};
use gpui_kit::component::{ActiveTheme as _, v_flex};
use gpui_kit::prelude::FluentBuilder as _;
use gpui_kit::*;

use crate::highlight;
use crate::insert;
use crate::theme::Palette;

/// What the rendered view tells its owner.
pub enum RenderedEvent {
    /// A lone `/` was typed on an empty line of the active block.
    SlashTyped,
}

/// The block being edited: an editor holding a slice of the document.
///
/// A plain text area rather than a code editor: it is the one input whose
/// height follows its text (auto-grow, wrapped lines included), and a block
/// is only briefly source, so it does without highlighting.
struct ActiveBlock {
    /// Where the editor's text starts in the document.
    start: usize,
    /// How many document bytes the editor's text currently stands for.
    committed_len: usize,
    editor: Entity<TextareaState>,
    _subscriptions: Vec<Subscription>,
}

pub struct RenderedView {
    /// The document. Shared with the source view.
    source: Entity<EditorState>,
    active: Option<ActiveBlock>,
    /// The top-level blocks of `blocks_text`. A whole-document parse costs
    /// as much as the preview's, so it runs only when the text changed in a
    /// way this view did not make itself; its own commits update the
    /// blocks in place from the block's text alone.
    blocks: Vec<Range<usize>>,
    blocks_text: SharedString,
    palette: Option<Palette>,
    /// Reading mode: blocks are shown, never opened for editing.
    read_only: bool,
    focus_handle: FocusHandle,
    scroll: ScrollHandle,
    _subscriptions: Vec<Subscription>,
}

impl EventEmitter<RenderedEvent> for RenderedView {}

impl RenderedView {
    pub fn new(source: Entity<EditorState>, window: &mut Window, cx: &mut Context<Self>) -> Self {
        let subscriptions = vec![
            cx.observe(&source, |_, _, cx| cx.notify()),
            // The active block stands for a range of the document; a change
            // that did not come through it (typing in the source view, undo
            // there) leaves the range stale, so the edit ends.
            cx.subscribe_in(
                &source,
                window,
                |this, _, event: &InputEvent, window, cx| {
                    if let InputEvent::Change = event
                        && !this.active_matches_document(cx)
                    {
                        this.deactivate(window, cx);
                    }
                },
            ),
        ];
        Self {
            source,
            active: None,
            blocks: Vec::new(),
            blocks_text: SharedString::default(),
            palette: None,
            read_only: false,
            focus_handle: cx.focus_handle(),
            scroll: ScrollHandle::new(),
            _subscriptions: subscriptions,
        }
    }

    /// The editor holding the block being edited, if any.
    pub fn active_editor(&self) -> Option<Entity<TextareaState>> {
        self.active.as_ref().map(|active| active.editor.clone())
    }

    pub fn set_palette(&mut self, palette: Option<Palette>, cx: &mut Context<Self>) {
        if self.palette != palette {
            self.palette = palette;
            cx.notify();
        }
    }

    pub fn focus_handle(&self) -> &FocusHandle {
        &self.focus_handle
    }

    #[cfg(test)]
    pub fn is_read_only(&self) -> bool {
        self.read_only
    }

    /// Reading mode on or off. Turning it on ends any edit in progress.
    pub fn set_read_only(&mut self, read_only: bool, window: &mut Window, cx: &mut Context<Self>) {
        if self.read_only == read_only {
            return;
        }
        if read_only {
            self.deactivate(window, cx);
        }
        self.read_only = read_only;
        cx.notify();
    }

    fn text(&self, cx: &App) -> SharedString {
        self.source.read(cx).value()
    }

    /// The top-level blocks of the document as it is now, parsed afresh
    /// only when the text is not the one the blocks were made for.
    fn blocks(&mut self, cx: &App) -> &[Range<usize>] {
        let text = self.text(cx);
        if self.blocks_text != text {
            self.blocks = highlight::block_ranges(&text);
            self.blocks_text = text;
        }
        &self.blocks
    }

    /// The blocks for tests to check against a fresh parse.
    #[cfg(test)]
    pub fn block_ranges(&self) -> Vec<Range<usize>> {
        self.blocks.clone()
    }

    /// The document range the active editor stands for.
    fn active_range(&self) -> Option<Range<usize>> {
        self.active
            .as_ref()
            .map(|active| active.start..active.start + active.committed_len)
    }

    /// Whether the document still holds the active editor's text where the
    /// editor stands. True with no active block.
    fn active_matches_document(&self, cx: &App) -> bool {
        let Some(active) = self.active.as_ref() else {
            return true;
        };
        let range = active.start..active.start + active.committed_len;
        let document = self.text(cx);
        document.get(range) == Some(active.editor.read(cx).value().as_ref())
    }

    /// Edit the block whose text sits at `range` in the document.
    pub fn activate(&mut self, range: Range<usize>, window: &mut Window, cx: &mut Context<Self>) {
        if self.read_only || self.active_range() == Some(range.clone()) {
            return;
        }
        self.deactivate(window, cx);

        let text = self.text(cx);
        let block = text.get(range.clone()).unwrap_or_default().to_string();
        let editor = cx.new(|cx| {
            TextareaState::new(window, cx)
                .default_value(block.clone())
                .auto_grow(1, usize::MAX)
                .soft_wrap(true)
                .placeholder("Type here. / inserts a block.")
        });
        editor.update(cx, |state, cx| {
            let end = state.text().len();
            state.set_selected_range(end..end, cx);
            state.focus(window, cx);
        });

        let subscriptions = vec![
            cx.subscribe_in(
                &editor,
                window,
                |this, editor, event: &InputEvent, window, cx| {
                    if let InputEvent::Change = event {
                        this.commit(window, cx);
                        let state = editor.read(cx);
                        if insert::cursor_line_trimmed(state) == "/"
                            && state.cursor() == insert::cursor_line_range(state).end
                        {
                            cx.emit(RenderedEvent::SlashTyped);
                        }
                        cx.notify();
                    }
                },
            ),
            cx.observe(&editor, |_, _, cx| cx.notify()),
        ];

        self.active = Some(ActiveBlock {
            start: range.start,
            committed_len: range.len(),
            editor,
            _subscriptions: subscriptions,
        });
        cx.notify();
    }

    /// Start a new block after the last one (a click below the text).
    pub fn activate_at_end(&mut self, window: &mut Window, cx: &mut Context<Self>) {
        let end = self.text(cx).len();
        self.activate(end..end, window, cx);
    }

    /// Stop editing; the text is already in the document. Focus comes back
    /// to the view so the window's shortcuts keep working.
    pub fn deactivate(&mut self, window: &mut Window, cx: &mut Context<Self>) {
        if self.active.take().is_some() {
            self.focus_handle.focus(window, cx);
            cx.notify();
        }
    }

    /// Write the active editor's text into the document in place of what it
    /// stood for. A block that starts right after other text gets the blank
    /// line Markdown needs to keep it a block of its own.
    fn commit(&mut self, window: &mut Window, cx: &mut Context<Self>) {
        let Some(active) = self.active.as_mut() else {
            return;
        };
        let typed = active.editor.read(cx).value();
        let range = active.start..active.start + active.committed_len;
        let document = self.source.read(cx).value();
        let before = &document[..range.start];
        let needs_gap =
            !before.is_empty() && !before.ends_with("\n\n") && !before.ends_with("\r\n\r\n");
        let text = if needs_gap && !typed.is_empty() && active.committed_len == 0 {
            // The first commit into a brand-new block at the end.
            let newline = if before.contains("\r\n") {
                "\r\n"
            } else {
                "\n"
            };
            let missing = if before.ends_with(newline) { 1 } else { 2 };
            format!("{}{}", newline.repeat(missing), typed)
        } else {
            typed.to_string()
        };

        // Since a gap was inserted, the editor's text starts later.
        active.start += text.len() - typed.len();
        active.committed_len = typed.len();
        let start = active.start;
        self.source.update(cx, |state, cx| {
            state.set_selected_range(range.clone(), cx);
            state.replace(&text, window, cx);
        });

        // The blocks outside the replaced range are as they were, moved by
        // the growth; inside it the block's own text says what it holds.
        // Only when the parse of the block on its own would differ from its
        // parse in context (an unclosed fence, say) does this diverge, and
        // the next whole-document parse, on the edit ending, settles that.
        let growth = text.len() as isize - range.len() as isize;
        let moved = |offset: usize| (offset as isize + growth) as usize;
        let inside = highlight::block_ranges(&typed)
            .into_iter()
            .map(|block| block.start + start..block.end + start);
        let before = self
            .blocks
            .iter()
            .take_while(|block| block.end <= range.start)
            .cloned();
        let after = self
            .blocks
            .iter()
            .filter(|block| block.start >= range.end && block.end > range.start)
            .map(|block| moved(block.start)..moved(block.end));
        self.blocks = before.chain(inside).chain(after).collect();
        self.blocks_text = self.text(cx);
    }
}

impl Render for RenderedView {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let ranges = self.blocks(cx).to_vec();
        let text = self.blocks_text.clone();
        let active = self.active_range();
        let palette = self.palette;
        let background = palette.map_or(cx.theme().background, |p| p.background);
        let foreground = palette.map_or(cx.theme().foreground, |p| p.foreground);
        let muted = cx.theme().muted_foreground;

        // The editor takes the place of the blocks its text parses into,
        // and sits between its neighbours even while its text is empty.
        let mut items: Vec<AnyElement> = Vec::with_capacity(ranges.len() + 1);
        let mut editor_placed = false;
        for (ix, range) in ranges.iter().enumerate() {
            if let Some(active) = &active {
                let overlaps = range.start < active.end && range.end > active.start;
                if overlaps {
                    if !editor_placed {
                        items.push(self.render_active(cx));
                        editor_placed = true;
                    }
                    continue;
                }
                if !editor_placed && range.start >= active.end {
                    items.push(self.render_active(cx));
                    editor_placed = true;
                }
            }
            items.push(self.render_block(ix, range.clone(), &text, palette, cx));
        }
        if active.is_some() && !editor_placed {
            items.push(self.render_active(cx));
        }
        if items.is_empty() {
            let hint = if self.read_only {
                "Nothing to read yet. Edit (the button in the title bar) to start writing."
            } else {
                "Click here to start writing."
            };
            items.push(
                div()
                    .id("empty")
                    .text_color(muted)
                    .child(hint)
                    .into_any_element(),
            );
        }

        v_flex()
            .id("rendered")
            .size_full()
            .overflow_y_scroll()
            .track_scroll(&self.scroll)
            .track_focus(&self.focus_handle)
            .bg(background)
            .text_color(foreground)
            .when_some(palette.and_then(|p| p.font_family()), |this, family| {
                this.font_family(family)
            })
            .px_6()
            .py_4()
            .gap_3()
            .on_mouse_down(
                MouseButton::Left,
                cx.listener(|this, _, window, cx| {
                    this.activate_at_end(window, cx);
                    // A focusable element takes focus on click after its own
                    // listeners; that would take it back from the new block.
                    window.prevent_default();
                }),
            )
            // The block editor lets a plain Escape through; it ends the edit.
            .on_action(cx.listener(|this, _: &Escape, window, cx| this.deactivate(window, cx)))
            .children(items)
    }
}

impl RenderedView {
    fn render_block(
        &self,
        ix: usize,
        range: Range<usize>,
        text: &str,
        palette: Option<Palette>,
        cx: &mut Context<Self>,
    ) -> AnyElement {
        let source: SharedString = text[range.clone()].to_string().into();
        div()
            .id(("block", ix))
            .w_full()
            .when(!self.read_only, |this| this.cursor_text())
            .on_mouse_down(
                MouseButton::Left,
                cx.listener(move |this, _, window, cx| {
                    cx.stop_propagation();
                    this.activate(range.clone(), window, cx);
                }),
            )
            .child(
                TextView::markdown(("block-text", ix), source)
                    .when_some(palette, |view, p| view.style(p.text_view_style())),
            )
            .into_any_element()
    }

    fn render_active(&self, _cx: &mut Context<Self>) -> AnyElement {
        let Some(active) = self.active.as_ref() else {
            return div().into_any_element();
        };
        div()
            .id("active-block")
            .w_full()
            .on_mouse_down(MouseButton::Left, |_, _, cx| cx.stop_propagation())
            .child(
                Textarea::new(&active.editor)
                    .bordered(false)
                    .appearance(false),
            )
            .into_any_element()
    }
}