Hello 
There something I want to do with CodeMirror, but I’m not sure it’s possible. I figured I’d ask you guys before giving up !
Let’s say we have an array of key-value pairs somewhere in our code base:
const myVariables = [
{ key: "Batman", value: "Bruce" },
{ key: "Superman", value: "Clark" },
]
It’s some kind of store, containing variables whose names are “Batman” and “Superman”.
Then, we have a code editor. We want the user to be able to input text, but we also want them to insert those variables in the code.
We can imagine a button below the editor, that when clicked inserts a random variable.
Here’s a screenshot that shows just that with a regular input
During my implementation attempts, I managed to do just that with a custom css class and “::after” , but I could not figure out how to treat this variable as a single character (when pressing the arrow keys, the cursor should stop just before and just after, when pressing the delete key, the whole yellow block should be removed).
Also, It should hold some data (the value “Bruce” or an ID for example).
If someone can point me in the right direction, it would be much apreciated
Thanks !