style preserving when forward deleting characters in content editable div

Hello Editing Task Force,



I wanted to run the following scenario by you and hear your stance on it?



Here is the use case code snippet:



<body contenteditable="true">

<div><span style="color:red;">a</span></div>

<div><span style="color:blue;">bc</span></div>

</body>



Jsfiddle: https://jsfiddle.net/whbk8npa/



this markup will be displayed to the user like

a

bc



1. Place a caret to the right of character 'a'

2. Hit delete (new line will be removed and user will see 'abc'

3. Hit delete again  and user will see 'ac'

4. Type some character, 'z' for example. User will see different results, depending on the browser:



Chrome


Edge


Firefox


Safari


azc


azc


azc


Didn't test - someone who has Safari, please test




*It seems that Chrome and Edge grab styles from the span that is to the left of 'a' and Firefox grabs the stylse from the span to the right of 'a'.





Now, repeat the experiment but this time, delete everything to the right of 'a' so the end result would look like so 'a'. Results are again, quite different.

Chrome


Edge


Firefox


Safari


az


az


az


Didn't test - someone who has Safari, please test




In this case, Chrome seems to  grabs the style from the span to the right of 'a' if the last character in the span has been removed.

Edge still grabs styles from the span that is to the left of 'a'.

Firefox seems to do its own thing.



What do you think the most sensible behavior here is?



I believe, we should keep things simple - in accordance with how desktop and online editors do. Always grab styles from the left of 'a'.



Thoughts?



- Grisha



Sent from Outlook<http://aka.ms/weboutlook>

Received on Friday, 30 September 2016 00:47:53 UTC