Bug 32003 – execCommand "indent" inside list causes incorrect positioning of the indented sub-list

• Status: NEW
• Component: HTML Editing

[Venkat Karun]

A reduction which shows the exact behavior is given below.

http://www.plexode.com/cgi-bin/eval3.py#ht=%3Cdiv%20contenteditable%3D%22true%22%3E%0A%3Cul%3E%3Cli%20id%3D%22l%22%3Ea%3Cbr%3E%3Cbr%3E%3C%2Fli%3E%3Cli%3Eb%3C%2Fli%3E%3C%2Ful%3E%0A%3C%2Fdiv%3E&ohh=1&ohj=1&jt=li%20%3D%20document.getElementById(%22l%22)%3B%0Ar%20%3D%20document.createRange()%3B%0Ar.setStart(li%2C%202)%3B%0Ar.setEnd(li%2C%202)%3B%0As%20%3D%20window.getSelection()%3B%0As.removeAllRanges()%3B%0As.addRange(r)%3B%0Adocument.execCommand('indent'%2C%20false)%3B&ojh=1&ojj=1&ms=100&oth=0&otj=0&cex=1

The steps followed in the reduction are detailed below:-

1) Start with the following HTML 

<div contenteditable="true">
<ul><li id="l">a<br><br></li><li>b</li></ul>
</div>

2) Programatically create a range containing the last <BR> of <LI id="l">.

3) Invoke document.execCommand('indent', false)

Actual results:-

<ul><ul><li><br></li></ul><li>a<br></li><li>b</li></ul>

Expected results:-

<ul><li>a<br></li><ul><li><br></li></ul><li>b</li></ul>

[Aryeh Gregor]

In WebKit, a Selection can't contain only the last <br> in <li id=l>.  If you try to create a selection like <li>a<br>{<br>}</li>, it becomes <li>a<br>{}<br></li> (using { and } for selection endpoints).  That said, the result here seems to make no sense in WebKit, you're right.

[Ahmad Saleem]

All browsers differ with each other:

*** Safari Technology Preview 152 ***

 Empty intend here
a (Indented)
b (Indented)

*** Firefox Nightly 106 **

    a (Indented)
         Caret here with space in between a & b 
    b (Indented)

*** Chrome Canary 107 ***

    Empty intend here
b (Indented)

______

Just want to share updated testing evidence. Thanks!