<!DOCTYPE HTML>
<html>
<head>
    <style>
        .quote {
            padding-top: 5px;
            padding-right: 5px;
            padding-bottom: 5px;
            padding-left: 12px;
            border-left: 5px lightblue solid;
            color: gray;
            background-color: #EFFEFE;
        }

        #editor {
            width: 480px;
            height: 320px;
            border: 1px solid #DFDFDF;
            border-radius: 4px;
            padding: 10px;
            outline: none;
            overflow: scroll;
            font-family: -apple-system;
        }

        #editor > p:first-child {
            margin-top: 0;
        }

        #editor > p:last-child {
            margin-bottom: 0;
        }

        #editor > p,
        .quote > p {
            margin: 8px auto;
        }
    </style>
    <script>
        function setup() {
            editor.addEventListener("beforeinput", event => {
                if (event.inputType.match(/^format/))
                    return;

                for (let staticRange of event.getTargetRanges()) {
                    if (nodeIsInsideQuote(staticRange.startContainer)
                        || nodeIsInsideQuote(staticRange.endContainer)) {
                        event.preventDefault();
                        return;
                    }
                }
            });

            function nodeIsInsideQuote(node) {
                let currentElement = node.nodeType == Node.ELEMENT_NODE ? node : node.parentElement;
                while (currentElement) {
                    if (currentElement.classList.contains("quote"))
                        return true;
                    currentElement = currentElement.parentElement;
                }
                return false;
            }
        }
    </script>
</head>
<body onload="setup()">
    <div id="editor" contenteditable>
        <p>This is some regular content.</p>
        <p>This text is fully editable.</p>
        <div class="quote">
            <p>This is some quoted content.</p>
            <p>You can only change the format of this text.</p>
        </div>
        <p>This is some more regular content.</p>
        <p>This text is also fully editable.</p>
    </div>
</body>
</html>