Press Backspace in a 3-level list cause unexpected behavior

1

For such a list:

  • A
    • B
      • C

When I put the cursor before B and then keep pressing backspace, I will quickly enter an infinite loop between “The top-level list item is selected” and “The cursor goes back to the front of B” without actually delete anything.

Video: https://user-images.githubusercontent.com/24715727/136661421-a4bd60cc-abce-4679-ad6d-bff3d3a6fa17.mov

Users would expect that Backspace can delete something in general, so I think the current behavior can be improved.

The Backspace key is binding to chainCommands(deleteSelection, joinBackward, selectNodeBackward). I don’t understand the underlying of joinBackward, but obviously it returns false in our case, which causes A to be selected.

One possible solution that comes to me is to call liftListItem before calling joinBackward. By doing that, joinBackward will return true. But I’m not sure if this is a suitable solution.

2

Have you tried chainCommands(deleteSelection, joinBackward, liftListItem, selectNodeBackward)? I think what’s happening here is that joinBackward can’t merge the current paragraph with the one before (because that would leave no valid position for the third list item), so it returns false and selectNodeBackward gets called.

3

chainCommands(deleteSelection, joinBackward, liftListItem, selectNodeBackward) works in this case.

So the idea is to fallback Backspace to liftListItem if joinBackward doesn’t work. This may not be exactly what the users want but it’s good enough.