Adding chips inside editable div
I am trying to design an input textbox similar to WA/FB that allows users to add #tags and/or mentions to their post.
So far I have an TextInput component with a contenteditable div. When the user begins to type a tag or a mention I have an AutoComplete component that fires off an Algolia search and suggests tags/mentions. The User selects one and it's added to the message inline. All good.
I would much rather these mentions/tags were inserted inline as chips with formatting and easily deleted with a single backspace etc.
I'm scratching my head to come up with a good design for this that doesn't require too much ugly post-processing of the message, and I expect there are already great designs for this, I'm just not finding any good examples in my searching.
I just wondered if anyone has seen or built any good examples thy might share?
Thanks in advance!
Please or to participate in this conversation.