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
5.9k stars 384 forks source link

fix: More Notion-like side menu positioning #812

Closed matthewlipski closed 4 weeks ago

matthewlipski commented 4 weeks ago

This PR changes the side menu to be positioned centered on the first line of a block. Blocks with no text content usually assume the line height of a paragraph block.

This solution is a bit hacky in that the line height values for different blocks are hard coded instead of taking them from a bounding box, though fixing this would add a lot of complexity. Fortunately, it's easy for consumers to change those values via CSS.

Also, Notion does not center the side menu for things like file blocks, instead using the paragraph block line height, as you can see below: Screenshot 2024-06-05 at 22 45 12 I think this looks really ugly since the block is short enough that I think it should be centered, so I changed this for file & audio blocks also, as well as for when the add file button is showing in all types of file blocks.

Closes #386

vercel[bot] commented 4 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
blocknote ✅ Ready (Inspect) Visit Preview Jun 6, 2024 11:54am
blocknote-website ✅ Ready (Inspect) Visit Preview Jun 6, 2024 11:54am