I'm trying to build a system to allow users to generate a text template that can have specific, predefined tokens mixed into it, accessible through a browser. (Imagine a mail merge system, where the document is composed entirely of 2 things: static text, and tokens representing a database value.)
I would like to be able to insert it into a HTML page like an ordinary text box element, except that tokens are something distinct from text; they're their own element type, inserted inline into the typed text, and can't be edited or partially selected like text, only deleted, copied, cut, or pasted as an atomic item. It should have some way for the editor to retrieve a list of valid token values from the server when the page is loaded, and an intuitive way for the user to enter a new token at the position of the cursor.
I know I've seen things like this online in the past, but Googling around doesn't turn up anything useful. I find code editor libraries with syntax highlighting, or HTML WYSIWYG editing libraries, neither of which is what I'm actually looking for.
Does anyone know where I could find such a component?