bezel-editor 0.1.22

//! The floating chrome: the gutter handle, the drop indicator, and the two
//! menus.
//!
//! All four are placed from positions `markdown::BlockLayouts` recorded as it
//! painted, so none of them can drift from the text it points at.

use gpui::{
    AnyElement, App, Context, CursorStyle, MouseButton, Pixels, Point, SharedString, div,
    prelude::*, px,
};
use markdown::BlockKind;
use motion::{Fade, Painter};
use theme::{TextStyle, Theme, Typeset};

use crate::{
    editor::{Editor, HANDLE_SIZE},
    layout::Layout,
};

/// How far the language chip reaches past the word it wraps.
const CHIP_PAD_X: f32 = 6.0;
const CHIP_PAD_Y: f32 = 3.0;

/// Selector the interaction tests look the painted menu up by.
pub const SLASH_MENU: &str = "slash-menu";
/// The gutter handle's, for the same reason.
pub const BLOCK_HANDLE: &str = "block-handle";
/// The menu that handle opens, so a test can ask whether a second press on it
/// left the menu shut rather than closed-and-reopened.
pub const BLOCK_MENU: &str = "block-menu";

impl Editor {
    /// The block the handle belongs on: the one being dragged, else the one
    /// under the pointer, else the one the caret is in.
    pub(super) fn handle_block(&self, focused: bool) -> Option<usize> {
        if !self.chrome().handle {
            return None;
        }
        if !self.blocks() {
            return None;
        }
        self.lifted
            .map(|(from, _)| from)
            .or(self.hovered)
            .or_else(|| focused.then(|| self.cursor().block))
    }

    /// Where the handle sits for that block, in this editor's own space.
    ///
    /// Centred on the block's first row, not dropped at the top of its box. A
    /// block with nothing painted in it has no row to centre on and keeps the
    /// box's top.
    pub(super) fn handle_origin(&self, ix: usize, cx: &App) -> Option<Point<Pixels>> {
        let bounds = self.layouts.block_bounds(ix)?;
        let top = match self.layouts.first_row(ix) {
            Some((row, line)) => row + (line - px(HANDLE_SIZE)) / 2.0,
            None => bounds.origin.y,
        };
        Some(gpui::point(
            bounds.origin.x - self.origin.x - px(Layout::of(cx).text_inset),
            top - self.origin.y,
        ))
    }

    /// The gutter handle, on the block being dragged, else the one under the
    /// pointer, else the one the caret is in.
    ///
    /// One handle rather than one per block: a single element placed from the
    /// recorded frames does the whole job and the renderer stays clear of
    /// editor concerns. The caret comes last because a pointer in the document
    /// is the more immediate intent — and it comes at all because reaching a
    /// block by keyboard should not mean reaching for the mouse to act on it.
    pub(super) fn handle(
        &mut self,
        focused: bool,
        theme: &Theme,
        cx: &mut Context<Self>,
    ) -> Option<AnyElement> {
        let placed = self
            .handle_block(focused)
            .and_then(|ix| Some((ix, self.handle_origin(ix, cx)?)));
        // Kept even when there is none, so [`Self::settle_handle`] compares
        // like with like and does not ask for a frame over a handle that is
        // not there.
        self.handle_at = placed.map(|(_, at)| at);
        let (ix, at) = placed?;
        let handle = div()
            .id(BLOCK_HANDLE)
            .debug_selector(|| BLOCK_HANDLE.to_string())
            .absolute()
            .left(at.x)
            .top(at.y)
            .w(px(HANDLE_SIZE))
            .h(px(HANDLE_SIZE))
            .flex()
            .items_center()
            .justify_center()
            .rounded(px(4.0))
            .cursor(CursorStyle::OpenHand)
            .text_style(TextStyle::Callout)
            .text_color(theme.text_faint)
            .hover(|el| el.bg(theme.element_hover).text_color(theme.text_muted))
            .child("⠿")
            .on_mouse_down(
                MouseButton::Left,
                cx.listener(move |this, _: &gpui::MouseDownEvent, _, cx| {
                    this.press_claimed = true;
                    this.lifted = Some((ix, ix));
                    // The menu belongs to the release. Opened here it would
                    // occlude the very moves a drag downwards is made of,
                    // and the drop target would never leave the block it
                    // started on — so the press only dismisses, and the note
                    // `trigger_press_matching` took is what tells the
                    // release apart from a fresh open.
                    ui::popover::close_popup(this, cx, |this| &mut this.block_menu);
                    cx.notify();
                }),
            );
        Some(
            ui::popover::trigger_press_matching(
                handle,
                |this| &mut this.block_menu,
                move |&(block, _)| block == ix,
                cx,
            )
            .into_any_element(),
        )
    }

    /// The line showing where a lifted block — or a file dragged in from
    /// outside — would land.
    pub(super) fn drop_indicator(&self, theme: &Theme) -> Option<AnyElement> {
        if !self.blocks() {
            return None;
        }
        let (from, to) = match self.lifted.filter(|(from, to)| from != to) {
            Some(lifted) => lifted,
            // A file always lands under the block it is over, so it is a drag
            // that only ever moves downwards.
            None => self.dropping.map(|to| (to, to + 1))?,
        };
        let bounds = self.layouts.block_bounds(to)?;
        // Above the target when moving up, below it when moving down — which
        // is where the block actually ends up.
        let y = if to < from {
            bounds.origin.y
        } else {
            bounds.origin.y + bounds.size.height
        };
        Some(
            div()
                .absolute()
                .left(px(0.0))
                .top(y - self.origin.y - px(1.0))
                .w_full()
                .h(px(2.0))
                .rounded(px(1.0))
                .bg(theme.accent)
                .into_any_element(),
        )
    }

    /// The click target over a fence's header, where its language sits.
    ///
    /// The header paints the name; this only takes the press. A renderer holds
    /// a `&Doc` and cannot change one, which is why the copy button can live
    /// down there and a language picker cannot.
    pub(super) fn language_chip(
        &self,
        theme: &Theme,
        cx: &mut Context<Self>,
    ) -> Option<AnyElement> {
        // The source is a fence too, and it has no language to pick.
        if !self.chrome().language || !self.blocks() {
            return None;
        }
        // Whichever fence the reader is at: the one under the pointer, else the
        // one the caret is in.
        let ix = [self.hovered, Some(self.cursor().block)]
            .into_iter()
            .flatten()
            .find(|ix| {
                matches!(
                    self.doc.blocks.get(*ix).map(|b| &b.kind),
                    Some(BlockKind::Code { .. })
                )
            })?;
        // The label's box, grown by the chip's padding — so the wash is around
        // the word and nothing else, whatever the word is.
        let bounds = self.layouts.language_bounds(ix)?;
        let anchor = gpui::point(
            bounds.origin.x - px(CHIP_PAD_X),
            bounds.origin.y + bounds.size.height + px(CHIP_PAD_Y),
        );
        let chip = div()
            .id("language-chip")
            .absolute()
            .left(bounds.origin.x - self.origin.x - px(CHIP_PAD_X))
            .top(bounds.origin.y - self.origin.y - px(CHIP_PAD_Y))
            .w(bounds.size.width + px(2.0 * CHIP_PAD_X))
            .h(bounds.size.height + px(2.0 * CHIP_PAD_Y))
            .rounded(px(4.0))
            .cursor(CursorStyle::PointingHand)
            .hover(|el| el.bg(theme.element_hover));
        Some(
            ui::popover::menu_trigger_matching(
                chip,
                |this| &mut this.language_menu,
                move |&(block, _)| block == ix,
                move |_| (ix, anchor),
                cx,
            )
            .into_any_element(),
        )
    }

    /// The languages the installed highlighter knows, at the header that asked.
    pub(super) fn language_menu(
        &self,
        theme: &Theme,
        cx: &mut Context<Self>,
    ) -> Option<AnyElement> {
        if !self.chrome().language || !self.blocks() {
            return None;
        }
        let view = Painter::of(cx);
        let &(ix, at) = self.language_menu.get()?;
        let Some(BlockKind::Code { language, .. }) = self.doc.blocks.get(ix).map(|b| &b.kind)
        else {
            return None;
        };
        let current = language.clone();
        let row = |label: SharedString, tag: Option<String>, lit: bool| {
            ui::popover::menu_row(theme, false, Some(Fade::new(view, format!("lang-{label}"))))
                .justify_between()
                .id(SharedString::from(format!("lang-row-{label}")))
                .child(label.clone())
                .when(lit, |row| {
                    row.child(
                        ui::icons::icon(ui::icons::glyph::Check)
                            .size(px(13.0))
                            .text_color(theme.text),
                    )
                })
                .on_click(cx.listener(move |this, _, _, cx| {
                    ui::popover::close_popup(this, cx, |this| &mut this.language_menu);
                    this.set_language(ix, tag.clone(), cx);
                }))
        };
        let plain = row(
            markdown::render::PLAIN_LANGUAGE.into(),
            None,
            current.is_none(),
        );
        let rows: Vec<AnyElement> = markdown::languages(cx)
            .to_vec()
            .into_iter()
            .map(|name| {
                let lit = current.as_deref() == Some(name.as_ref());
                row(name.clone(), Some(name.to_string()), lit).into_any_element()
            })
            .collect();
        Some(ui::popover::menu_at(
            "language-menu",
            at,
            ui::popover::dismiss_on_out(
                ui::popover::popover_card(theme).w(px(150.0)),
                |this| &mut this.language_menu,
                cx,
            )
            .child(
                ui::scroll::pane("language-menu-rows", ui::scroll::Axes::Vertical)
                    .max_h(px(280.0))
                    .child(plain)
                    .children(rows),
            )
            .into_any_element(),
            self.language_menu.closing_since(),
        ))
    }

    /// Turn into / Duplicate / Delete, at the handle that opened it.
    pub(super) fn block_menu(&self, theme: &Theme, cx: &mut Context<Self>) -> Option<AnyElement> {
        if !self.blocks() {
            return None;
        }
        let view = Painter::of(cx);
        let &(ix, at) = self.block_menu.get()?;
        let turns = crate::slash::items();
        let rows = turns.into_iter().map(|(label, kind)| {
            ui::popover::menu_row(theme, false, Some(Fade::new(view, format!("turn-{label}"))))
                .id(SharedString::from(format!("turn-row-{label}")))
                .child(label)
                .on_click(cx.listener(move |this, _, _, cx| {
                    ui::popover::close_popup(this, cx, |this| &mut this.block_menu);
                    this.set_block(ix, kind.clone(), cx);
                }))
        });
        let action = |label: &'static str, run: fn(&mut Self, usize, &mut Context<Self>)| {
            ui::popover::menu_row(
                theme,
                false,
                Some(Fade::new(view, format!("block-{label}"))),
            )
            .id(SharedString::from(format!("block-row-{label}")))
            .child(label)
            .on_click(cx.listener(move |this, _, _, cx| {
                ui::popover::close_popup(this, cx, |this| &mut this.block_menu);
                run(this, ix, cx);
            }))
        };
        Some(ui::popover::menu_at(
            BLOCK_MENU,
            at,
            ui::popover::dismiss_on_out(
                ui::popover::popover_card(theme)
                    .debug_selector(|| BLOCK_MENU.to_string())
                    .w(px(190.0)),
                |this| &mut this.block_menu,
                cx,
            )
            .child(
                ui::scroll::pane("block-menu-rows", ui::scroll::Axes::Vertical)
                    .max_h(px(320.0))
                    .child(ui::popover::menu_heading(theme, "Turn into"))
                    .children(rows)
                    .child(ui::popover::menu_heading(theme, "Block"))
                    .child(action("Duplicate", |this, ix, cx| {
                        this.duplicate_block(ix, cx)
                    }))
                    .child(action("Delete", |this, ix, cx| this.remove_block(ix, cx))),
            )
            .into_any_element(),
            self.block_menu.closing_since(),
        ))
    }

    /// What a pasted URL could be, under the block it landed in.
    ///
    /// Anchored at the block's start rather than at the caret: the caret is
    /// past the end of a URL, which is as far right as a line goes, and a menu
    /// hanging off there points at nothing.
    pub(super) fn paste_menu(&self, theme: &Theme, cx: &mut Context<Self>) -> Option<AnyElement> {
        let pasted = self.pasted.as_ref()?;
        let (point, line_height) = self.layouts.position(pasted.at)?;
        let rows = pasted.rows.iter().enumerate().map(|(row, &choice)| {
            let label = choice.label();
            ui::popover::menu_row(theme, row == pasted.active, None)
                .id(SharedString::from(format!("paste-row-{label}")))
                .child(label)
                .on_mouse_move(cx.listener(move |this: &mut Self, _, _, cx| {
                    if let Some(pasted) = this.pasted.as_mut()
                        && pasted.active != row
                    {
                        pasted.active = row;
                        cx.notify();
                    }
                }))
                .on_click(cx.listener(move |this, _, _, cx| this.confirm_paste(choice, cx)))
        });
        Some(ui::popover::menu_at(
            "paste-menu",
            gpui::point(point.x, point.y + line_height),
            ui::popover::popover_card(theme)
                .w(px(180.0))
                // Clicking away is `Dismiss`, which is a real answer: the link
                // is already in the block and stays there.
                .on_mouse_down_out(cx.listener(|this, _, _, cx| {
                    this.pasted = None;
                    cx.notify();
                }))
                .children(rows)
                .into_any_element(),
            None,
        ))
    }

    /// The menu, anchored under the `/` that opened it.
    ///
    /// The anchor comes from the same layout the caret paints against, so it
    /// costs nothing beyond a lookup and it cannot drift from the text.
    pub(super) fn slash_menu(&self, theme: &Theme, cx: &mut Context<Self>) -> Option<AnyElement> {
        let slash = self.slash.as_ref()?;
        let (point, line_height) = self.layouts.position(slash.at)?;
        let items = crate::slash::items();
        let reduce_motion = cx.reduce_motion();
        // The `.id` is not optional: a row without one neither takes the cursor
        // on hover nor clicks.
        let rows = slash
            .filter
            .filtered()
            .iter()
            .enumerate()
            .map(|(row, &ix)| {
                let kind = items[ix].1.clone();
                ui::popover::menu_row(theme, Some(row) == slash.filter.active(), None)
                    .id(SharedString::from(format!("slash-row-{ix}")))
                    .child(items[ix].0.clone())
                    .on_mouse_move(cx.listener(move |this: &mut Self, _, _, cx| {
                        if let Some(slash) = this.slash.as_mut()
                            && slash.filter.active() != Some(row)
                        {
                            slash.filter.set_active(row);
                            cx.notify();
                        }
                    }))
                    .on_click(cx.listener(move |this, _, _, cx| {
                        this.confirm_slash(Some(kind.clone()), cx);
                    }))
            });
        Some(ui::popover::menu_at(
            "slash-menu",
            gpui::point(point.x, point.y + line_height),
            ui::popover::popover_card(theme)
                // Compiles to nothing outside a test build. It is here because
                // the menu's state opening and the menu *painting* are two
                // different things, and the bug that shipped was the second one
                // failing while the first looked fine.
                .debug_selector(|| SLASH_MENU.to_string())
                .w(px(200.0))
                .relative()
                .on_mouse_down_out(cx.listener(|this, _, _, cx| {
                    this.slash = None;
                    cx.notify();
                }))
                .child(
                    ui::scroll::pane("slash-rows", ui::scroll::Axes::Vertical)
                        .max_h(px(280.0))
                        .track_scroll(&slash.scroll)
                        .children(rows),
                )
                .child(ui::scroll::transient(
                    "slash-bar",
                    &slash.scroll,
                    &slash.bar,
                    reduce_motion,
                ))
                .into_any_element(),
            None,
        ))
    }
}