JSFiddle - React, Tailwind, and code Playground
HTML
<div contenteditable="true" onkeypress="if (event.keyCode==13) { document.getElementById('ex').appendChild(extractBlockContentsFromCaret()); }">
<p>One tow</p>
<p>One tow</p>
</div>
Extracted:
<div style="border: solid green 1px" id="ex"></div>
JavaScript
function getBlockContainer(node) {
while (node) {
if (node.nodeType == 1 && /^(P|H[1-6]|DIV)$/i.test(node.nodeName)) {
return node;
}
node = node.parentNode;
}
}
function extractBlockContentsFromCaret() {
var sel = window.getSelection();
if (sel.rangeCount) {
var selRange = sel.getRangeAt(0);
var blockEl = getBlockContainer(selRange.endContainer);
if (blockEl) {
var range = selRange.cloneRange();
range.selectNodeContents(blockEl);
range.setStart(selRange.endContainer, selRange.endOffset);
return range.extractContents();
}
}
}