feat(examples): cursor can be moved left/right and character at cursor position can be deleted/inserted

[BoolPurist]

Changes

Added cursor navigation to the user input example. User can now move cursor left and right. In addition user can also insert/delete characters at the cursor position.

Demo

Note

Could also put this demonstration into a new example file if you prefer it this way.

[codecov]

Codecov Report

Merging #302 (9e20ff0) into main (e66d5cd) will not change coverage.
The diff coverage is n/a.

❗ Current head 9e20ff0 differs from pull request most recent head 0a5ab2c. Consider uploading reports for the commit 0a5ab2c to get more accurate results

@@           Coverage Diff           @@
##             main     #302   +/-   ##
=======================================
  Coverage   83.21%   83.21%           
=======================================
  Files          37       37           
  Lines        7764     7764           
=======================================
  Hits         6461     6461           
  Misses       1303     1303           

[joshka]

Let's not get too much more complicated with this example. An example that uses the tui-textarea or tui-input libraries might be worth considering.

[mindoodoo]

Let's not get too much more complicated with this example. An example that uses the tui-textarea or tui-input libraries might be worth considering.

This example in it's current state also has a couple bugs with unicode characters width, so might be interesting to look into how those crates handle unicode char width and if their solution might be better.

I'm unsure though about including examples using external crate widgets. Would you add another example alongside this one or would it take it's place ?

[sayanarijit]

Agree. Examples should be as simple as possible, and not deviate from demonstrating its primary use case.

Related/unrelated, we should probably have unicode handling built-in. I believe this falls under this crate's primary objectives.

EDIT: Sorry, I see now, ratatui already handles unicode width where possible... but it's not abstracted enough.

[BoolPurist]

I realize now that the previously mentioned crates, tui-input and tui-textarea, are meant for that purpose xD

In my application I often end up needing some kind of input field.

In my opinion an input field example with a non-adjustable cursor seems not particular useful to me and the lack of Unicode width support appears like a trap which bites me back later.

As a new user of ratatui I would appreciate 2 kind of examples in the area of input boxes.

1. A simple one line input field.
2. A multi-line input field.

Both example should include input with unicode width support and the ability to move the cursor around.

if this is out of the scope for this crate, then I find examples for user input more useful if they at least show that you use these external crates for input boxes.

That said, I would also not mind if my solution is replaced by such an example with the usage of an external crate.

[joshka]

I think eventually we should combine the two crates and bring them into ratatui as a core widget (or perhaps as a separate widgets crate?)

[joshka]

@mindoodoo wrote:

I'm unsure though about including examples using external crate widgets. Would you add another example alongside this one or would it take it's place ?

My intent was to communicate that we don't need to try to re-implement those crates in this example. Perhaps it would be a good idea to add a small comment in the current example pointing readers in the correct direction of the crates.

[mindoodoo]

Ah I see what you mean now. I think it might be interesting to provide examples for those external crates in the meantime, but bringing one or a combination of the two into ratatui would be interesting I think.

[joshka]

Approved subject to the small requested change (document the reason for not using input.remove())
Also, please rebase this (there's some small changes to the imports in the main branch.

[joshka]

LGTM - thanks for submitting this PR. :)
I'll leave this to @mindoodoo to merge

[mindoodoo]

LGTM, would just like to see a mention that this example does not try to handle unicode characters and then will merge !

[joshka]

force push has the comment update, a rebase on main and a cargo fmt of the new comment

[joshka]

Hey @BoolPurist thanks for your contribution. The changes are merged.