NodeView, and inserting text between elements

1

First off: hats off to the ProseMirror maintainers! It’s such a nice library.

I’m playing around with NodeView, and I’ve found either a bug or a gap in my understanding.

See Glitch example. I’ve added a background to allow you to see the editable content for the to-do items. It’s possible to click on the sliver of white space between the checkbox and the editable label, and add content which never makes it into the document. (See the logged node elements; they contain the label contents but don’t render this in-between content.) The reason that this is a problem, is because if you delete all text from a to-do node, it’s impossible to add any text back, since the only place where typing is permitted seems to be in this “no-man’s land”.

I’m hoping it’s a simple mistake on my part :sweat_smile:

2

After browsing the forums for a while, I seem to have improved my problem a bit, even if I haven’t fixed it.

Changing the CSS to display: block and using Flexbox for the parent seems to allow me to type on an empty checklist item now. However, cursor movement is strange at the beginning of the line. I’m still researching what could be happening here, but I’m a bit more optimistic. I’d still appreciate help but will post here if I figure it out on my own.

I’ve created a new Glitch example containing my fix.

3

You should definitely make non-editable DOM (such as the checkbox) contenteditable=false in a node like that. But that doesn’t seem to fix the problem in this case. I’ve pushed a patch that makes the editor fix up the DOM selection when it lands in a meaningless position like this (released as prosemirror-view 1.11.5).

4

Wow, thank you so much! I hadn’t considered that it might require a change in ProseMirror. Thanks a ton for your help :+1:

5

There were still some residual cursor movement issues, but I figured out what was happening after reading your patch. The issue in my case was atomElements.test(node.nodeName) – since I was using a checkbox, cursor movement broke when I tried to use the left arrow to move from the start of one line to the end of the previous one. The solution: wrap my checkbox in a span, which is not considered an atomElement.

['span',
  {contenteditable: false},
  ['input', {type: 'checkbox', ...(node.attrs.complete ? {checked:true}:null)}]
]