Added CSS class to bn-container for each UI lib to scope styles

packages/ariakit/src/index.tsx

@@ -1,4 +1,9 @@
-import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  mergeCSSClasses,
+  StyleSchema,
+} from "@blocknote/core";
 import {
   BlockNoteViewRaw,
   Components,
@@ -95,9 +100,14 @@ export const BlockNoteView = <
 >(
   props: ComponentProps<typeof BlockNoteViewRaw<BSchema, ISchema, SSchema>>
 ) => {
+  const { className, ...rest } = props;
+
   return (
     <ComponentsContext.Provider value={components}>
-      <BlockNoteViewRaw {...props} />
+      <BlockNoteViewRaw
+        className={mergeCSSClasses("bn-aria-kit", className || "")}
+        {...rest}
+      />
     </ComponentsContext.Provider>
   );
 };

packages/ariakit/src/style.css

@@ -5,76 +5,76 @@
 
 @import "./ariakitStyles.css";
 
-.bn-ak-input-wrapper {
+.bn-aria-kit .bn-ak-input-wrapper {
   align-items: center;
   display: flex;
   gap: 0.5rem;
 }
 
-.bn-toolbar .bn-ak-button {
+.bn-aria-kit .bn-toolbar .bn-ak-button {
   width: unset;
 }
 
-.bn-toolbar .bn-ak-button[data-selected] {
+.bn-aria-kit .bn-toolbar .bn-ak-button[data-selected] {
   padding-top: 0.125rem;
   box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--border);
 }
 
-.bn-toolbar .bn-ak-button[data-selected]:where(.dark, .dark *) {
+.bn-aria-kit .bn-toolbar .bn-ak-button[data-selected]:where(.dark, .dark *) {
   box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 1px 1px var(--shadow);
 }
 
-.bn-toolbar .bn-ak-popover {
+.bn-aria-kit .bn-toolbar .bn-ak-popover {
   gap: 0.5rem;
 }
 
-.bn-tab-panel {
+.bn-aria-kit .bn-tab-panel {
   align-items: center;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.bn-file-input {
+.bn-aria-kit .bn-file-input {
   max-width: 100%;
 }
 
-.bn-ak-button {
+.bn-aria-kit .bn-ak-button {
   outline-style: none;
 }
 
-.bn-ak-menu-item[aria-selected="true"],
-.bn-ak-menu-item:hover {
+.bn-aria-kit .bn-ak-menu-item[aria-selected="true"],
+.bn-aria-kit .bn-ak-menu-item:hover {
   background-color: hsl(204 100% 40%);
   color: hsl(204 20% 100%);
 }
 
-.bn-ak-menu-item {
+.bn-aria-kit .bn-ak-menu-item {
   display: flex;
 }
 
-.bn-dropdown {
+.bn-aria-kit .bn-dropdown {
   overflow: visible;
 }
 
-.bn-suggestion-menu,
-.bn-color-picker-dropdown {
+.bn-aria-kit .bn-suggestion-menu,
+.bn-aria-kit .bn-color-picker-dropdown {
   overflow: scroll;
 }
 
-.bn-ak-suggestion-menu-item-body {
+.bn-aria-kit .bn-ak-suggestion-menu-item-body {
   flex: 1;
 }
 
-.bn-ak-suggestion-menu-item-subtitle {
+.bn-aria-kit .bn-ak-suggestion-menu-item-subtitle {
   font-size: 0.7rem;
 }
 
-.bn-ak-suggestion-menu-item-section[data-position="left"] {
+.bn-aria-kit .bn-ak-suggestion-menu-item-section[data-position="left"] {
   padding: 8px;
 }
 
-.bn-ak-suggestion-menu-item-section[data-position="right"] {
+.bn-aria-kit .bn-ak-suggestion-menu-item-section[data-position="right"] {
   --border: rgb(0 0 0/13%);
   --highlight: rgb(255 255 255/20%);
   --shadow: rgb(0 0 0/10%);
@@ -85,51 +85,51 @@
   padding-inline: 4px;
 }
 
-.bn-side-menu {
+.bn-aria-kit .bn-side-menu {
   align-items: center;
   display: flex;
   justify-content: center;
 }
 
-.bn-side-menu .bn-ak-button {
+.bn-aria-kit .bn-side-menu .bn-ak-button {
   height: fit-content;
   padding: 0;
   width: fit-content;
 }
 
-.bn-panel-popover {
+.bn-aria-kit .bn-panel-popover {
   background-color: transparent;
   border: none;
   box-shadow: none;
 }
 
-.bn-table-handle {
+.bn-aria-kit .bn-table-handle {
   height: fit-content;
   padding: 0;
   width: fit-content;
 }
 
-.bn-side-menu,
-.bn-table-handle {
+.bn-aria-kit .bn-side-menu,
+.bn-aria-kit .bn-table-handle {
   color: gray;
 }
 
-.bn-ak-button:where(.dark, .dark *) {
+.bn-aria-kit .bn-ak-button:where(.dark, .dark *) {
   color: hsl(204 20% 100%);
 }
 
-.bn-ak-tab,
-.bn-file-input {
+.bn-aria-kit .bn-ak-tab,
+.bn-aria-kit .bn-file-input {
   background-color: transparent;
   color: black;
 }
 
-.bn-ak-tab:where(.dark, .dark *),
-.bn-file-input:where(.dark, .dark *) {
+.bn-aria-kit .bn-ak-tab:where(.dark, .dark *),
+.bn-aria-kit .bn-file-input:where(.dark, .dark *) {
   color: white;
 }
 
-.bn-ak-tooltip {
+.bn-aria-kit .bn-ak-tooltip {
   align-items: center;
   display: flex;
   flex-direction: column;

packages/mantine/src/index.tsx

@@ -1,4 +1,9 @@
-import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  mergeCSSClasses,
+  StyleSchema,
+} from "@blocknote/core";
 import {
   BlockNoteViewRaw,
   Components,
@@ -122,7 +127,7 @@ export const BlockNoteView = <
         };
   }
 ) => {
-  const { theme, ...rest } = props;
+  const { className, theme, ...rest } = props;
 
   const existingContext = useBlockNoteContext();
   const systemColorScheme = usePrefersColorScheme();
@@ -160,12 +165,13 @@ export const BlockNoteView = <
       {/* as proposed here:  https://github.com/orgs/mantinedev/discussions/5685 */}
       <MantineProvider
         theme={mantineTheme}
-        cssVariablesSelector=".bn-container"
+        cssVariablesSelector=".bn-mantine"
         // This gets the element to set `data-mantine-color-scheme` on. Since we
         // don't need this attribute (we use our own theming API), we return
         // undefined here.
         getRootElement={() => undefined}>
         <BlockNoteViewRaw
+          className={mergeCSSClasses("bn-mantine", className || "")}
           theme={typeof theme === "object" ? undefined : theme}
           {...rest}
           ref={ref}

packages/mantine/src/mantineStyles.css

@@ -89,50 +89,50 @@
  (src: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/global.css)
  but with styles set on `body` and `html` instead set on `bn-container`, as
  well as other minor changes. */
-.bn-container *, .bn-container :after, .bn-container :before {
+.bn-mantine *, .bn-mantine :after, .bn-mantine :before {
     box-sizing: border-box
 }
 
-.bn-container button,
-.bn-container select {
+.bn-mantine button,
+.bn-mantine select {
     text-transform: none
 }
 
 @media screen and (max-device-width: 500px) {
-    .bn-container {
+    .bn-mantine {
         -webkit-text-size-adjust: 100%
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .bn-container [data-respect-reduced-motion] [data-reduce-motion] {
+    .bn-mantine [data-respect-reduced-motion] [data-reduce-motion] {
         animation: none;
         transition: none
     }
 }
 
-.bn-container [data-mantine-color-scheme=dark] .mantine-dark-hidden, .bn-container [data-mantine-color-scheme=light] .mantine-light-hidden {
+.bn-mantine [data-mantine-color-scheme=dark] .mantine-dark-hidden, .bn-mantine [data-mantine-color-scheme=light] .mantine-light-hidden {
     display: none
 }
 
-.bn-container .mantine-focus-auto:focus-visible {
+.bn-mantine .mantine-focus-auto:focus-visible {
     outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
     outline-offset: calc(.125rem * var(--mantine-scale))
 }
 
-.bn-container .mantine-focus-always:focus {
+.bn-mantine .mantine-focus-always:focus {
     outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
     outline-offset: calc(.125rem * var(--mantine-scale))
 }
 
-.bn-container .mantine-focus-never:focus {
+.bn-mantine .mantine-focus-never:focus {
     outline: none
 }
 
-.bn-container .mantine-active:active {
+.bn-mantine .mantine-active:active {
     transform: translateY(calc(.0625rem * var(--mantine-scale)))
 }
 
-.bn-container[dir=rtl] .mantine-rotate-rtl {
+.bn-mantine[dir=rtl] .mantine-rotate-rtl {
     transform: rotate(180deg)
 }