Fix centered & right aligned TextEdit (#8082)

A couple improvements to centered and right-aligned text edits:
- Fix text selection in centered and right aligned text edits
(ironically, this broke in #8076)
- Fix cursor movement in centered and right aligned text edits
(horizontal cursor position will be retained on vertical movement)
- Multiline text edit exceeding available width if there are atoms
- Added atoms & alignment options to text edit demo
- Improve how vertical_align and horizontal_align are applied
- Textedit atom is grow now, removing the need for the extra seperate
grow atom
- This allows us to apply the `align` on the text edit atom instead of
the whole AtomLayout
  - Fixes https://github.com/emilk/egui/pull/8022
  - Fixes https://github.com/emilk/egui/issues/7999

crates/egui_demo_lib/src/demo/text_edit.rs

@@ -1,15 +1,21 @@
+use egui::{Align, Align2, AtomExt as _};
+
 /// Showcase [`egui::TextEdit`].
 #[derive(PartialEq, Eq)]
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
 #[cfg_attr(feature = "serde", serde(default))]
 pub struct TextEditDemo {
     pub text: String,
+    halign: egui::Align,
+    valign: egui::Align,
 }
 
 impl Default for TextEditDemo {
     fn default() -> Self {
         Self {
             text: "Edit this text".to_owned(),
+            halign: egui::Align::LEFT,
+            valign: egui::Align::TOP,
         }
     }
 }
@@ -37,7 +43,11 @@ impl crate::View for TextEditDemo {
             ui.add(crate::egui_github_link_file!());
         });
 
-        let Self { text } = self;
+        let Self {
+            text,
+            halign,
+            valign,
+        } = self;
 
         ui.horizontal(|ui| {
             ui.spacing_mut().item_spacing.x = 0.0;
@@ -46,10 +56,40 @@ impl crate::View for TextEditDemo {
             ui.label(".");
         });
 
+        ui.horizontal(|ui| {
+            ui.label("Horizontal align:");
+            ui.selectable_value(halign, egui::Align::LEFT, "Left");
+            ui.selectable_value(halign, egui::Align::Center, "Center");
+            ui.selectable_value(halign, egui::Align::RIGHT, "Right");
+        });
+        ui.horizontal(|ui| {
+            ui.label("Vertical align:");
+            ui.selectable_value(valign, egui::Align::TOP, "Top");
+            ui.selectable_value(valign, egui::Align::Center, "Center");
+            ui.selectable_value(valign, egui::Align::BOTTOM, "Bottom");
+        });
+
+        let clear_id = egui::Id::new("clear_button");
+        let clear_size = egui::Vec2::splat(ui.spacing().interact_size.y);
+
         let output = egui::TextEdit::multiline(text)
             .hint_text("Type something!")
+            // Atoms are centered by default, so we need to pass the right align here:
+            .prefix("🔎".atom_align(Align2([Align::LEFT, *valign])))
+            .suffix(
+                egui::Atom::custom(clear_id, clear_size)
+                    .atom_align(Align2([Align::RIGHT, *valign])),
+            )
+            .horizontal_align(*halign)
+            .vertical_align(*valign)
             .show(ui);
 
+        if let Some(rect) = output.response.rect(clear_id)
+            && ui.place(rect, egui::Button::new("❌")).clicked()
+        {
+            text.clear();
+        }
+
         ui.horizontal(|ui| {
             ui.spacing_mut().item_spacing.x = 0.0;
             ui.label("Selected text: ");

crates/egui_demo_lib/tests/snapshots/demos/TextEdit.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9c09529c3a1c26c8f28c00fc15cc5f495842862276870c24b5ee0713954f97fc
-size 21916
+oid sha256:94c4af5715992f4dbb5bbec6ce67eec1e2f66cfc078a3e704ec386bdb482cac4
+size 30064