Text input field UI component

[cjhowedev]

What problem does this solve or what need does it fill?

Provide a text field UI component which allows entering unicode text through the keyboard.

What solution would you like?

We will need focus handling and event routing to ensure only the focused text field receives the unicode character.

A framework for building/handling forms on top of the various input types would be great as well.

What alternative(s) have you considered?

Additional context

[rparrett]

Added to the UI project board, replacing the existing empty text input placeholder there

[mockersf]

there is also the ReceivedCharacter event that is directly translated from the winit event

[minecrawler]

I think, a featured input element is very difficult to provide, since it has to handle so many things. I'd love to see

At least:

• Proper cursor position handling
• Standard behavior, like copy, paste, select with native keyboard shortcut handling
• Readonly toggling
• Show/hide value (for passwords)
• Placeholder text
• IME support
• LTR + RTL
• Text overflow
• A11y for stuff like screen readers

And ideally:

• Advanced processing, like min/max characters (Unicode safe!), input patterns (RegEx?), etc.
• Input constrains (masks)
• Auto-complete suggestions

[cjhowedev]

I'm looking into this. It looks like glyph_brush_layout supports outputting the line height, which we will need to position the cursor vertically. For the horizontal positioning, I think we can just average the x position of adjacent characters to find the x position of the cursor. However, I don't know that bevy_text supports outputting that same line height information, so we likely need to make changes there.

As for IME support, this is blocked on a stagnant winit initiative.

[alice-i-cecile]

Some experimentation here: https://github.com/wanderrful/yet-another-bevy-project/tree/experiment-7/src/ui/text_input

Looks like it badly wants that IME support...

Standard issues with "how do we create multi-entity assemblies" of course. Overall a good base to take inspiration from, even if the organization is not quite Bevy-idiomatic.

[StarArawn]

Kayak UI has a text box that supports:

• Moveable Cursor Position
• Text Overflow
• Proper grapheme support for multi byte chars.

Some of the code is a bit messy, but I think it's a good starting point for a bevy UI implementation:
https://github.com/StarArawn/kayak_ui/blob/main/src/widgets/text_box.rs

[rparrett]

Just dropping a few other third-party text input crates for folks coming to this issue looking for a solution, or for inspiration:

https://github.com/StaffEngineer/bevy_cosmic_edit
Emoji, ligatures, selection, and other fancy stuff. Uses Cosmic Text. (See #10193 for the Bevy integration effort).

https://github.com/rparrett/bevy_simple_text_input
Similar feature set to kayak's text input, minus the unicode text segmentation.