Backspace inside empty paragraph creates a new list node

1

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 )

1 Like
2

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.

3

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.

1 Like
4

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.

5

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.

2 Likes
6

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.
2 Likes
7

thank you very much )

8

thanks! it was really helpful )