guise/input/
text.rs

1//! `TextInput` — a stateful single-line text field (gpui entity).
2//!
3//! Owns its buffer and focus; renders the shared field chrome (label, box,
4//! description/error) and emits [`TextInputEvent`] on edit and submit.
5//!
6//! The editing surface itself lives in [`line`](super::line), which is what
7//! gives the field the behaviour an `<input>` has: click and drag to select,
8//! double-click a word, Tab to the next field, the clipboard, undo, IME, and
9//! horizontal scrolling for values wider than the box.
10
11use gpui::prelude::*;
12use gpui::{
13  div, px, App, Context, Entity, EventEmitter, FocusHandle, IntoElement, KeyDownEvent,
14  SharedString, Window,
15};
16
17use super::line::{self, Line, LineEditor, LineState};
18use super::{control_metrics, edit::TextEdit, Field, KeyOutcome};
19use crate::devtools::ProbedAny;
20use crate::reactive::Signal;
21use crate::theme::{theme, ColorName, Size};
22
23/// Emitted as the user edits or submits the field.
24#[derive(Debug, Clone)]
25pub enum TextInputEvent {
26  /// The text changed. Carries the full new value.
27  Change(String),
28  /// The user pressed Enter. Carries the current value.
29  Submit(String),
30}
31
32/// A single-line text field. Create with `cx.new(|cx| TextInput::new(cx))`.
33pub struct TextInput {
34  edit: TextEdit,
35  state: LineState,
36  focus: FocusHandle,
37  placeholder: SharedString,
38  label: Option<SharedString>,
39  description: Option<SharedString>,
40  error: Option<SharedString>,
41  size: Size,
42  radius: Option<Size>,
43  disabled: bool,
44  read_only: bool,
45  password: bool,
46  max_length: Option<usize>,
47}
48
49impl EventEmitter<TextInputEvent> for TextInput {}
50
51impl TextInput {
52  pub fn new(cx: &mut Context<Self>) -> Self {
53    TextInput {
54      edit: TextEdit::new(""),
55      state: LineState::new(),
56      // Every field is a tab stop by default, the way a form control is
57      // in a browser. Ordering falls out of render order unless a host
58      // sets `tab_index`.
59      focus: cx.focus_handle().tab_stop(true),
60      placeholder: SharedString::default(),
61      label: None,
62      description: None,
63      error: None,
64      size: Size::Sm,
65      radius: None,
66      disabled: false,
67      read_only: false,
68      password: false,
69      max_length: None,
70    }
71  }
72
73  pub fn value(mut self, value: &str) -> Self {
74    self.edit = TextEdit::new(value);
75    self
76  }
77
78  pub fn placeholder(mut self, placeholder: impl Into<SharedString>) -> Self {
79    self.placeholder = placeholder.into();
80    self
81  }
82
83  pub fn label(mut self, label: impl Into<SharedString>) -> Self {
84    self.label = Some(label.into());
85    self
86  }
87
88  pub fn description(mut self, description: impl Into<SharedString>) -> Self {
89    self.description = Some(description.into());
90    self
91  }
92
93  pub fn error(mut self, error: impl Into<SharedString>) -> Self {
94    self.error = Some(error.into());
95    self
96  }
97
98  pub fn size(mut self, size: Size) -> Self {
99    self.size = size;
100    self
101  }
102
103  pub fn radius(mut self, radius: Size) -> Self {
104    self.radius = Some(radius);
105    self
106  }
107
108  pub fn disabled(mut self, disabled: bool) -> Self {
109    self.disabled = disabled;
110    self
111  }
112
113  /// Selectable and copyable, but not editable — an `<input readonly>`.
114  /// Unlike [`disabled`](Self::disabled) the field still takes focus.
115  pub fn read_only(mut self, read_only: bool) -> Self {
116    self.read_only = read_only;
117    self
118  }
119
120  pub fn password(mut self, password: bool) -> Self {
121    self.password = password;
122    self
123  }
124
125  /// Cap the value's length in characters, like `<input maxlength>`.
126  pub fn max_length(mut self, max: usize) -> Self {
127    self.max_length = Some(max);
128    self
129  }
130
131  /// The current text.
132  pub fn text(&self) -> String {
133    self.edit.text()
134  }
135
136  /// Replace the text programmatically.
137  pub fn set_text(&mut self, value: &str, cx: &mut Context<Self>) {
138    self.edit.set_text(value);
139    cx.notify();
140  }
141
142  /// Select the whole value, as focusing a field with `<input autofocus>`
143  /// and a preset value tends to.
144  pub fn select_all(&mut self, cx: &mut Context<Self>) {
145    self.edit.select_all();
146    cx.notify();
147  }
148
149  /// Two-way bind the text to a `Signal<String>`. The signal is the source
150  /// of truth: the field adopts its value now, edits write back through
151  /// [`Signal::set_if_changed`], and signal writes replace the text without
152  /// emitting. Equality guards on both directions prevent update loops.
153  pub fn bind(entity: &Entity<TextInput>, signal: &Signal<String>, cx: &mut App) {
154    let initial = signal.get(cx);
155    entity.update(cx, |this, cx| this.sync_text(initial, cx));
156    let sink = signal.clone();
157    cx.subscribe(entity, move |_input, event: &TextInputEvent, cx| {
158      if let TextInputEvent::Change(text) = event {
159        sink.set_if_changed(cx, text.clone());
160      }
161    })
162    .detach();
163    let field = entity.downgrade();
164    cx.observe(signal.entity(), move |observed, cx| {
165      let text = observed.read(cx).clone();
166      field.update(cx, |this, cx| this.sync_text(text, cx)).ok();
167    })
168    .detach();
169  }
170
171  /// Programmatic set: repaint without emitting an event.
172  fn sync_text(&mut self, text: String, cx: &mut Context<Self>) {
173    if self.edit.text() != text {
174      self.edit.set_text(&text);
175      cx.notify();
176    }
177  }
178
179  fn on_key(&mut self, event: &KeyDownEvent, window: &mut Window, cx: &mut Context<Self>) {
180    if self.disabled {
181      return;
182    }
183    match line::keys(self, event, window, cx) {
184      KeyOutcome::Submit => {
185        cx.emit(TextInputEvent::Submit(self.edit.text()));
186        cx.notify();
187        cx.stop_propagation();
188      }
189      KeyOutcome::Edited => {
190        self.line_changed(cx);
191        cx.stop_propagation();
192      }
193      // Escape (Cancel) bubbles so dialogs can close on it. Printable
194      // keys pass too: the platform hands them to the input handler,
195      // which is what makes IME and dead keys work.
196      KeyOutcome::Cancel | KeyOutcome::Pass => {}
197    }
198  }
199}
200
201impl LineEditor for TextInput {
202  fn edit(&self) -> &TextEdit {
203    &self.edit
204  }
205
206  fn edit_mut(&mut self) -> &mut TextEdit {
207    &mut self.edit
208  }
209
210  fn line(&self) -> &LineState {
211    &self.state
212  }
213
214  fn line_mut(&mut self) -> &mut LineState {
215    &mut self.state
216  }
217
218  fn line_focus(&self) -> &FocusHandle {
219    &self.focus
220  }
221
222  fn line_masked(&self) -> bool {
223    self.password
224  }
225
226  fn line_read_only(&self) -> bool {
227    self.read_only || self.disabled
228  }
229
230  fn line_max_length(&self) -> Option<usize> {
231    self.max_length
232  }
233
234  fn line_changed(&mut self, cx: &mut Context<Self>) {
235    cx.emit(TextInputEvent::Change(self.edit.text()));
236    cx.notify();
237  }
238}
239
240line::line_input_handler!(TextInput);
241line::line_focus_builders!(TextInput);
242
243impl Render for TextInput {
244  fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
245    let t = theme(cx);
246    let (height, pad_x, font) = control_metrics(self.size);
247    let radius = t.radius(self.radius.unwrap_or(t.default_radius));
248    let focused = self.focus.is_focused(window) && !self.disabled;
249    let has_error = self.error.is_some();
250
251    let border = if has_error {
252      t.color(ColorName::Red, 6)
253    } else if focused {
254      t.primary()
255    } else {
256      t.border()
257    }
258    .hsla();
259    let dimmed = t.dimmed().hsla();
260    let surface = t.surface().hsla();
261
262    let line = Line::new(cx.entity()).placeholder(self.placeholder.clone(), dimmed);
263
264    let field = line::wire(div().id("guise-textinput"), &self.focus, cx)
265      .on_key_down(cx.listener(Self::on_key))
266      .flex()
267      .items_center()
268      .w_full()
269      .overflow_hidden()
270      .h(px(height))
271      .px(px(pad_x))
272      .rounded(px(radius))
273      .border_1()
274      .border_color(border)
275      .bg(surface)
276      .text_size(px(font))
277      .line_height(px(font * 1.3))
278      .child(div().flex_1().min_w(px(0.0)).child(line));
279
280    let mut chrome = Field::new().child(if self.disabled {
281      field.opacity(0.6)
282    } else {
283      field
284    });
285    if let Some(label) = self.label.clone() {
286      chrome = chrome.label(label);
287    }
288    if let Some(error) = self.error.clone() {
289      chrome = chrome.error(error);
290    } else if let Some(description) = self.description.clone() {
291      chrome = chrome.description(description);
292    }
293    chrome.probe_any("TextInput")
294  }
295}
guise/input/text.rs

guise/input/
text.rs
