freya_components/

input.rs

use std::{
    borrow::Cow,
    cell::{
        Ref,
        RefCell,
    },
    rc::Rc,
};

use freya_core::{
    elements::paragraph::{
        ParagraphCursorExt,
        ParagraphHolderInner,
    },
    prelude::*,
};
use freya_edit::*;
use torin::{
    gaps::Gaps,
    prelude::{
        Alignment,
        Area,
        AreaModel,
        Content,
        Direction,
    },
    size::Size,
};
use tracing::warn;

use crate::{
    cursor_blink::use_cursor_blink,
    define_theme,
    get_theme,
    scrollviews::{
        ScrollConfig,
        ScrollView,
        use_scroll_controller,
    },
};

define_theme! {
    for = Input;
    theme_field = theme_layout;

    %[component]
    pub InputLayout {
        %[fields]
        corner_radius: CornerRadius,
        inner_margin: Gaps,
    }
}

define_theme! {
    for = Input;
    theme_field = theme_colors;

    %[component]
    pub InputColors {
        %[fields]
        background: Color,
        focus_background: Color,
        border_fill: Color,
        focus_border_fill: Color,
        color: Color,
        placeholder_color: Color,
    }
}

#[derive(Clone, PartialEq)]
pub enum InputStyleVariant {
    Normal,
    Filled,
    Flat,
}

#[derive(Clone, PartialEq)]
pub enum InputLayoutVariant {
    Normal,
    Compact,
    Expanded,
}

#[derive(Default, Clone, Copy, PartialEq)]
pub enum InputMode {
    #[default]
    Shown,
    Hidden(char),
}

impl InputMode {
    pub fn new_password() -> Self {
        Self::Hidden('*')
    }
}

#[derive(Debug, Default, PartialEq, Clone, Copy)]
pub enum InputStatus {
    /// Default state.
    #[default]
    Idle,
    /// Pointer is hovering the input.
    Hovering,
}

#[derive(Clone)]
pub struct InputValidator {
    valid: Rc<RefCell<bool>>,
    text: Rc<RefCell<String>>,
}

impl InputValidator {
    pub fn new(text: String) -> Self {
        Self {
            valid: Rc::new(RefCell::new(true)),
            text: Rc::new(RefCell::new(text)),
        }
    }
    pub fn text(&'_ self) -> Ref<'_, String> {
        self.text.borrow()
    }
    pub fn set_valid(&self, is_valid: bool) {
        *self.valid.borrow_mut() = is_valid;
    }
    pub fn is_valid(&self) -> bool {
        *self.valid.borrow()
    }
}

/// Small box to write some text.
///
/// ## **Normal**
///
/// ```rust
/// # use freya::prelude::*;
/// fn app() -> impl IntoElement {
///     let value = use_state(String::new);
///     Input::new(value).placeholder("Type here")
/// }
/// # use freya_testing::prelude::*;
/// # launch_doc(|| {
/// #   rect().center().expanded().child(app())
/// # }, "./images/gallery_input.png").render();
/// ```
/// ## **Filled**
///
/// ```rust
/// # use freya::prelude::*;
/// fn app() -> impl IntoElement {
///     let value = use_state(String::new);
///     Input::new(value).placeholder("Type here").filled()
/// }
/// # use freya_testing::prelude::*;
/// # launch_doc(|| {
/// #   rect().center().expanded().child(app())
/// # }, "./images/gallery_filled_input.png").render();
/// ```
/// ## **Flat**
///
/// ```rust
/// # use freya::prelude::*;
/// fn app() -> impl IntoElement {
///     let value = use_state(String::new);
///     Input::new(value).placeholder("Type here").flat()
/// }
/// # use freya_testing::prelude::*;
/// # launch_doc(|| {
/// #   rect().center().expanded().child(app())
/// # }, "./images/gallery_flat_input.png").render();
/// ```
///
/// # Preview
/// ![Input Preview][input]
/// ![Filled Input Preview][filled_input]
/// ![Flat Input Preview][flat_input]
#[cfg_attr(feature = "docs",
    doc = embed_doc_image::embed_image!("input", "images/gallery_input.png"),
    doc = embed_doc_image::embed_image!("filled_input", "images/gallery_filled_input.png"),
    doc = embed_doc_image::embed_image!("flat_input", "images/gallery_flat_input.png"),
)]
#[derive(Clone, PartialEq)]
pub struct Input {
    pub(crate) theme_colors: Option<InputColorsThemePartial>,
    pub(crate) theme_layout: Option<InputLayoutThemePartial>,
    value: Writable<String>,
    placeholder: Option<Cow<'static, str>>,
    on_validate: Option<EventHandler<InputValidator>>,
    on_submit: Option<EventHandler<String>>,
    mode: InputMode,
    auto_focus: bool,
    width: Size,
    height: Size,
    multiline: bool,
    enabled: bool,
    key: DiffKey,
    style_variant: InputStyleVariant,
    layout_variant: InputLayoutVariant,
    text_align: TextAlign,
    a11y_id: Option<AccessibilityId>,
    leading: Option<Element>,
    trailing: Option<Element>,
    on_pre_key_down: Option<Callback<Event<KeyboardEventData>, bool>>,
}

impl KeyExt for Input {
    fn write_key(&mut self) -> &mut DiffKey {
        &mut self.key
    }
}

impl Input {
    pub fn new(value: impl Into<Writable<String>>) -> Self {
        Input {
            theme_colors: None,
            theme_layout: None,
            value: value.into(),
            placeholder: None,
            on_validate: None,
            on_submit: None,
            mode: InputMode::default(),
            auto_focus: false,
            width: Size::px(150.),
            height: Size::default(),
            multiline: false,
            enabled: true,
            key: DiffKey::default(),
            style_variant: InputStyleVariant::Normal,
            layout_variant: InputLayoutVariant::Normal,
            text_align: TextAlign::default(),
            a11y_id: None,
            leading: None,
            trailing: None,
            on_pre_key_down: None,
        }
    }

    pub fn enabled(mut self, enabled: impl Into<bool>) -> Self {
        self.enabled = enabled.into();
        self
    }

    pub fn placeholder(mut self, placeholder: impl Into<Cow<'static, str>>) -> Self {
        self.placeholder = Some(placeholder.into());
        self
    }

    pub fn on_validate(mut self, on_validate: impl Into<EventHandler<InputValidator>>) -> Self {
        self.on_validate = Some(on_validate.into());
        self
    }

    pub fn on_submit(mut self, on_submit: impl Into<EventHandler<String>>) -> Self {
        self.on_submit = Some(on_submit.into());
        self
    }

    pub fn mode(mut self, mode: InputMode) -> Self {
        self.mode = mode;
        self
    }

    pub fn auto_focus(mut self, auto_focus: impl Into<bool>) -> Self {
        self.auto_focus = auto_focus.into();
        self
    }

    pub fn width(mut self, width: impl Into<Size>) -> Self {
        self.width = width.into();
        self
    }

    pub fn height(mut self, height: impl Into<Size>) -> Self {
        self.height = height.into();
        self
    }

    /// Allow writing multiple lines, `Enter` inserts a line break instead of submitting.
    /// Combine it with [Self::height] to get a scrollable input of a bounded size.
    pub fn multiline(mut self, multiline: impl Into<bool>) -> Self {
        self.multiline = multiline.into();
        self
    }

    pub fn theme_colors(mut self, theme: InputColorsThemePartial) -> Self {
        self.theme_colors = Some(theme);
        self
    }

    pub fn theme_layout(mut self, theme: InputLayoutThemePartial) -> Self {
        self.theme_layout = Some(theme);
        self
    }

    pub fn text_align(mut self, text_align: impl Into<TextAlign>) -> Self {
        self.text_align = text_align.into();
        self
    }

    pub fn style_variant(mut self, style_variant: impl Into<InputStyleVariant>) -> Self {
        self.style_variant = style_variant.into();
        self
    }

    pub fn layout_variant(mut self, layout_variant: impl Into<InputLayoutVariant>) -> Self {
        self.layout_variant = layout_variant.into();
        self
    }

    /// Shortcut for [Self::style_variant] with [InputStyleVariant::Filled].
    pub fn filled(self) -> Self {
        self.style_variant(InputStyleVariant::Filled)
    }

    /// Shortcut for [Self::style_variant] with [InputStyleVariant::Flat].
    pub fn flat(self) -> Self {
        self.style_variant(InputStyleVariant::Flat)
    }

    /// Shortcut for [Self::layout_variant] with [InputLayoutVariant::Compact].
    pub fn compact(self) -> Self {
        self.layout_variant(InputLayoutVariant::Compact)
    }

    /// Shortcut for [Self::layout_variant] with [InputLayoutVariant::Expanded].
    pub fn expanded(self) -> Self {
        self.layout_variant(InputLayoutVariant::Expanded)
    }

    pub fn a11y_id(mut self, a11y_id: impl Into<AccessibilityId>) -> Self {
        self.a11y_id = Some(a11y_id.into());
        self
    }

    /// Optional element rendered before the text input.
    pub fn leading(mut self, leading: impl Into<Element>) -> Self {
        self.leading = Some(leading.into());
        self
    }

    /// Optional element rendered after the text input.
    pub fn trailing(mut self, trailing: impl Into<Element>) -> Self {
        self.trailing = Some(trailing.into());
        self
    }

    /// Sets a pre-handler called for each key event. Return `true` to let the input process it,
    /// `false` to skip. The callback may call `stop_propagation()` / `prevent_default()` directly.
    pub fn on_pre_key_down(
        mut self,
        on_pre_key_down: impl Into<Callback<Event<KeyboardEventData>, bool>>,
    ) -> Self {
        self.on_pre_key_down = Some(on_pre_key_down.into());
        self
    }
}

impl CornerRadiusExt for Input {
    fn with_corner_radius(self, corner_radius: f32) -> Self {
        self.corner_radius(corner_radius)
    }
}

impl Component for Input {
    fn render(&self) -> impl IntoElement {
        let a11y_id = use_hook(|| self.a11y_id.unwrap_or_else(AccessibilityId::new_unique));
        let focus = use_focus(a11y_id);
        let holder = use_state(ParagraphHolder::default);
        let mut area = use_state(Area::default);
        let mut viewport_area = use_state(Area::default);
        let mut scroll_controller = use_scroll_controller(ScrollConfig::default);
        let mut status = use_state(InputStatus::default);
        let is_masked = matches!(self.mode, InputMode::Hidden(_));
        let mut editable = use_editable(
            || self.value.read().to_string(),
            move || {
                EditableConfig::new()
                    .with_allow_write_clipboard(!is_masked)
                    .with_select_all_on_double_click(is_masked)
            },
        );
        let mut is_dragging = use_state(|| false);
        let mut value = self.value.clone();

        let theme_colors = match self.style_variant {
            InputStyleVariant::Normal => {
                get_theme!(&self.theme_colors, InputColorsThemePreference, "input")
            }
            InputStyleVariant::Filled => get_theme!(
                &self.theme_colors,
                InputColorsThemePreference,
                "filled_input"
            ),
            InputStyleVariant::Flat => {
                get_theme!(&self.theme_colors, InputColorsThemePreference, "flat_input")
            }
        };
        let theme_layout = match self.layout_variant {
            InputLayoutVariant::Normal => get_theme!(
                &self.theme_layout,
                InputLayoutThemePreference,
                "input_layout"
            ),
            InputLayoutVariant::Compact => get_theme!(
                &self.theme_layout,
                InputLayoutThemePreference,
                "compact_input_layout"
            ),
            InputLayoutVariant::Expanded => get_theme!(
                &self.theme_layout,
                InputLayoutThemePreference,
                "expanded_input_layout"
            ),
        };

        let (mut movement_timeout, cursor_color) =
            use_cursor_blink(focus() != Focus::Not, theme_colors.color);

        let enabled = use_reactive(&self.enabled);

        let display_placeholder = value.read().is_empty()
            && self.placeholder.is_some()
            && !editable.editor().read().has_preedit();
        let on_validate = self.on_validate.clone();
        let on_submit = self.on_submit.clone();

        if *value.read() != editable.editor().read().committed_text() {
            let mut editor = editable.editor_mut().write();
            editor.clear_preedit();
            editor.set(&value.read());
            editor.editor_history_mut().clear();
            editor.clear_selection();
        }

        let mode = self.mode;
        let text_align = self.text_align;
        let inner_margin = theme_layout.inner_margin;
        let multiline = self.multiline;
        let mut follow_cursor = move || {
            if !a11y_id.is_focused() || display_placeholder {
                return;
            }

            let holder = holder.peek();
            let holder = holder.0.borrow();
            let Some(ParagraphHolderInner {
                paragraph,
                scale_factor,
            }) = holder.as_ref()
            else {
                warn!("Paragraph should be build by now.");
                return;
            };

            let viewport = viewport_area();
            if viewport.width() == 0. {
                return;
            }

            // Text as currently displayed
            let editor = editable.editor().peek();
            let text = match mode {
                InputMode::Hidden(character) => {
                    character.to_string().repeat(editor.rope().len_chars())
                }
                InputMode::Shown => editor.rope().to_string(),
            };

            let cursor_rect = paragraph.cursor_rect(&text, editor.cursor_pos(), text_align);
            let cursor_x = cursor_rect.left / (*scale_factor as f32);

            // Visible window start
            let visible_start_x = viewport.min_x() - area.peek().min_x();

            // Minimally reveal the cursor
            if cursor_x < visible_start_x {
                scroll_controller.scroll_to_x(-cursor_x as i32);
            } else if cursor_x + inner_margin.horizontal() > visible_start_x + viewport.width() {
                scroll_controller
                    .scroll_to_x(-(cursor_x + inner_margin.horizontal() - viewport.width()) as i32);
            }

            if multiline {
                let cursor_top = cursor_rect.top / (*scale_factor as f32);
                let cursor_bottom = cursor_rect.bottom / (*scale_factor as f32);
                let visible_start_y = viewport.min_y() - area.peek().min_y();

                if cursor_top < visible_start_y {
                    scroll_controller.scroll_to_y(-cursor_top as i32);
                } else if cursor_bottom + inner_margin.vertical()
                    > visible_start_y + viewport.height()
                {
                    scroll_controller.scroll_to_y(
                        -(cursor_bottom + inner_margin.vertical() - viewport.height()) as i32,
                    );
                }
            }
        };

        let on_ime_preedit = move |e: Event<ImePreeditEventData>| {
            let mut editor = editable.editor_mut().write();
            if e.data().text.is_empty() {
                editor.clear_preedit();
            } else {
                editor.set_preedit(&e.data().text);
            }
        };

        let on_pre_key_down = self.on_pre_key_down.clone().unwrap_or_else(|| {
            Callback::new(move |e: Event<KeyboardEventData>| match &e.key {
                Key::Named(NamedKey::Enter) if !multiline => true,
                Key::Named(NamedKey::Escape) | Key::Named(NamedKey::Shift) => true,
                Key::Named(NamedKey::Tab) => false,
                _ => {
                    e.stop_propagation();
                    e.prevent_default();
                    true
                }
            })
        });
        let on_key_down = move |e: Event<KeyboardEventData>| {
            let key = e.key.clone();
            let modifiers = e.modifiers;

            if !on_pre_key_down.call(e) {
                return;
            }

            match &key {
                // On submit
                Key::Named(NamedKey::Enter) if !multiline => {
                    if let Some(on_submit) = &on_submit {
                        let text = editable.editor().peek().committed_text();
                        on_submit.call(text);
                    }
                }
                // On unfocus
                Key::Named(NamedKey::Escape) => {
                    a11y_id.request_unfocus();
                }
                // On change
                _ => {
                    movement_timeout.reset();
                    let previous_history_version =
                        editable.editor().peek().editor_history().version;
                    editable.process_event(EditableEvent::KeyDown {
                        key: &key,
                        modifiers,
                        editor_line: Some(EditorLine::SingleParagraph),
                        holder: Some(&holder.read()),
                    });
                    let text = editable.editor().read().committed_text();

                    let apply_change = match &on_validate {
                        Some(on_validate) => {
                            let mut editor = editable.editor_mut().write();
                            let validator = InputValidator::new(text.clone());
                            on_validate.call(validator.clone());
                            if !validator.is_valid() {
                                if let Some(selection) = editor.undo() {
                                    *editor.selection_mut() = selection;
                                }
                                editor.editor_history_mut().clear_redos();
                            }
                            validator.is_valid()
                        }
                        None => true,
                    };

                    if apply_change {
                        *value.write() = text;
                    }
                    if editable.editor().peek().editor_history().version == previous_history_version
                    {
                        follow_cursor();
                    }
                }
            }
        };

        let on_key_up = move |e: Event<KeyboardEventData>| {
            e.stop_propagation();
            editable.process_event(EditableEvent::KeyUp { key: &e.key });
        };

        let on_input_focus_press = move |e: Event<FocusPressEventData>| {
            e.stop_propagation();
            e.prevent_default();
            if cfg!(target_os = "android") {
                if a11y_id.is_focused() {
                    // Require a second press to enabling dragging on Android
                    is_dragging.set_if_modified(true);
                }
            } else {
                is_dragging.set_if_modified(true);
            }
            movement_timeout.reset();
            if !display_placeholder {
                let text_area = area.read().without_gaps(&inner_margin).to_f64();
                let global_location = e.global_location().clamp(text_area.min(), text_area.max());
                let location = (global_location - text_area.min()).to_point();
                editable.process_event(EditableEvent::Down {
                    location,
                    editor_line: EditorLine::SingleParagraph,
                    holder: &holder.read(),
                });
            }
            a11y_id.request_focus();
        };

        let on_focus_press = move |e: Event<FocusPressEventData>| {
            e.stop_propagation();
            e.prevent_default();
            if cfg!(target_os = "android") {
                if a11y_id.is_focused() {
                    // Require a second press to enabling dragging on Android
                    is_dragging.set_if_modified(true);
                }
            } else {
                is_dragging.set_if_modified(true);
            }
            movement_timeout.reset();
            if !display_placeholder {
                editable.process_event(EditableEvent::Down {
                    location: e.element_location(),
                    editor_line: EditorLine::SingleParagraph,
                    holder: &holder.read(),
                });
            }
            a11y_id.request_focus();
        };

        let on_global_pointer_move = move |e: Event<PointerEventData>| {
            if a11y_id.is_focused() && *is_dragging.read() {
                let text_area = area.read().without_gaps(&inner_margin).to_f64();
                let location = (e.global_location() - text_area.min()).to_point();
                editable.process_event(EditableEvent::Move {
                    location,
                    editor_line: EditorLine::SingleParagraph,
                    holder: &holder.read(),
                });
                follow_cursor();
            }
        };

        let on_pointer_enter = move |_| {
            *status.write() = InputStatus::Hovering;
        };

        let on_pointer_leave = move |_| {
            if status() == InputStatus::Hovering {
                *status.write() = InputStatus::default();
            }
        };

        let on_global_pointer_press = move |_: Event<PointerEventData>| {
            match *status.read() {
                InputStatus::Idle if a11y_id.is_focused() => {
                    editable.process_event(EditableEvent::Release);
                }
                InputStatus::Hovering => {
                    editable.process_event(EditableEvent::Release);
                }
                _ => {}
            };

            if a11y_id.is_focused() {
                if *is_dragging.read() {
                    // The input is focused and dragging, but it just clicked so we assume the dragging can stop
                    is_dragging.set(false);
                } else {
                    // The input is focused but not dragging, so the click means it was clicked outside, therefore we can unfocus this input
                    a11y_id.request_unfocus();
                }
            }
        };

        let on_pointer_press = move |e: Event<PointerEventData>| {
            e.stop_propagation();
            e.prevent_default();
            match *status.read() {
                InputStatus::Idle if a11y_id.is_focused() => {
                    editable.process_event(EditableEvent::Release);
                }
                InputStatus::Hovering => {
                    editable.process_event(EditableEvent::Release);
                }
                _ => {}
            };

            if a11y_id.is_focused() {
                is_dragging.set_if_modified(false);
            }
        };

        let on_paragraph_sized = move |e: Event<SizedEventData>| {
            let text_size_changed = area.peek().size != e.area.size;
            area.set_if_modified(e.area);
            if text_size_changed {
                follow_cursor();
            }
        };

        let (background, cursor_index, text_selection) = if enabled() && focus() != Focus::Not {
            (
                theme_colors.focus_background,
                Some(editable.editor().read().cursor_pos()),
                editable
                    .editor()
                    .read()
                    .get_visible_selection(EditorLine::SingleParagraph),
            )
        } else {
            (theme_colors.background, None, None)
        };

        let border = if focus().is_focused() {
            Border::new()
                .fill(theme_colors.focus_border_fill)
                .width(2.)
                .alignment(BorderAlignment::Inner)
        } else {
            Border::new()
                .fill(theme_colors.border_fill.mul_if(!self.enabled, 0.85))
                .width(1.)
                .alignment(BorderAlignment::Inner)
        };

        let color = if display_placeholder {
            theme_colors.placeholder_color
        } else {
            theme_colors.color
        };

        let value = self.value.read();
        let a11y_text: Cow<str> = match (self.mode, &self.placeholder) {
            (_, Some(ph)) if display_placeholder => Cow::Borrowed(ph.as_ref()),
            (InputMode::Hidden(ch), _) => Cow::Owned(ch.to_string().repeat(value.len())),
            (InputMode::Shown, _) => Cow::Borrowed(value.as_ref()),
        };

        let a11_role = match self.mode {
            InputMode::Hidden(_) => AccessibilityRole::PasswordInput,
            _ if self.multiline => AccessibilityRole::MultilineTextInput,
            _ => AccessibilityRole::TextInput,
        };

        rect()
            .a11y_id(a11y_id)
            .a11y_focusable(self.enabled)
            .a11y_auto_focus(self.auto_focus)
            .a11y_alt(a11y_text)
            .a11y_role(a11_role)
            .maybe(self.enabled, |el| {
                el.on_key_up(on_key_up)
                    .on_key_down(on_key_down)
                    .on_focus_press(on_input_focus_press)
                    .on_ime_preedit(on_ime_preedit)
                    .on_pointer_press(on_pointer_press)
                    .on_global_pointer_press(on_global_pointer_press)
                    .on_global_pointer_move(on_global_pointer_move)
            })
            .on_pointer_enter(on_pointer_enter)
            .on_pointer_leave(on_pointer_leave)
            .cursor(if self.enabled {
                CursorIcon::Text
            } else {
                CursorIcon::NotAllowed
            })
            .width(self.width.clone())
            .height(self.height.clone())
            .background(background.mul_if(!self.enabled, 0.85))
            .border(border)
            .corner_radius(theme_layout.corner_radius)
            .content(Content::Flex)
            .direction(Direction::Horizontal)
            .cross_align(Alignment::center())
            .maybe_child(
                self.leading
                    .clone()
                    .map(|leading| rect().padding(Gaps::new(0., 0., 0., 8.)).child(leading)),
            )
            .child(
                ScrollView::new_controlled(scroll_controller)
                    .width(Size::flex(1.))
                    .height(if self.multiline && !matches!(self.height, Size::Inner) {
                        Size::fill()
                    } else {
                        Size::Inner
                    })
                    .direction(if self.multiline {
                        Direction::Vertical
                    } else {
                        Direction::Horizontal
                    })
                    .show_scrollbar(self.multiline)
                    .on_sized(move |e: Event<SizedEventData>| viewport_area.set_if_modified(e.area))
                    .child(
                        paragraph()
                            .holder(holder.read().clone())
                            .on_sized(on_paragraph_sized)
                            .min_width(Size::func(move |context| {
                                Some(context.parent - theme_layout.inner_margin.horizontal())
                            }))
                            .maybe(self.multiline, |el| {
                                el.max_width(Size::func(move |context| {
                                    Some(context.parent - theme_layout.inner_margin.horizontal())
                                }))
                            })
                            .maybe(self.enabled, |el| el.on_focus_press(on_focus_press))
                            .margin(theme_layout.inner_margin)
                            .cursor_index(cursor_index)
                            .cursor_color(cursor_color)
                            .color(color)
                            .text_align(self.text_align)
                            .maybe(!self.multiline, |el| el.max_lines(1))
                            .highlights(text_selection.map(|h| vec![h]))
                            .maybe(display_placeholder, |el| {
                                el.span(self.placeholder.as_ref().unwrap().to_string())
                            })
                            .maybe(!display_placeholder, |el| {
                                let editor = editable.editor().read();
                                if editor.has_preedit() {
                                    let (b, p, a) = editor.preedit_text_segments();
                                    let (b, p, a) = match self.mode {
                                        InputMode::Hidden(ch) => {
                                            let ch = ch.to_string();
                                            (
                                                ch.repeat(b.chars().count()),
                                                ch.repeat(p.chars().count()),
                                                ch.repeat(a.chars().count()),
                                            )
                                        }
                                        InputMode::Shown => (b, p, a),
                                    };
                                    el.span(b)
                                        .span(
                                            Span::new(p).text_decoration(TextDecoration::Underline),
                                        )
                                        .span(a)
                                } else {
                                    let text = match self.mode {
                                        InputMode::Hidden(ch) => {
                                            ch.to_string().repeat(editor.rope().len_chars())
                                        }
                                        InputMode::Shown => editor.rope().to_string(),
                                    };
                                    el.span(text)
                                }
                            }),
                    ),
            )
            .maybe_child(
                self.trailing
                    .clone()
                    .map(|trailing| rect().padding(Gaps::new(0., 8., 0., 0.)).child(trailing)),
            )
    }

    fn render_key(&self) -> DiffKey {
        self.key.clone().or(self.default_key())
    }
}