JSFiddle - React, Tailwind, and code Playground

by mehmetatas

HTML

<div id="editor" contenteditable="true">a
    <br>b
    <br>
    <br>c
    <br>d
    <br>
</div>
<textarea id="html" placeholder="You Can Type Html Here"></textarea>
<textarea id="pasteddata" placeholder="Pasted Data Here"></textarea>

CSS

#editor, #pasteddata, #html {
    width: 400px;
    height: 300px;
    border: solid 1px;
    overflow-y: scroll;
}

JavaScript

$(function () {
    $('#editor').on('paste', function (e) {
        var selection = window.getSelection();
        var range = selection.getRangeAt(0);

        var state = {
            startContainer: range.startContainer.cloneNode(),
            startOffset: range.startOffset,
            endContainer: range.endContainer.cloneNode(),
            endOffset: range.endOffset,
            content: $(this).html()
        };

        $(this).empty();

        waitForPaste(this, state);
    });

    $('#editor').on('keyup', function () {
        $('#html').val($('#editor').html());
    });

    $('#html').on('keyup', function () {
        $('#editor').html($('#html').val());
    });
});

function waitForPaste(elem, state) {
    try {
        var pasteddata = $(elem).html();
        if (pasteddata === null || pasteddata.length === 0) {
            setTimeout(function () {
                waitForPaste(elem, state);
            }, 1);
            return;
        }
        handlePaste(pasteddata, elem, state);
    } catch (ex) {
        alert(ex.message);
    }
}

function handlePaste(pasteddata, elem, state) {
    $(elem).empty();
    pasteddata = clearPastedData(pasteddata);

    $('#pasteddata').val(pasteddata);

    var pasteContent = $(pasteddata)[0];
    var origContent = $("<span>" + state.content + "</span>")[0];

    var range = document.createRange();

    range.setStart($(elem)[0], 0);
    range.setEnd($(elem)[0], 0);
    range.insertNode(origContent);
    range.setStart(state.startContainer, state.startOffset);
    range.setEnd(state.endContainer, state.endOffset);
    range.deleteContents();
    range.insertNode(pasteContent);
    range.collapse(false);
}

function clearPastedData(pasteddata) {
    pasteddata = pasteddata.replace(/<br>/ig, "\n")
        .replace(/<br\/>/ig, "\n")
        .replace(/<\/p>/ig, "\n")
        .replace(/<\/div>/ig, "\n")
        .replace(/<[^>]*>?/ig, "")
        .replace(/ /ig, "&nbsp;")
        .replace(/\t/ig,...