JSFiddle - React, Tailwind, and code Playground

HTML

<div><button id="spell">Toggle Spellcheck</button><span id="spellStatus"></span></div>
<div><button id="edit">Toggle Editable</button><span id="editStatus"></span></div>
<div id="textContent">
Here is some texxt with spellung erreurs.
</div>
<div>
    <p>In Chrome (if not other browsers):</p>
    <ol>
        <li>Enable editing</li>
        <li>Click inside the text content above</li>
        <li>Notice the red underlines</li>
        <li>Disable editing</li>
        <li>Notice that the red underlines persist even when the content is not editable</li>
    </ol>
</div>

CSS

#textContent {
    margin:20px;
    padding:20px;
    border:1px dotted #888;
}

JavaScript

function updateStatus() {
    console.log("updating");
    $("#spellStatus").text( String( $("#textContent").attr("spellcheck") ) );
    $("#editStatus").text(  String( $("#textContent").attr("contentEditable") ) );    
}

$(function() {
    updateStatus();
    
    $("#spell").click(function() {
        console.log("spell");
        $("#textContent").attr( "spellcheck", function(ix,old) {
            old = old === "false" ? false : true; // defaults to true
            console.log("setting " + (!old));
            return !old;
        });
    });
    $("#edit").click(function() {
        
        var $div, $newdiv;
        $div = $("#textContent");
        console.log("edit");
        
        $div.attr( "contentEditable", function(ix,old) {
            old = old === "true" ? true : false; // defaults false
            console.log("setting " + (!old));
            
            this.style.borderColor = (!old) ? "red" : "#888";
            return !old;
        });
        
        // If setting attribute to false, instead replace element with new one
        if ($div.attr( "contentEditable" ) === "false"){
            //Create new element
            $newdiv = $("<div/>");
            
            //Copy over content from old element
            $newdiv.html($div.html());
            
            // Insert new element before old element in the dom
            $newdiv.insertBefore($div);
            
            // Remove old element
            $div.remove();
            
            // Set id of new element to 'textContent'
            $newdiv.attr("id", "textContent");
        }
    });
    
    $("#spell, #edit").click(updateStatus);
    
});