I’m working on a chat app in angular 13, where I’m using a contenteditable as my text input for the message to be sent. The mentions are in the format @steve c#34251 where ‘Steve c’ is the username and ‘34251’ is the user ID. upon selecting the tag from the drop down I want it to be formatted as Steve c. Here is my div;
<div #msgTypeArea contenteditable="true" appCustomAutoComplete (outputData)="captureData($event)" class="text-area" (input)="getInput($event)"></div>
where appCustomAutoComplete is a directive for showing the ul for which tags are handled. My ts is;
getInput(event) {
this.userMessage = event.target.textContent;
// event.target.innerHTML = this.chatTaggedPersonsPipe.transform(this.userMessage);
}
where userMessage is the data that will be sent through the API. I created a pipe called chatTaggedPersonsPipe to convert tags to spans with just the name in it. But when I uncomment the second line of getInput(), the div starts acting weird; the cursor stays towards the left hand side and input text moves from left to right.
Is there anyway I can format the mentions within the div to be spans, but have the original @username#userid string available to send to my backend? Maintaining a display and a backend version of the text is possible but my app has a feature to insert tags at any position in the message, so keeping track of the mentions would be quite difficult.