Reading this webkit document, It says the beforeinput event when used with contenteditable is cancelable. But I run the code in the document on a chrome browser and the event is not cancelable.
Am I mistaken? How to enable the beforeinput event to be cancelable?
<body onload="setup()">
<div id="editor" contenteditable>
<p>This is some regular content.</p>
<p>This text is fully editable.</p>
<div class="quote" style="background-color: #EFFEFE;">
<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>
<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>