Feature: Allow range selections on top-level decorator nodes

Description

I’m investigating Lexical as an alternative to mobiledoc-kit as the underlying framework that powers our editor at Ghost. One of the key usability features of our editor is cards entering a “selected” state via the keyboard (equivalent of a card would be a top-level decorator node).

Here’s a minimal example of our most basic card interaction with a HR card:

https://user-images.githubusercontent.com/415/186399138-6404166d-bfb1-4d03-a688-5c40ee4af7b5.mp4

In mobiledoc-kit such selections are achievable because every card has a ‌ character before and after the card’s DOM element which can receive a cursor position. We can use the equivalent of an update listener to watch for the cursor being in one of those positions/ranges so we can trigger both cursor normalisation (it’s always moved to the trailing zwnj so it’s easier to handle delete/backspace keyboard events) and to put the card component into a selected state.

As far as I can tell such behaviour isn’t possible in Lexical because there is nowhere for the cursor to be positioned on/around a decorator.

Alternative solutions

Not sure, maybe there are already hooks that could allow such behaviour?

[kevinansfield]

Not yet, it’s towards the end of our short term roadmap for the next few weeks. I’ll be sure to share what we come up with and any pain points we hit when we get there.

[kevinansfield]

@DaniGuardiola I was noodling on our up/down arrow behaviour a bit this evening and ended up with this https://github.com/TryGhost/Koenig/pull/390. Probably not 100% yet but initial testing shows it working for our use-cases. I’ll add some tests tomorrow and merge then it will be testable on our demo at https://koenig.ghost.org

One odd thing I’ve come across is the built-in Up/Down key handling when there’s a node selection seems to skip a node and puts the caret in an unexpected position.