Editing bug: creates and preserves styles from h1-h6 while turning it into paragraph

[ile]

I could not reproduce this on Codepen, but I could reproduce it on my local machine and Quill.com.

1. Create some content with p and h1
2. Go to the empty line
3. Hit del key (on PC)
4. You should see that the line is turned into p span ... resembling the original h1

Expected behavior:

p with no style

Actual behavior:

p span with styles

Platforms:

Brave

Version:

'2.0.0-rc.2'

[ile]

The styles eventually creep into the h1-h6 too.

Feels like this should never happen in an HTML editor unless it's broken in some severe manner. If some random tags and styles appear into the HTML code, it feels like we are in a basic contenteditable.

[luin]

Thanks for reporting! Can you reproduce this in Chrome? I can't reproduce it with Mac + Chrome 122.

[ile]

Yes, it does happen in the latest Chrome for Linux and Ubuntu 23. At the main page demo of https://quilljs.com/

It doesn't seem to happen in Firefox for Linux.

[ile]

Happens with the latest (rc-5) version on https://quilljs.com demo.

[ile]

My platform is Linux btw.

[ile]

Still happens with 2.0 on quill.com. .

[ile]

Do you think it will be possible to fix this? For me it looks like the most important thing to fix, otherwise the editor isn't really much different than a plain contenteditable.

[luin]

Sorry for the delay! I just started looking into this. I tried Chrome 120 on Window and Chrome 121 on Linux, but haven't reproduced the issue yet. Would be good if you could help me to reproduce it:

1. Can you go to https://w3c.github.io/uievents/tools/key-event-viewer.html and press the Del key that can reproduce the bug and see what's the keyCode/key/code?
2. Would you try running Chrome without any extensions enabled?

[ile]

Hey,

Good to hear from you! Here's a little video I made with Chromium 124 (no extensions installed) on Ubuntu 23.

All browsers I tried on Ubuntu (Chromium, Brave, Firefox) gave keycode 46 for the 'del'.

quilljs.webm

[luin]

Thanks for the details! Could you try out if the playground fixes your issue: link. I added a key handler for 46 key code.

[ile]

The bug doesn't happen there - the source code will have <h1> like it should after deleting that line with del.

Here https://quilljs.com/playground/snow it happens yet in another way: there will be <p> in the code, but no styles.

[luin]

the source code will have <h1> like it should after deleting that line with del.

By the source code, do you mean the inner HTML in the .ql-editor?

Can you also try the link and see what get printed in the console?

[ile]

By the source code, do you mean the inner HTML in the .ql-editor?

Yes, exactly. So it looks like the handler solves the problem.

[luin]

Okay that sounds good! I will double check the key code in different keyboard layouts but in the meantime you can use the code here to fix the issue: link