Bug 107967 – Deleting a button and typing text afterwards applies wrong styling to the typed text

• Component: HTML Editing
• Status: NEW

[Andrew fedoniouk]

Created attachment 184779 [details]
Minimal example to reproduce the issue.

Minimal reproducible markup:

<div contenteditable>
  <div>The <input type=button value=button></div>
</div>

Steps to reproduce:

1. Position caret after the button.
2. Hit {BACKSPACE} to delete the button.
3. Without moving the caret type something at caret location.

Note: the text typed is incorrectly wrapped into &lt;span style="white-space:pre;font:..."> and its container gets text-align:center style. Use attached document to reproduce it.

[Wesley B]

I second this. It is something I have been trying to deal with for quite a long time now. 

Additionally, any font styles that the button had will be copied over into the span tag that will appear. So for example, if your button had white text and you remove that button, any text you will type afterwards will be white as well.

[Arpita Bahuguna]

This has already been fixed in Chrome: http://src.chromium.org/viewvc/blink/trunk/Source/core/editing/DeleteSelectionCommand.cpp?r1=154066&r2=154067&

Probably we need to merge these changes.

[Ryosuke Niwa]

The fix in Blink is wrong.

There is nothing wrong for an anchor element to be an input element. EditingStyle::create needs to be aware of non-legacy Position and obtain the style at the parent of the input element in such a case.

[Ahmad Saleem]

I think Safari Technology Preview 154 have this fix:

https://github.com/WebKit/WebKit/commit/c75ccbd4e966b91f06494b79f42403fe3a0bcafb

[Ryosuke Niwa]

The bug still reproduces in STP.

[Ahmad Saleem]

I tried to fix this bug in below PR:

Link - https://github.com/WebKit/WebKit/pull/5995

But after discussions with rniwa, I am going to close it and document approach here:

__________

1) Doing 1-1 Blink merge works and it compile but it is not desirable result because of Comment 03 as highlighted.

2) While trying to do it as per rniwa guidance in PR, we get following test failures:

editing/deleting/maintain-style-after-delete.html
editing/execCommand/underline-selection-containing-image.html, editing/style/5084241.html
editing/style/background-color-retained.html
editing/style/style-3681552-fix-002.html 

____

1) maintain-style-after-delete.html - we lose font color and span of caret color and this behavior matches with Firefox Nightly 109.

Link - https://jsfiddle.net/3Lbw76a4/show

2) underline-selection-containing-image.html - we get new Console Error message "CONSOLE MESSAGE: TypeError: null is not an object (evaluating 'document.querySelector("U").textContent')" - losing styling as intended and get similar behavior to chrome in test case.

Link - https://jsfiddle.net/76n3rjf8/ (Look at console error of Chrome)

3) editing/style/5084241.html - We match with Firefox here and loss "Red" font color from the first line of text here.

4) background-color-retained.html - We match with Firefox here and loss "background" color from the text after deletion.

Link - https://jsfiddle.net/Lzx97c5u/

5) style-3681552-fix-002.html - We don't match any browser after this change and we loss italic styling of "xxx" and it can be interop issue. Although, Chrome does not have this test anymore based on search from source.chromium.org.

_______

These are findings based on PR and any failure into it.