feat: multi UI libs (shadcn + ariakit) + i18n

[YousefED]

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 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

• @matthewlipski, extract Tab + ImagePanel. Good way to get up to speed with new architecture
• Extract separate packages for mantine / ariakit
• Clean stylesheets. Proposal: classnames of main project are prefixed bn-, classnames in Mantine project prefix bn-mt-, etc.
• Bug: opening 1 component (formatting toolbar) and then the side menu, doesn't close sidemenu
• test + fix overflowing menus for all 3 libraries (should be possible without a hacky hook)
• Think about theming; still relevant?
• Do we want to make all examples / docs switchable (add a UX switcher?)
• think about tailwind integration
• Input labels (link creation menu)
• what's next with suggestionmenu? (implement for shad / ariakit?)
• Review components context structure (generic/specific components)
• Fix lint/build
• Docs:
  • Hero page features
  • Page for setting up Ariakit/ShadCN project
  • Fixing custom button/item docs

Mantine

• Extract to separate package
• Extensive testing & code review. Are there any regressions vs the current version?
• Colors dropdown bug when hovering second item
• Make sure all components passthrough classnames and ref

ShadCN

• update example readme etc.
• extensive testing & code review
• Make sure all components passthrough classnames and ref
• allow passing in shadcn components from the "host project"
• implement select items
• fix z index of select / menus
• implement menu colors
• implement forms
• implement toggle buttons
• Fix remaining styles
• Add PW tests
• Move component context fallbacks to context itself, not components

Ariakit

• add example + readme
• Extract to separate package
• extensive testing & code review
• Make sure all components passthrough classnames and ref
• Add PW tests

[vercel]

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

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	May 4, 2024 6:43pm
blocknote-website	✅ Ready (Inspect)	Visit Preview	May 4, 2024 6:43pm