JSFiddle - React, Tailwind, and code Playground
HTML
<div class="root">
<p contentEditable>Big fat poo</p>
<p contentEditable>Big fat poo 2</p>
</div>
CSS
p {
margin: 10px;
padding: 10px;
border: 1px dotted #333333;
}
JavaScript
$(document).ready(function() {
$('div.root').find('[contentEditable]').keypress(function(e){
console.log('xx');
if (e.keyCode === 13) {
$(document).one('DOMNodeInserted', function(e) {
/*console.log(arguments);*/
console.log(e.target);
console.log('IsSame?' + (e.target.parentNode).isSameNode(e.relatedNode));
if (e.relatedNode.nodeName === 'P' && e.target.nodeName === 'DIV') {
$(e.target).attr('data-chrome-added','true');
console.log($(e.target.parentNode).html());
}
})
}
});
});