JSFiddle - React, Tailwind, and code Playground

by chille1987

HTML

<div id="elem">
    <p>Click and <b>edit</b>, please</p>
    <p>Another paragraph goes here</p>
    <p>Third paragraph with <span class="comment">comment inside</span></p>
</div>

<link href="https://cdn.jsdelivr.net/npm/froala-editor@3.2.6/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@3.2.6/js/froala_editor.pkgd.min.js"></script>

CSS

.comment {
    background: yellow;
}

JavaScript

var editor = new FroalaEditor('#elem', {
  events: {
    'initialized': function () {
      let observer = new MutationObserver(mutationRecords => {
          mutationRecords.forEach(mutation => {
            mutation.removedNodes.forEach(node => {
                console.log(node.classList.value)
            })
          }); // console.log(the changes)
        });

        // observe everything except attributes
        observer.observe(document.querySelector('.fr-view'), {
          childList: true, // observe direct children
          subtree: true // and lower descendants to
        });
    }
  }
});