JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span contenteditable="true" id="editable">Hello, world<br> Good bye, World</span>
</div>
<textarea rows="6" cols="50" id="html"></textarea>

JavaScript

function getHtmlPrecedingSelectionIn(container) {
    var html = "";
    if (window.getSelection && document.createRange) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var selRange = sel.getRangeAt(0);
            var range = document.createRange();
            range.selectNodeContents(container);
            range.setEnd(selRange.startContainer, selRange.startOffset);

            var frag = range.cloneContents();
            var el = document.createElement("body");
            el.appendChild(frag);
            html = el.innerHTML;
        }
    }
    return html;
}

var editableSpan = document.getElementById("editable");
editableSpan.addEventListener("mouseup", function() {
    document.getElementById("html").value = getHtmlPrecedingSelectionIn(editableSpan);
}, false);