JSFiddle - React, Tailwind, and code Playground

HTML

<p>CTRL-B and CTRL-I should work: 
<div contenteditable class="editor">
    Sample template with <span class="mergecode test1" />.
</div>

CSS

.editor { font: 9.5pt serif; height:200px; border:1px dashed red; margin:10px; }

.mergecode::before { 
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    background:gold; border:1px solid black;
    padding: 2px 4px;
    display:inline-block; }

.mergecode.test1::before { content:"Test1" }