This is pretty nice, though I'd suggest you call it a transparent syntax highlighter.

For https://grack.com/demos/adventure/, I used a hidden <input text> for something similar. I wanted to take advantage of paste/selection and all the other goodies of text, but with fully-integrated styling.

Like you, I found that standard text input boxes were far more interesting than contentEditable because they're just so simple overall.

I think there's probably an interesting middle ground here where you render real markdown with the textarea effectively fully hidden (but still with focus), emulate the selection events of the rendered markup into the textarea, and basically get a beautiful editor with all the textarea solidness.

Fun fact: this is how github adds syntax highlighting in its search bar. A while back I built the same syntax highlighting in Shortwave (an email client) using the same “view on top of a transparent input” trick. Pair it all with the following blog, for a top notch search UX

https://blog.superhuman.com/delightful-search-more-than-meet...