JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="bold" onmousedown="document.execCommand('bold', false, null); return false">
<div contenteditable="true" id="editor">
    Here is some editable content. Please edit it and maybe use the button. 
</div>
<textarea id="log" rows="15" cols="60"></textarea>

JavaScript

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
      var message = "";
      switch (mutation.type) {
          case 'characterData':
              message = "Character data changed from '" + mutation.oldValue +
                  "' to '" + mutation.target.data + "'";
              break;
          case 'attributes':
              message = "Attribute '" + mutation.attributeName + "' changed from '" + mutation.oldValue +
                  "' to '" + mutation.target.getAttribute(mutation.attributeName) + "'";
              break;
          case 'childList':
              message = "DOM tree changed inside node with name " + mutation.target.nodeName;
              break;
      }
      document.getElementById("log").value = message + "\n" + document.getElementById("log").value;
  });    
});
 
// pass in the target node, as well as the observer options
observer.observe(document.getElementById("editor"), {
    subtree: true,
    attributes: true,
    childList: true,
    characterData: true,
    characterDataOldValue: true
});