JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  Steps to reproduce:
  <ol>
    <li>Select all the text inside #input</li>
    <li>Click on the button 1 - "add background colour"</li>
    <li>Click on the button 2 - "remove format</li>
    <li>Do you see a red background where the bold text was? Here's my bug</li>
  </ol>
</div>
<div>
  <button id="btn1">add background colour</button>
  <button id="btn2">remove format</button>
</div>
<div id="input" contenteditable="true">
  I am a real
  <b>nice test</b>
  string
</div>

CSS

#input {
  margin-top: 1rem;
}

#input {
  border: 1px solid;
}

JavaScript

const btn1 = document.querySelector("#btn1");
btn1.onclick = () => document.execCommand("hiliteColor", false, "red");

const btn2 = document.querySelector("#btn2");
btn2.onclick = () => document.execCommand("removeFormat");