Replace chat @mentioning with a text-editable plugin

[SabreCat]

Description

Part of the username overhaul project underway is to make chat @mentioning prettier and more user-friendly. The majority of the implementation is accomplished on #10784, but given our use of a textarea component in chat, we weren't able to add styling for autocompleted @s within the text entry field itself. To make this possible, we'd need to replace our current autocomplete implementation, using a contenteditable div instead of a textarea. From there, we could employ an existing Vue plugin like https://github.com/fritx/vue-at to reimplement the rest of the functionality.

[jackcogdill]

Hey, wondering if I could work on this? I have some experience with contenteditable divs.

[paglias]

@jackcogdill thanks for the interest but I think this issue is a bit outdated as we actually addressed the contenteditable issue in this PR https://github.com/HabitRPG/habitica/pull/10872/files#diff-f9db085b45d481950984d26ae407e383R15 which is currently blocked for unrelated reasons

@SabreCat will be able to confirm

[SabreCat]

That is correct, @paglias, thanks for updating the labels! @jackcogdill, sorry for the misleading tag there--I hope you can find something else suited to your interests to work on!

[jackcogdill]

@SabreCat Thank you for following up. I was also wondering, is there a current feature request for adding keyboard support for the @mentions in the chat? It does not appear to be accessible currently.

[Alys]

@jackcogdill #9291 "@Username selection with keyboard arrow keys in drop-down mentions list in chat"
If you comment there to say you'd like to work on it, we'll mark it as in progress for you.

It's certainly an issue I'd love to see fixed!

[veeeeeee]

Even though the above mentioned PR has been merged, we're keep this issue on hold for a more in-depth look at how @mentioning works under the hood.