JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myEditor" contenteditable="true">some text <cite id="cite1">the citation</cite> some more text[press enter after this]</div>

JavaScript

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

$(document).ready(function () {
    var factory = function (element, opts) {
        var MutationObserverController = function (element, opts) {
            var defaults = {
                subtree: true,
                childList: true,
                characterData: true,
                attributes: false
            };

            this.options = $.extend({}, defaults, opts);
            this.watchedElement = element;

            this.observer = new MutationObserver(this.mutationObserver.bind(this));
        };

        MutationObserverController.prototype.connect = function () {
            this.observer.observe(this.watchedElement, this.options);
        };

        MutationObserverController.prototype.disconnect = function () {
            this.observer.disconnect();
        };

        MutationObserverController.prototype.mutationObserver = function (mutations) {
            var ctx = this;
            ctx.disconnect();
            mutations.forEach(function (m) {
                console.log(m);
            });
            ctx.connect();
        };
        return new MutationObserverController(element, opts);
    };
    var mutOb = factory($('#myEditor').get(0), {});
    mutOb.connect();
});