Backspace inside empty paragraph creates a new list node

Hi!

I experienced the problem when pressing the Backspace in an empty paragraph creates a new list node. This behaviour was explained here. Does anyone figure out how to fix it? Now, I am trying to handle the Backspace press and rewrite the joinBackward command. Is it a right direction or there is a more proper way to fix it?

Thanks in advance for any help )

I assume you are talking about a situation where you have a structure like <li><p>a</p><p>[cursor]</p></li>, and press enter there? There’s no need to ‘fix’ this, since it’s intentional behavior. If you don’t want it, don’t bind splitListItem to backspace.

I’m talking about the case when I have an empty paragraph just below the list. Then, I press the Backspace and I expect that the cursor will get at the end of the last list item (after ‘text’) but instead a new empty list item is created. Like in the example below.

Ah, that’s done by joinBackward. It’ll move the current paragraph into the node above it, possibly adding wrapper nodes when necessary. You could add a custom binding to spot this situation and delete the range between the end of the paragraph in the list item and the cursor, if you want to change it.

Hi @sie

Out of the box, the prosemirror-schema-list package solves a lot of stuff, but we found that many default behaviors didn’t match our expectations of how a rich text editor should work.

For example, when pressing backspace on a node after a list, PM will create a new list node instead of moving the cursor to the end of the last list node. Or when deleting a list node, PM will have 2 paragraphs inside the list item because it always expects list items to have a <p> inside.

Like Marijn suggested, a solution is creating custom commands to enhance the default functionality. For example, create a command that will “join” adjacent <p> inside list items, and trigger it whenever you press backspace.

1 Like

Hey sie I implemented this functionality in https://bangle.dev which is partly inspired by atlassians atlaskit. You can see the src code of the command here.

The idea can be summarized into this:

  1. Check if the selection is at start of a paragraph
  2. Check if you can join to previous list
  3. If the above true, try joining it with the list above, src code for the command that joins.
1 Like

thank you very much )

thanks! it was really helpful )