I’d like to display a @mention inside of an ion-textarea component.
I’m using the angular-mentions library to handle the dropdown select menu for showing a list of people you can mention.
Instead of just encoding the mention as a string, I’d like to encode the mention as something like: <@uid=abc123&firstName=Foo&lastName=Bar> so that a message might look something like:
Hey <@uid=abc123&firstName=Foo&lastName=Bar> how's it going?
But obviously I don’t want to display it this way as a person types, instead I want to inject a span with some highlight html and only display the first & last names:
Hey <span style="custom stuff">@Foo Bar</span> how's it going?
I’m having a hard time wrapping my head around how to decouple the [value] of an ion-textarea from the display vs underlying data.
I tried writing a pipe but this converts the value which gets fed back into the pipe.
Instead I think I need either a custom directive that accesses the value of the ion-textarea and injects some innerHtml OR I need to create my own custom div that acts like an ion-textarea using contenteditable and needing to reproduce autogrow, placeholder, etc (all the stuff we get for free using ion-textarea)
Any thoughts/suggestions would be greatly appreciated.
(Using ionic angular v5.9)
2 posts - 2 participants