Extending selection to include leaf nodes

I suspect this has come up and I just can’t find the topic. My question is specifically around trying to extend the existing selection to include a leaf node such as an hr. So for example:

  • Use/open the prosemirror home page
  • Click before “Try it out”
  • Insert->Horizontal Rule
  • Hold Shift and press left arrow

I would expect that the selection would extend to contain the hr but it acts like nothing happens. If instead i click after the T in Try, hold shift and press left arrow then the T is selected. Hold shift and press left arrow again and I see a blue flicker as if the hr was selected (as it does in a pure contenteditable scenario) but then I’m guessing prosemirror is resetting the selection to only be the “T”. Is this a known issue? Any work around?

1 Like

ProseMirror relies on the browser’s native behavior for most selection key events, and those aren’t always entirely consistent or reasonable. Chrome indeed seems to just do nothing in this case. Firefox does select the <hr> (but shows no visible selection when it does).

It should be possible to bind a custom key handler to handle situations like this, where you have a specific interaction that you’d like to work in a specific way.

Yes I can see how they are inconsistent. The flicker I mentioned happens in the Mac version of Chrome where they do seem to select the HR and render a selection highlight behind it but I’m guessing when prose mirror reconciles its selection it ends up updating the dom selection to exclude that element. So it seems like shift-left selection in prosemirror won’t ever select that preceding hr or allow extending the selection to the text before that. In Chrome in windows it can be although it seems to take several shift-left before it goes beyond the hr to the preceding text. I’ll have to delve into why this is breaking down and see what I can do about it. I haven’t delved deeply into the selection and decoration classes but may need to allow such selection and render something in that case. Thx.

Hmm… so given there is NodeSelection that is about only selecting a node and TextSelection that is about only selecting text I’m not sure how easy this will be to have a selection that mixes the 2. I mean perhaps I could handle a simple case of having only a single node between and then use a TextSelection that points to the end of the preceding text but it’s not ideal. Unless there’s some way to make prosemirror treat a leaf node like a single character. I mean I’m sure I can create a custom selection class but I have to think that’s not trivial especially since I’ve seen code throughout that tries to extract a $cursor or checks for TextSelection in various places. I’ll probably just leave this for now and revisit it later when I have more time but any suggestions are welcome. Thx