Dynamic Text Insertion and Deletion

[RujulGandhi]

I am working on implementing an @mention feature in a text editor and I have a few specific requirements and questions about handling user interactions and text manipulation:

1. Dynamic Text Appending: When a user selects a username from a popup after typing '@', how can I dynamically append the selected username into the text editor at the cursor's current position?

2. Detecting '@' in Text Editor: What method can I use to detect when a user types the '@' character, so that I can trigger the username suggestion popup?

3. Efficient Text Deletion: Is there a way to delete the entire username in one action (e.g., pressing backspace) instead of deleting character by character? I'd like to enhance the user experience by allowing for easier editing of mentions.

I am looking for suggestions or advice on how to implement these functionalities effectively, possibly with code examples or references to documentation. Any help would be greatly appreciated!

Thank you in advance for your assistance!

[MohamedRejeb]

Hi,
This is one of the missing features of the library, I try to provide this in the next release.

Thanks for the detailed suggestions.

[RujulGandhi]

Hi,

Thank you for considering of this feature in the next release!

In the meantime, I was wondering if you could share an estimated release date for the next version? Having a rough timeline would help me plan my implementation accordingly.

Additionally, while awaiting the official implementation, do you have any suggestions for alternative methods to observe the '@' character in the text editor? I'd appreciate any guidance or workaround you might have in mind.

Thank you once again for your attention to this matter.

[MohamedRejeb]

Hopefully at the end of this week or the next week.
I think that it's possible now to observe the @ by observing any change and do some text manipulation. Something like this:

LaunchedEffect(state.selection, state.annotatedString) {
    // Use the current text and the cursor position to look for the first @ char before the cursor and then you can get the data that you want.
}

[RujulGandhi]

Yes by your given suggestion I am able to observe text, but same way I want to observe that text is getting deleted because in mine case I want to hide Mention popup once someone is deleting @ from Editor. Can you suggest me something.

[MohamedRejeb]

Yes I think that you can do it with the same approach. I would suggest saving the @ index when it gets added to distinguish between multiple mentions. So let's say that you detected that there's an @ before the cursor, save that position when you open the popup, then if the cursor position is lower than the saved mention position, you hide the popup.

[RujulGandhi]

I feel storing index of @ will be costly operation because any time user can change anything from contain I have to keep updating my @ index also.

[MohamedRejeb]

You can save it when you open the popup, just with the action of opening the popup. Then if the popup is opened and the cursor position is lower than the @ position, you can close the popup.

[RujulGandhi]

yes that might be easier solution. Thanks

[RujulGandhi]

@MohamedRejeb this feature you are releasing it in this week Right ?

[LaatonWalaBhoot]

@MohamedRejeb I tried doing this by using Visual Transformation but got nowhere. The offset mapping usually results in regression. Plus deleting items completely screws up spans. There is no span listener in normal textFields. I have searched everywhere, there does not seem to be any working solution for compose anywhere

[MohamedRejeb]

Hi,
The needed APIs for this feature are already implemented but internal for now, I will see if it's possible to expose them with some improvements.

[LaatonWalaBhoot]

https://github.com/linkedin/Spyglass This is already implemented for EditTexts. If you want to have a look at the API design.
I am able to trigger suggestion on @ but adding and removing spans is causing all sorts of issues

[LaatonWalaBhoot]

@MohamedRejeb Any timeline on this feature? It is highly requested by compose users and I don't think there is an existing solution