I’ve looked around quite a bit to try and find someone doing this already, but I haven’t had any luck.
Essentially, I’d like to be able to begin a selection in one node, and as I continue dragging outside of the boundaries of that node, I begin selecting the parent node or the next child.
This mimics the behavior of selections in a software called Notion.
How would everyone recommend going about this?
I started down a path of assigning all draggable “blocks” unique ids, so I could potentially manage block selection decoration via CSS by targeting individual ids in a style tag (rather than updating the dom), but I’m not sure if that’s a worthy approach.
I would prefer it if I didn’t have to modify the node positions in order to support this as I think that could make multiplayer more complex.
Please let me know if you have any suggestions at all for this problem! I am just getting started, so I have a lot of flexibility to take alternative approaches.
For reference, Notion uses the content editable approach, but each block is an isolated content editable instance. So, they end up managing all block selection and dragging separate from content editable functionaliy. Another interesting constraint in Notion, is that there aren’t any embedded blocks, all blocks live at the top level. In my app with Prosemirror, there is quite a bit of nesting and constraints for what can go where.
Screenshot of Notion’s DOM during a selection for reference