Blockmodification always inserts br after block

[ghost]

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.

[neilj]

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.

[ghost]

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.

[neilj]

I can't reproduce this, sorry.

[ghost]

Will you allow me to clean things up and try with your latest update?