search

TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
6.79k stars 479 forks source link

Add a classname to the active block so a custom style can be applied #1046

Open Musettodotcom opened 3 months ago

Musettodotcom commented 3 months ago

Is your feature request related to a problem? Please describe. It would be nice to be able change the style of the active block (e.g., set a different background color).

Describe the solution you'd like Add a class like active-block when the block becomes active and remove it when it becomes inactive.

YousefED commented 2 months ago

For now, you could use const selectedBlocks = useSelectedBlocks(editor); and check if selectedBlocks matches the block (props.block). Does this help?

Curious to hear what you're building!

Musettodotcom commented 2 months ago

Working on a way for drum and piano teachers to create more complex lessons with video, text, lists, images, and some custom controls we are building for playing back musical patterns and songs, as well as interactive MIDI feedback.

The plan is for BlockNote to serve as the basis for the editor and then write custom components for the interactive music parts.