I have a custom text node. When I press Enter at the end of it, the block moves to a new line, but it’s impossible to type in it. Instead, plain text is displayed.
I have a couple of questions related to this issue:
How can I prevent the custom node from being moved to a new line when I press Enter at the end of it?
Why is it impossible to type in it afterward?
Why is it impossible to delete it with Backspace if you press Enter twice?
Steps to reproduce: place the cursor in the middle of the yellow node and press Enter twice. Then, hitting Backspace makes it impossible to lift the line up again.
And I have a general question. I’m looking for the best way to handle different scenarios: pressing Enter at the end of a custom node, Backspace at the start of it, or when Backspace leaves two identical nodes next to each other.
What would be the best approach? Custom commands for Backspace/Enter?
The answer here is pretty much the same as in this thread: Non-atomic inline nodes will need a bunch of scripting to behave well. ProseMirror is relying on the browser’s native cursor motion and positioning, and Chrome won’t even let you put your cursor into the span element. Firefox kind of does, and lets you type into it, but once you move out of it you cannot move back. You’d have to override cursor motion keys to make this work. Or, which is often a better solution, use a mark instead of a node.
You are absolutely right, the span element isn’t “cursorable”
Could you explain what do you mean by ‘non-atomic’, are those nodes with a single character in it?
“Cursor motion keys”, are you referring to arrow keys, or also click/touoch events (that sounds heavy).
Regarding marks. The reason why I had to step away from marks is because I listen for many events on that “removed content”, also showing popups next to it, so I opted in to custom NodeView. It was all possible with mark/markView. But there was one specific reason that prevented me from using marks which I haven’t reflected in my apps code .
Although I thought that the node was the right choice because it represents the block of text as a united entity
Could you suggest if I try working with backspace/enter key bindings would be the right direction?
Nodes with editable content. Nodes without content (leaf nodes) and nodes explicitly marked so that their content isn’t editable count as atoms.
Yes, if you want selection to behave differently from what the browser does natively, you’ll have to override arrow keys, possibly home/end, shift-variations on those, and pointer selection for the node.
.
Although I thought that the node was the right choice because it represents the block of text as a united entity