fastmail / Squire

The rich text editor for arbitrary HTML.
MIT License
4.75k stars 406 forks source link

Blockmodification always inserts br after block #438

Open Puddingboy opened 12 months ago

Puddingboy commented 12 months ago

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 commented 12 months ago

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.

Puddingboy commented 12 months ago

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 commented 11 months ago

I can't reproduce this, sorry.

Puddingboy commented 11 months ago

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