How to encode a mention using some custom HTML inside an input/textarea

[santekotturi]

I can get a @mention working correctly but I want to encode the underlying mention with a UID for the person mentioned so that my underlying encoded value of the textarea [value] would be something like Hey <@s8asdj239dkadjs>! but this would be displayed as Hey Sam! in the textarea.

I've tried using a pipe so that <textarea [mentionConfig]="mentionConfig" [value]="message | mention" (ngModelChange)="updateValue($event)"> but a pipe modifies the value and thus my model change gets triggered.

Essentially, I need to decouple the view from the data, not sure that's possible with textarea so then I need to use a contenteditable div and recreate all the functionality of a textarea such as autoexpand, placeholder, min, max, etc...

Has anyone done this before? Is there a way to create an angular directive that injects custom HTML back into the textarea without modifying the underlying value of the textarea?

[santekotturi]

It turns out you'll have to use a div with contenteditable because you cannot change the innerHtml of an input or textarea. I'm working on a custom directive and pipe that essentially build an array of mentions, stores the index in the innerText string of where the mentions is and the pipes some custom html with the highlighted mention so that when you type mentions, they show up with custom html. Works in Chrome, Safari is iffy. Hoping to clean it up and polish some rough edges where setTimeouts were used but probably won't work in prod.

[darkl1ght]

hi @skotturi can you provide any reference for your code? or how you were able to achieve that?