Highlight block when drag handle menu is open

[blwsk]

Is your feature request related to a problem? Please describe.

When manipulating a block via the side menu (i.e. clicking the drag handle), actions like Delete and Colors alter not only the top-level block but all it's children. Deleting the top-level block will delete it's children.

In Notion, when their equivalent side menu is open, the relevant block and its children are highlighted. This is useful as it conveys to the user that their actions in the side menu take effect on not only the top-level block but all its nested children.

Describe the solution you'd like

Either amend the out-of-the-box behavior of BlockNote to include some lightweight styling of the block being interacted with when the side menu is open or add a well-defined class or other selector so that users may write their own CSS against it.

(Or, provide any ideas on how to accomplish this UX in user land.)

Describe alternatives you've considered

I've considered going down the route of custom tiptap or prosemirror extensions, but that seems heavy-handed for a helpful, yet subtle feature that exists in Notion.

I'm not opposed to going down this path, ultimately, but I want to verify if (1) this feature request aligns with BlockNote's roadmap or (2) it's possible to accomplish this easily in user land, today.

Additional context

In Notion:

In BlockNote (from example here):

Bonus

[x] I'm a sponsor and would appreciate if you could look into this sooner than later 💖

• My employer (https://poggio.io) is a sponsor

[siuying]

I need to implement a similar feature, my approach is in style sheet, I use .bn-block-outer[data-id="${id}"] to assign different background color for specific block. I update the style sheet whenever the app state change.