BlockNote
BlockNote copied to clipboard
Refactor/multi UI libs + shadcn
This PR makes BlockNote compatible with different UI libraries! It adds support for ShadCN / Tailwind / Radix and Ariakit besides the current Mantine implementation
This feature still requires significant work. Consider sponsoring BlockNote to accelerate the development!
Architecture
-
@blocknote/react
takes the main components it's need fromComponentsContext
which can be provided externally. -
@blocknote/react
shouldn't directly depend on any UI library anymore - The suggestionmenu has been changed to use "vanilla React". We pretty much implemented all the logic already (keyboard / query handling). Theoretically, we could move to (ariakit / mantine / shadcn) combobox, but it doesn't seem to add a lot of value over our own implementation (I did explore this here in #refactor/combobox though)
closes #286 closes #712 closes #218
TODOs
general
- [x] @matthewlipski, extract Tab + ImagePanel. Good way to get up to speed with new architecture
- [x] Extract separate packages for mantine / ariakit
- [x] Clean stylesheets. Proposal: classnames of main project are prefixed
bn-
, classnames in Mantine project prefixbn-mt-
, etc. - [x] Bug: opening 1 component (formatting toolbar) and then the side menu, doesn't close sidemenu
- [x] test + fix overflowing menus for all 3 libraries (should be possible without a hacky hook)
- [x] Think about theming; still relevant?
- [x] Do we want to make all examples / docs switchable (add a UX switcher?)
- [x] think about tailwind integration
- [ ] Input labels (link creation menu)
- [x] what's next with suggestionmenu? (implement for shad / ariakit?)
- [ ] Review components context structure (generic/specific components)
- [x] Fix lint/build
- [ ] Docs:
- [ ] Hero page features
- [x] Page for setting up Ariakit/ShadCN project
- [x] Fixing custom button/item docs
Mantine
- [x] Extract to separate package
- [x] Extensive testing & code review. Are there any regressions vs the current version?
- [x] Colors dropdown bug when hovering second item
- [x] Make sure all components passthrough classnames and ref
ShadCN
- [x] update example readme etc.
- [x] extensive testing & code review
- [x] Make sure all components passthrough classnames and ref
- [x] allow passing in shadcn components from the "host project"
- [x] implement select items
- [x] fix z index of select / menus
- [x] implement menu colors
- [x] implement forms
- [x] implement toggle buttons
- [x] Fix remaining styles
- [x] Add PW tests
- [x] Move component context fallbacks to context itself, not components
Ariakit
- [x] add example + readme
- [x] Extract to separate package
- [x] extensive testing & code review
- [x] Make sure all components passthrough classnames and ref
- [x] Add PW tests