Minimal unstyled Text Input with Parley

Cargo.toml

@@ -1012,6 +1012,17 @@ description = "Renders text to multiple windows with different scale factors usi
 category = "2D Rendering"
 wasm = true
 
+[[example]]
+name = "editable_text"
+path = "examples/ui/text/editable_text.rs"
+doc-scrape-examples = true
+
+[package.metadata.example.editable_text]
+name = "Editable Text"
+description = "Demonstrates a simple, unstyled text input widget"
+category = "UI (User Interface)"
+wasm = true
+
 [[example]]
 name = "texture_atlas"
 path = "examples/2d/texture_atlas.rs"

crates/bevy_sprite/src/lib.rs

@@ -93,6 +93,7 @@ impl Plugin for SpritePlugin {
                 .chain()
                 .after(detect_text_needs_rerender)
                 .after(bevy_text::load_font_assets_into_font_collection)
+                .after(bevy_text::apply_text_edits)
                 .after(bevy_app::AnimationSystems)
                 .before(bevy_asset::AssetEventSystems),
         )

crates/bevy_text/src/cursor.rs

@@ -0,0 +1,28 @@
+use bevy_color::{
+    palettes::css::{GREEN, RED},
+    Alpha as _, Color,
+};
+use bevy_ecs::component::Component;
+
+/// Controls text cursor appearance.
+///
+/// When this component on the same entity as an [`EditableText`](`crate::EditableText`) ,
+/// and the [`UiRenderPlugin`](https://docs.rs/bevy/latest/bevy/ui_render/struct.UiRenderPlugin.html)
+/// is active, a simple rectangle will be drawn for the cursor.
+/// This is an optional component, to allow for stylistic cursors.
+#[derive(Component, Clone, Copy, Debug, PartialEq)]
+pub struct TextCursorStyle {
+    /// Color of the cursor
+    pub color: Color,
+    /// Background color of selected text
+    pub selection_color: Color,
+}
+
+impl Default for TextCursorStyle {
+    fn default() -> Self {
+        Self {
+            color: RED.into(),
+            selection_color: Color::from(GREEN).with_alpha(0.5),
+        }
+    }
+}

crates/bevy_text/src/lib.rs

@@ -32,6 +32,7 @@
 extern crate alloc;
 
 mod bounds;
+mod cursor;
 mod error;
 mod font;
 mod font_atlas;
@@ -42,8 +43,11 @@ mod parley_context;
 mod pipeline;
 mod text;
 mod text_access;
+mod text_edit;
+mod text_editable;
 
 pub use bounds::*;
+pub use cursor::*;
 pub use error::*;
 pub use font::*;
 pub use font_atlas::*;
@@ -54,6 +58,8 @@ pub use parley_context::*;
 pub use pipeline::*;
 pub use text::*;
 pub use text_access::*;
+pub use text_edit::*;
+pub use text_editable::*;
 
 /// The text prelude.
 ///
@@ -86,6 +92,10 @@ pub struct TextPlugin;
 #[derive(Debug, Hash, PartialEq, Eq, Clone, SystemSet)]
 pub struct Text2dUpdateSystems;
 
+/// System set where [`EditableText::pending_edits`] are applied.
+#[derive(Debug, Hash, PartialEq, Eq, Clone, SystemSet)]
+pub struct EditableTextSystems;
+
 impl Plugin for TextPlugin {
     fn build(&self, app: &mut App) {
         app.init_asset::<Font>()
@@ -105,7 +115,8 @@ impl Plugin for TextPlugin {
                 )
                     .chain(),
             )
-            .add_systems(Last, trim_source_cache);
+            .add_systems(Last, trim_source_cache)
+            .add_systems(PostUpdate, apply_text_edits.in_set(EditableTextSystems));
 
         #[cfg(feature = "default_font")]
         {

crates/bevy_text/src/pipeline.rs

@@ -207,7 +207,7 @@ impl TextPipeline {
                 );
                 builder.push(StyleProperty::FontSize(section.font_size), range.clone());
                 builder.push(
-                    StyleProperty::LineHeight(section.line_height.eval(section.font_size)),
+                    StyleProperty::LineHeight(section.line_height.eval()),
                     range.clone(),
                 );
                 builder.push(
@@ -410,18 +410,20 @@ impl TextPipeline {
         }
 
         layout_info.size = Vec2::new(layout.full_width(), layout.height()).ceil();
+
         Ok(())
     }
 }
 
-fn resolve_font_source<'a>(
+/// Resolve a [`FontSource`], producing a [`FontFamily`], by looking it up in the [`Assets<Font>`] collection.
+pub fn resolve_font_source<'a>(
     font: &'a FontSource,
-    fonts: &'a Assets<Font>,
+    fonts: &Assets<Font>,
 ) -> Result<FontFamily<'a>, TextError> {
     Ok(match font {
         FontSource::Handle(handle) => {
             let font = fonts.get(handle.id()).ok_or(TextError::NoSuchFont)?;
-            FontFamily::Named(Cow::Borrowed(font.family_name.as_str()))
+            FontFamily::Named(Cow::Owned(font.family_name.as_str().to_owned()))
         }
         FontSource::Family(family) => FontFamily::Named(Cow::Borrowed(family.as_str())),
         FontSource::Serif => FontFamily::Generic(parley::GenericFamily::Serif),
@@ -459,6 +461,10 @@ pub struct TextLayoutInfo {
     pub run_geometry: Vec<RunGeometry>,
     /// The glyphs resulting size
     pub size: Vec2,
+    /// Cursor size and position for editing
+    pub cursor: Option<Rect>,
+    /// Selection rects
+    pub selection_rects: Vec<Rect>,
 }
 
 impl TextLayoutInfo {
@@ -468,6 +474,8 @@ impl TextLayoutInfo {
         self.glyphs.clear();
         self.run_geometry.clear();
         self.size = Vec2::ZERO;
+        self.cursor = None;
+        self.selection_rects.clear();
     }
 }
 

crates/bevy_text/src/text.rs

@@ -928,7 +928,8 @@ pub enum LineHeight {
 }
 
 impl LineHeight {
-    pub(crate) fn eval(self, _font_size: f32) -> parley::LineHeight {
+    /// eval a line height
+    pub fn eval(self) -> parley::LineHeight {
         match self {
             LineHeight::Px(px) => parley::LineHeight::Absolute(px),
             LineHeight::RelativeToFont(scale) => parley::LineHeight::FontSizeRelative(scale),

crates/bevy_text/src/text_edit.rs

@@ -0,0 +1,65 @@
+use bevy_reflect::Reflect;
+use parley::PlainEditorDriver;
+use smol_str::SmolStr;
+
+use crate::TextBrush;
+
+/// Deferred text input edit and navigation actions applied by the `apply_text_edits` system.
+#[derive(Debug, Clone, PartialEq, Eq, Reflect)]
+pub enum TextEdit {
+    /// Insert a character at the cursor. If there is a selection, replaces the selection with the character instead.
+    ///
+    /// Typically generated in response to keyboard text input events.
+    ///
+    /// This is intended to insert a single Unicode grapheme cluster, such as a letter, digit, punctuation mark, or emoji.
+    Insert(SmolStr),
+    /// Delete the character behind the cursor.
+    /// If there is a selection, deletes the selection instead.
+    ///
+    /// Typically generated in response to the backspace key.
+    ///
+    /// This operation removes an entire Unicode grapheme cluster, which may consist of multiple bytes,
+    /// shifting the cursor position accordingly.
+    Backspace,
+    /// Delete the character at the cursor.
+    /// If there is a selection, deletes the selection instead.
+    ///
+    /// Typically generated in response to the delete key.
+    ///
+    /// This operation removes an entire Unicode grapheme cluster, which may consist of multiple bytes,
+    /// shifting the cursor position accordingly.
+    Delete,
+    /// Moves the cursor by one position to the right.
+    ///
+    /// Typically generated in response to the right key.
+    MoveCursorRight,
+    /// Moves the cursor by one position to the left.
+    ///
+    /// Typically generated in response to the left key.
+    MoveCursorLeft,
+    /// Move selection on to the right.
+    ///
+    /// Typically generated in response to shift and the right key.
+    SelectRight,
+    /// Move selection on to the left.
+    ///
+    /// Typically generated in response to shift and the left key.
+    SelectLeft,
+}
+
+/// Takes a `TextEdit` and applies to `PlainEditorDriver`
+pub fn apply_edit<'a>(
+    edit: TextEdit,
+    mut driver: PlainEditorDriver<'a, TextBrush>,
+) -> PlainEditorDriver<'a, TextBrush> {
+    match edit {
+        TextEdit::Insert(str) => driver.insert_or_replace_selection(&str),
+        TextEdit::Backspace => driver.backdelete(),
+        TextEdit::Delete => driver.delete(),
+        TextEdit::MoveCursorRight => driver.move_right(),
+        TextEdit::MoveCursorLeft => driver.move_left(),
+        TextEdit::SelectRight => driver.select_right(),
+        TextEdit::SelectLeft => driver.select_left(),
+    }
+    driver
+}