Squire
Squire copied to clipboard
neilj
Blockmodification always inserts br after block
Its troublesome to hit delete at blockend to remove this clutter. Please look into it. I strongly doubt this is a browser issue. All chromium browsers i tested on windows demonstrate the same issue. Win10. Edge. Chrome. Brave.
If you want me to look at something, please include steps to reproduce, the expected outcome, the actual outcome, and why this is causing a problem.
my squire instance is initialized like this when the dblclick event is fired on a div
new Squire(selection, {
blockTag: 'P',
blockAttributes: {/*not relevant */},
tagAttributes: {
ul : {/*not relevant */},
li: {/*not relevant */}
}
})
selection points to the container div
my formatting methods all look somewhat like this:
app.formatH2 = function(){
if (!squire.hasFormat("h2")) {
squire.modifyBlocks(function(fragment){
fragment.querySelectorAll("h1,p,h3").forEach(function(block){
const h = d.createElement("h2");
h.append(...block.childNodes);
block.replaceWith(h);
return h;
})
return fragment;
})
squire.focus();
}
}
Expected outcome is that a block level element such as the h$ and p is replaced by another block level element so that visually and element transforms into another paragraph type. instead .modifyBlocks also inserts a br after the inserted element.
beforeclick:
<div contenteditable>
<p>content...</p>
</div>
afterclick:
<div contenteditable>
<h1>content...</h1>
<br>
</div>
My setup uses a toolbar button to trigger the modifyBlocks method. my toolbar looks like this:
<div>
<button></button>
</div>
the buttons fire their events with a common "click" event handler with the useCapture set to false at all times.
