JSFiddle - React, Tailwind, and code Playground

by faceleg

HTML

<div contenteditable="true"><p>This is the first paragraph.</p><p>This is the second. Observe the DOM when we become one (place your cursor at the start or end of either and press backspace or delete respectively).</p><p>In Chrome, &lt;span style="font-size: 16px;"&gt; are inserted at the point where the two paragraphs are joined.</p></div>

<pre id="pre"></pre>

CSS

div, pre {
    border: 1px solid gray;
    padding: 10px;
    line-height: 1.44;
}
pre {
    margin-top: 10px;
    max-width: 100%;
    white-space: normal;
}

JavaScript

$(function() {
    $('div[contenteditable]').keyup(function() {
        $('#pre').text($(this).html());
    }).keyup();
});