BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

Refactor/multi UI libs + shadcn

Open YousefED opened this issue 3 months ago • 1 comments

This PR makes BlockNote compatible with different UI libraries! It adds support for ShadCN / Tailwind / Radix and Ariakit besides the current Mantine implementation

shadcn

This feature still requires significant work. Consider sponsoring BlockNote to accelerate the development!

Architecture

  • @blocknote/react takes the main components it's need from ComponentsContext 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 prefix bn-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

YousefED avatar Mar 19 '24 02:03 YousefED