JSFiddle - React, Tailwind, and code Playground

by Antonio Vicién Faure

HTML

Al borrar desde el final del primer elemento de la lista provocamos que el segundo elemento quede rodeado por un span

<div contenteditable="true" class="demo1">
<ul>
<li>item1 </li>
<li>item2</li>
<li>item3 <span>span test</span></li>
<li>item4</li>
</ul>
</div>
<br/>

No ocurre lo mismo si el tamaño de la fuente se ha definido en porcentaje o píxeles:

<div contenteditable="true" class="demo2">
<ul>
<li>item1</li>
<li>item2</li>
</ul>
</div>

<br/>

Se puede corregir mediante JavaScript, controlando el layer contenteditable en cada pulsación:

<div contenteditable="true" class="demo1 demo3">
<ul>
<li>item1 <span>test</span></li>
<li>item2</li>
</ul>
</div>

CSS

.demo1{
  border:1px solid red;
  font-size:1.25em;  
}

.demo2{
  border:1px solid green;
  font-size:125%;  
}

span{color:red;}

JavaScript

//var targetNodes         = $("*[contenteditable]");
var targetNodes         = $(".demo3");
var MutationObserver    = window.MutationObserver || window.WebKitMutationObserver;
var myObserver          = new MutationObserver (mutationHandler);
var obsConfig           = { childList: true, characterData: true, attributes: true, subtree: true};

//--- Add a target node to the observer. Can only add one node at a time.
targetNodes.each ( function () {
    myObserver.observe (this, obsConfig);
} );


var checkForSpan = false;

function mutationHandler (mutationRecords) {
    mutationRecords.forEach ( function (mutation) {
        //console.log (mutation.type);
        //console.log (mutation.attributeName);

		if( checkForSpan )
		{
			for (var i = 0; i < mutation.addedNodes.length; i++)
			{
				if (mutation.addedNodes[i].nodeName.toLowerCase() === 'span')
				{
					checkForSpan = false;         
					//console.log ('added: '+mutation.addedNodes[i].nodeName.toLowerCase());
					//console.log('anodes: '+mutation.addedNodes[i]);
					var jq = $(mutation.addedNodes[i]);
					jq.contents().unwrap();
				}
			}
    }
        

    } );
}


isWebkit = 'WebkitAppearance' in document.documentElement.style;
if (isWebkit)

{

targetNodes.on("keydown keypress",function(e) {
	if( !document.getSelection().isCollapsed ) {
		saveSelectionState();
	} else if(e.which==8 || e.which==46) {
		saveSelectionState();
	}
});


function saveSelectionState() {
	checkForSpan = true;
}
}