In the website I am working on, I need there to be a <textarea> where the user can write a description, and add user-defined variables as shown below:

When one of the buttons is clicked, it adds the corresponding text to the <textarea> above. Then, in the JS, I use the replaceAll() method to substitute the variables added with their corresponding values.

This works and all, but I would want to do is go for something that looks like this:

So I still want the block of text to function the same as before, but it would be sort of like one character, where if you hit the backspace on it it would delete the whole block. Is there a way I can go about doing this (using Vanilla JS)?

Thanks in advance!