Custom html inside <ion-textarea>

Ionic Framework Ionic Angular
1

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

While you wait for better answers, I would suggest having a separate preview component, as Discourse does. Much cleaner.

3

I’d like to keep it looking like slack/signal/iMessage/telegram/whatsapp etc although I definitely see why it would be easier to do it as Discourse does (I read an earlier post where you recommended the same thing and considered it heavily as it would make my life MUCH easier…ha)