fix: ShadCN Tailwind scoping

[matthewlipski]

The shadcn package uses TailwindCSS, so when building a project that imports both @blocknote/shadcn and Tailwind, it creates duplicate CSS declarations. This isn't a huge problem on its own, but when building projects using TailwindCSS, only the rules that are actually used are included due to optimization. This can lead to cases where the Tailwind classes created by the shadcn package take priority over those created by the parent app, and cause styling to break as they don't include certain conditional classes such as min-width.

This PR makes the Tailwind classes used by @blocknote/shadcn have a bn- prefix, which basically scopes them to the editor only and stops them from conflicting with those used outside the editor.

This PR also scopes the styles of each UI library to the corresponding editor instead of to all editors. This fixes a very niche edge case where you have 2 editors using different UI libs, and also the examples, since those can have styles sheets from other examples loaded.

Closes #845

[vercel[bot]]

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

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Jun 24, 2024 6:35pm
blocknote-website	✅ Ready (Inspect)	Visit Preview	Jun 24, 2024 6:35pm

[matthewlipski]

I suppose the latest change to the container rules is because styles were conflicting when changing examples in the playground, right? Curious; which rules were conflicting? Because most of the rules already were prefixed (bn-ak-*)?

Yeah both playground and sometimes with docs though it was inconsistent, as NextJS doesn't seem to load stylesheets in a predefined order in the built env so you would sometimes see conflicting styles there too.

Regarding the conflicting styles that's a good point, we really only need the bn-xyz ... prefix for more generic rules like this one in mantine's styles:

/* Toolbar styling */
.bn-toolbar {
  background-color: var(--bn-colors-menu-background);
  border: var(--bn-border);
  border-radius: var(--bn-border-radius-medium);
  box-shadow: var(--bn-shadow-medium);
  flex-wrap: nowrap;
  gap: 2px;
  padding: 2px;
  width: fit-content;
}