The way to box selection

[FlatMapIO]

Notion has a block selection which is useful when working with multiple blocks.

2023-02-14.18.22.02.mov

Each Block in Notion has a block container element, and when the Block is selected an element is added inside the container element to add a blue layer to the content.

I would like to know how to implement this in Lexical?

[JiriTrecak]

Definitely looking for direction on this one as well, seems like some black magic will be required. I can see possibility of containing all blocks in the editor in another block and then handling the logic somehow outside of the editor, but that seems quite cumbersome.

[Alex-ray]

I'm planning on implementing this, I'll try to remember to drop a comment here with the solution but here is how I am thinking about it.

Create a "BlockSelectionPlugin". The plugin will listen for drag events within a specified DOM node scope. The plugin will render that selection box based on the x,y coordinates of the start drag and the current mouse x,y position.

We can then use that box selection to find all nodes that intersect with that x,y plane and are either a ElementNode or DecoratorNode and add a highlight style to their block level DOM node.

Honestly it should be pretty elegant/straightforward.

[CanRau]

@Alex-ray did you end up implementing anything working?

[Alex-ray]

@CanRau I did!

Here is a small demo of it working https://www.loom.com/share/80b54467c6d9446aa63beb8b3857bb06?sid=4838a167-2d1c-432c-82ea-59ea42f2a93e

It gets a bit tricky when working with nested structures like lists but I utilized a node resolution and filtering function that identifies "block" nodes based on their type and relative position, basically you don't want to select every Element or Decorator node because it ends up in a poor user experience.