Add tooltip preview for blocks in the suggestion menu

[expiante]

As the number of available blocks continues to grow, it would be very helpful to show a tooltip preview when hovering over blocks in the suggestion menu, so users can quickly understand how a block will look or behave once inserted.

Proposed Behavior

• When hovering over a block item in the suggestion menu:
  • A tooltip preview appears
  • The preview visually represents how the block will look once inserted
  • The tooltip also contains a description about the block behavior and/or possibilities.

Current Behavior

• The suggestion menu only displays block names
• Users must insert a block to see its appearance, structure, and possibilities.
• This can lead to unnecessary insertions and deletions, especially for unfamiliar blocks.

Why This Feature Is Useful

• Improves discoverability as the block library of the BlockNote grows
• Helps users make faster, more confident choices
• Reduces trial-and-error when inserting blocks
• Enhances overall usability of the suggestion menu

This would significantly improve the experience of exploring and using both built-in and custom blocks.

[nperez0111]

I'm uncertain on the approach here, especially since we should probably not be providing images in our package. We will have to put some more thought into how to get this to work like you want it.

[woutervroege]

Thanks @expiante – Exploring common UX patterns in other tools, this might very well be aligned with product goals.