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><button id="unline">Remove lines</button></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();
var savedSelection;
$("#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;
});
});
function extractContent(node) {
var frag = document.createDocumentFragment(), child;
while ( (child = node.firstChild) ) {
frag.appendChild(child);
}
return frag;
}
function getNodeOffset (node) {
if (!node || !node.parentNode) return;
var offset = 0;
while (node.parentNode.childNodes[offset] !== node) {
offset += 1;
}
return offset;
}
function saveSelection (rootnode) {
var sel, node, startnodeoffsets, endnodeoffsets, b = {};
if (!rootnode || !rootnode.nodeType) return false;
if(!(getSelection().rangeCount > 0)) return false;
sel = getSelection().getRangeAt(0).cloneRange();
// Save start and end offset to bookmark
b.startoffset = sel.startOffset;
b.endoffset = sel.endOffset;
// Get start node offset path relative to rootnode
startnodeoffsets = []
node = sel.startContainer;
while (node !== rootnode) {
startnodeoffsets.unshift(getNodeOffset(node));
node = node.parentNode;
if (node === null) return r;
}
// Get end node offset path relative to rootnode
endnodeoffsets = []
node = sel.endContainer;
while (node !== rootnode) {
...