JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post">
    <div id='post_content' contenteditable='true'>
        <p>Something else is trully awesome thing to be able to do that, don’t you agree?</p>
        <p><a href="http://google.com">Not safe for work</a> should watch out!</p>
        <ul>
            <li>something</li>
            <li>fwu uywfsnuyfw ns wfns unfws something</li>
        </ul>
        <blockquote>What you say?</blockquote>
    </div>
</form>

CSS

body {
    font-family: Georgia;
    color: #444;
    font-size: 19px;
    line-height: 28px;
    padding: 20px;
}

p, ul, blockquote {
    margin: 0 0 1em;
}

ul {
    list-style-type: square;
    padding-left: 10px;
    margin-left: 10px;
}

blockquote {
    border-left: solid 4px #f00;
    padding-left: 10px;
    background: #f7f7f7;
    font-style: italic;
}

#post_content {
    border: solid 1px #eee;
    padding: 20px;
    outline: none;
}

JavaScript

$("[contenteditable]").on("keypress", function(e) {
    var range = window.getSelection().getRangeAt();
    var element = range.commonAncestorContainer;
    if(element.nodeName == "BLOCKQUOTE") {
        element.parentElement.removeChild(element);   
    }
});