Alt text: Alt text counter

[AdamGrzybkowski]

Closes #502

Description

This PR adds a little counter to show the remaining characters count for the alt text. Once the limit is reached the alt text won't be modified.

alt_text_limit.mp4

Testing Steps

1. Launch the QE
2. Open the avatar's menu and tap Alt text
3. Add new characters to the input field to reach the limit
4. Confirm no more chars can be added
5. Remove the text completely
6. Confirm the counter shows 125
7. Paste a text that's longer than 125 chars
8. Confirm only the first 125 chars were copied

[wpmobilebot]

📲 You can test the changes from this Pull Request in Gravatar Demo by scanning the QR code below to install the corresponding build.

	App Name	Gravatar Demo
	Commit	69bef4c
	Direct Download	gravatar-demo-prototype-build-pr529-69bef4c.apk

[AdamGrzybkowski]

We don't need to set this manually, so I moved it here and set it conditionally.

[AdamGrzybkowski]

I think this is a bit more future-proof as we are only testing the states after AvatarAltTextSaveTapped event without skipping fixed numbers of states.

[mlumeau]

I noticed a couple of things while testing:

• When I hit 0 in the counter, move the caret to the middle of the paragraph and start typing again, it erases the end of the text. Is that on purpose?
• This is maybe worth creating another issue but when adding multiple new lines at some point the "save" button disappears with no way to bring it back.

Screen_recording_20250110_144921.mp4

[AdamGrzybkowski]

When I hit 0 in the counter, move the caret to the middle of the paragraph and start typing again, it erases the end of the text. Is that on purpose?

Not on purpose, but that's what the take(125) does now. I'm open to whether this is ok for us or not.

This is maybe worth creating another issue but when adding multiple new lines at some point the "save" button disappears with no way to bring it back.

Yes, this is unrelated. #533

[hamorillo]

Not on purpose, but that's what the take(125) does now. I'm open to whether this is ok for us or not.

That behavior can create some misunderstandings. However, I agree it's not easy to handle; for example, what if I have five left characters and I paste 20 characters in the middle? We have to consider those cases.

For example, Revolut handles that with a negative counter. When you reach the limit, you are not allowed to add any more characters.

[AdamGrzybkowski]

I wouldn't complicate things too much. Here's my suggestion:

• Disallow adding extra characters when the alt text reaches the limit regardless of the cursor position.
• Keep the first 125 chars from the inserted text when the limit is not reached. That would mean some text could be lost if the cursor was in the middle (current behavior).

WDYT?

[mlumeau]

I wouldn't complicate things too much. Here's my suggestion:

• Disallow adding extra characters when the alt text reaches the limit regardless of the cursor position.
• Keep the first 125 chars from the inserted text when the limit is not reached. That would mean some text could be lost if the cursor was in the middle (current behavior).

WDYT?

Sounds good to me! I doubt we'll get many complaints about this obscure edge case anyway.

[AdamGrzybkowski]

@mlumeau @hamorillo Done.

[mlumeau]

👍 LGTM. I noticed a tiny weird thing, totally not blocking: the caret is still moving when trying to insert text at limit.

[hamorillo]

I was writing a similar comment to Maxime's about the cursor moving without inserting any text. 🙂

[hamorillo]

⛏ I think we can replace it with fillMaxSize()

[AdamGrzybkowski]

I noticed a tiny weird thing, totally not blocking: the caret is still moving when trying to insert text at limit.

Yeah, I noticed that. The thing is we don't control the cursor position and to do that we have to keep that in the ViewModel. I did a quick try and it's a pain, to be honest. I will merge this for now and we can improve this later if we feel like it's a big issue.