1use std::rc::Rc;
2
3use editor::Editor;
4use gpui::{AnyElement, ElementId, Focusable, TextStyleRefinement};
5use settings::Settings as _;
6use theme::ThemeSettings;
7use ui::{Tooltip, prelude::*, rems};
8
9#[derive(IntoElement)]
10pub struct SettingsInputField {
11 id: Option<ElementId>,
12 initial_text: Option<String>,
13 placeholder: Option<&'static str>,
14 confirm: Option<Rc<dyn Fn(Option<String>, &mut Window, &mut App)>>,
15 tab_index: Option<isize>,
16 use_buffer_font: bool,
17 display_confirm_button: bool,
18 display_clear_button: bool,
19 clear_on_confirm: bool,
20 action_slot: Option<AnyElement>,
21 color: Option<Color>,
22}
23
24impl SettingsInputField {
25 pub fn new() -> Self {
26 Self {
27 id: None,
28 initial_text: None,
29 placeholder: None,
30 confirm: None,
31 tab_index: None,
32 use_buffer_font: false,
33 display_confirm_button: false,
34 display_clear_button: false,
35 clear_on_confirm: false,
36 action_slot: None,
37 color: None,
38 }
39 }
40
41 pub fn with_id(mut self, id: impl Into<ElementId>) -> Self {
42 self.id = Some(id.into());
43 self
44 }
45
46 pub fn with_initial_text(mut self, initial_text: String) -> Self {
47 self.initial_text = Some(initial_text);
48 self
49 }
50
51 pub fn with_placeholder(mut self, placeholder: &'static str) -> Self {
52 self.placeholder = Some(placeholder);
53 self
54 }
55
56 pub fn on_confirm(
57 mut self,
58 confirm: impl Fn(Option<String>, &mut Window, &mut App) + 'static,
59 ) -> Self {
60 self.confirm = Some(Rc::new(confirm));
61 self
62 }
63
64 pub fn display_confirm_button(mut self) -> Self {
65 self.display_confirm_button = true;
66 self
67 }
68
69 pub fn display_clear_button(mut self) -> Self {
70 self.display_clear_button = true;
71 self
72 }
73
74 pub fn clear_on_confirm(mut self) -> Self {
75 self.clear_on_confirm = true;
76 self
77 }
78
79 pub fn action_slot(mut self, action: impl IntoElement) -> Self {
80 self.action_slot = Some(action.into_any_element());
81 self
82 }
83
84 pub(crate) fn tab_index(mut self, arg: isize) -> Self {
85 self.tab_index = Some(arg);
86 self
87 }
88
89 pub fn with_buffer_font(mut self) -> Self {
90 self.use_buffer_font = true;
91 self
92 }
93
94 pub fn color(mut self, color: Color) -> Self {
95 self.color = Some(color);
96 self
97 }
98}
99
100impl RenderOnce for SettingsInputField {
101 fn render(self, window: &mut Window, cx: &mut App) -> impl ui::IntoElement {
102 let settings = ThemeSettings::get_global(cx);
103 let use_buffer_font = self.use_buffer_font;
104 let color = self.color.map(|c| c.color(cx));
105 let styles = TextStyleRefinement {
106 font_family: use_buffer_font.then(|| settings.buffer_font.family.clone()),
107 font_size: use_buffer_font.then(|| rems(0.75).into()),
108 color,
109 ..Default::default()
110 };
111
112 let editor = if let Some(id) = self.id {
113 window.use_keyed_state(id, cx, {
114 let initial_text = self.initial_text.clone();
115 let placeholder = self.placeholder;
116 move |window, cx| {
117 let mut editor = Editor::single_line(window, cx);
118 if let Some(text) = initial_text {
119 editor.set_text(text, window, cx);
120 }
121
122 if let Some(placeholder) = placeholder {
123 editor.set_placeholder_text(placeholder, window, cx);
124 }
125 editor.set_text_style_refinement(styles);
126 editor
127 }
128 })
129 } else {
130 window.use_state(cx, {
131 let initial_text = self.initial_text.clone();
132 let placeholder = self.placeholder;
133 move |window, cx| {
134 let mut editor = Editor::single_line(window, cx);
135 if let Some(text) = initial_text {
136 editor.set_text(text, window, cx);
137 }
138
139 if let Some(placeholder) = placeholder {
140 editor.set_placeholder_text(placeholder, window, cx);
141 }
142 editor.set_text_style_refinement(styles);
143 editor
144 }
145 })
146 };
147
148 // When settings change externally (e.g. editing settings.json), the page
149 // re-renders but use_keyed_state returns the cached editor with stale text.
150 // Reconcile with the expected initial_text when the editor is not focused,
151 // so we don't clobber what the user is actively typing.
152 if let Some(initial_text) = &self.initial_text {
153 let current_text = editor.read(cx).text(cx);
154 if current_text != *initial_text && !editor.read(cx).is_focused(window) {
155 editor.update(cx, |editor, cx| {
156 editor.set_text(initial_text.clone(), window, cx);
157 });
158 }
159 }
160
161 let weak_editor = editor.downgrade();
162 let weak_editor_for_button = editor.downgrade();
163 let weak_editor_for_clear = editor.downgrade();
164
165 let clear_on_confirm = self.clear_on_confirm;
166 let clear_on_confirm_for_button = self.clear_on_confirm;
167
168 let theme_colors = cx.theme().colors();
169
170 let display_confirm_button = self.display_confirm_button;
171 let display_clear_button = self.display_clear_button;
172 let confirm_for_button = self.confirm.clone();
173 let is_editor_empty = editor.read(cx).text(cx).trim().is_empty();
174 let is_editor_focused = editor.read(cx).is_focused(window);
175
176 h_flex()
177 .group("settings-input-field-editor")
178 .relative()
179 .py_1()
180 .px_2()
181 .h_8()
182 .min_w_64()
183 .rounded_md()
184 .border_1()
185 .border_color(theme_colors.border)
186 .bg(theme_colors.editor_background)
187 .when_some(self.tab_index, |this, tab_index| {
188 let focus_handle = editor.focus_handle(cx).tab_index(tab_index).tab_stop(true);
189 this.track_focus(&focus_handle)
190 .focus(|s| s.border_color(theme_colors.border_focused))
191 })
192 .child(editor)
193 .child(
194 h_flex()
195 .absolute()
196 .top_1()
197 .right_1()
198 .invisible()
199 .when(is_editor_focused, |this| this.visible())
200 .group_hover("settings-input-field-editor", |this| this.visible())
201 .when(
202 display_clear_button && !is_editor_empty && is_editor_focused,
203 |this| {
204 this.child(
205 IconButton::new("clear-button", IconName::Close)
206 .icon_size(IconSize::Small)
207 .icon_color(Color::Muted)
208 .tooltip(Tooltip::text("Clear"))
209 .on_click(move |_, window, cx| {
210 let Some(editor) = weak_editor_for_clear.upgrade() else {
211 return;
212 };
213 editor.update(cx, |editor, cx| {
214 editor.set_text("", window, cx);
215 });
216 }),
217 )
218 },
219 )
220 .when(
221 display_confirm_button && !is_editor_empty && is_editor_focused,
222 |this| {
223 this.child(
224 IconButton::new("confirm-button", IconName::Check)
225 .icon_size(IconSize::Small)
226 .icon_color(Color::Success)
227 .tooltip(Tooltip::text("Enter to Confirm"))
228 .on_click(move |_, window, cx| {
229 let Some(confirm) = confirm_for_button.as_ref() else {
230 return;
231 };
232 let Some(editor) = weak_editor_for_button.upgrade() else {
233 return;
234 };
235 let new_value =
236 editor.read_with(cx, |editor, cx| editor.text(cx));
237 let new_value =
238 (!new_value.is_empty()).then_some(new_value);
239 confirm(new_value, window, cx);
240 if clear_on_confirm_for_button {
241 editor.update(cx, |editor, cx| {
242 editor.set_text("", window, cx);
243 });
244 }
245 }),
246 )
247 },
248 )
249 .when_some(self.action_slot, |this, action| this.child(action)),
250 )
251 .when_some(self.confirm, |this, confirm| {
252 this.on_action::<menu::Confirm>({
253 move |_, window, cx| {
254 let Some(editor) = weak_editor.upgrade() else {
255 return;
256 };
257 let new_value = editor.read_with(cx, |editor, cx| editor.text(cx));
258 let new_value = (!new_value.is_empty()).then_some(new_value);
259 confirm(new_value, window, cx);
260 if clear_on_confirm {
261 editor.update(cx, |editor, cx| {
262 editor.set_text("", window, cx);
263 });
264 }
265 }
266 })
267 })
268 }
269}