LeeeeeeM · pull · Apr 9, 2026 · Apr 9, 2026 · Apr 9, 2026
diff --git a/docs/content/docs/react/styling-theming/overriding-css.mdx b/docs/content/docs/react/styling-theming/overriding-css.mdx
@@ -21,8 +21,9 @@ BlockNote uses classes with the `bn-` prefix to style editor elements. Here are
 
 #### Editor Structure
 
-- `.bn-container`: Container for editor and all menus/toolbars.
-- `.bn-editor`: Main editor element.
+- `.bn-root`: Container class both the floating menus / toolbars and the editor
+- `.bn-container`: Container around `.bn-editor`
+- `.bn-editor`: Main editor element (the "contenteditable").
 - `.bn-block`: Individual block element (including nested).
 - `.bn-block-group`: Container for nested blocks.
 - `.bn-block-content`: Block content wrapper.

diff --git a/docs/content/docs/react/styling-theming/themes.mdx b/docs/content/docs/react/styling-theming/themes.mdx
@@ -67,7 +67,7 @@ Here are each of the theme CSS variables you can set, with values from the defau
 --bn-border-radius: 6px;
 ```
 
-Setting these variables on the `.bn-container[data-color-scheme]` selector will overwrite them for both default light & dark themes. To overwrite variables separately for light & dark themes, use the `.bn-container[data-color-scheme="light"]` and `.bn-container[data-color-scheme="dark"]` selectors.
+Setting these variables on the `.bn-root[data-color-scheme]` selector will overwrite them for both default light & dark themes. To overwrite variables separately for light & dark themes, use the `.bn-root[data-color-scheme="light"]` and `.bn-root[data-color-scheme="dark"]` selectors.
 
 ## Programmatic Configuration
 

diff --git a/docs/package.json b/docs/package.json
@@ -34,11 +34,11 @@
     "@blocknote/xl-odt-exporter": "workspace:*",
     "@blocknote/xl-pdf-exporter": "workspace:*",
     "@fumadocs/base-ui": "16.5.0",
-    "@liveblocks/client": "3.7.1-tiptap3",
-    "@liveblocks/react": "3.7.1-tiptap3",
-    "@liveblocks/react-blocknote": "3.7.1-tiptap3",
-    "@liveblocks/react-tiptap": "3.7.1-tiptap3",
-    "@liveblocks/react-ui": "3.7.1-tiptap3",
+    "@liveblocks/client": "^3.17.0",
+    "@liveblocks/react": "^3.17.0",
+    "@liveblocks/react-blocknote": "^3.17.0",
+    "@liveblocks/react-tiptap": "^3.17.0",
+    "@liveblocks/react-ui": "^3.17.0",
     "@mantine/core": "^8.3.11",
     "@mantine/hooks": "^8.3.11",
     "@mantine/utils": "^6.0.22",
@@ -126,7 +126,7 @@
     "eslint-config-next": "^16.1.6",
     "next-validate-link": "^1.6.4",
     "postcss": "^8.5.6",
-    "serve": "^14.2.5",
+    "serve": "^14.2.6",
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"

diff --git a/examples/01-basic/12-multi-editor/src/App.tsx b/examples/01-basic/12-multi-editor/src/App.tsx
@@ -5,21 +5,27 @@ import "@blocknote/mantine/style.css";
 import { useCreateBlockNote } from "@blocknote/react";
 
 // Component that creates & renders a BlockNote editor.
-function Editor(props: { initialContent?: PartialBlock[] }) {
+function Editor(props: {
+  initialContent?: PartialBlock[];
+  theme: "dark" | "light";
+}) {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
     initialContent: props.initialContent,
   });
 
   // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} style={{ flex: 1 }} />;
+  return (
+    <BlockNoteView theme={props.theme} editor={editor} style={{ flex: 1 }} />
+  );
 }
 
 export default function App() {
   // Creates & renders two editors side by side.
   return (
     <div style={{ display: "flex" }}>
       <Editor
+        theme="dark"
         initialContent={[
           {
             type: "paragraph",
@@ -35,6 +41,7 @@ export default function App() {
         ]}
       />
       <Editor
+        theme="light"
         initialContent={[
           {
             type: "paragraph",

diff --git a/examples/02-backend/04-rendering-static-documents/src/App.tsx b/examples/02-backend/04-rendering-static-documents/src/App.tsx
@@ -57,7 +57,7 @@ export default function App() {
     // additional class names/attributes depend on the UI library you're using,
     // whether you want to show light or dark more, etc. It's easiest to just
     // check the rendered editor HTML to see what you need to add.
-    <div className="bn-container bn-mantine">
+    <div className="bn-root bn-container bn-mantine">
       <div
         className="ProseMirror bn-editor bn-default-styles"
         dangerouslySetInnerHTML={{ __html: html }}

diff --git a/examples/04-theming/02-changing-font/src/styles.css b/examples/04-theming/02-changing-font/src/styles.css
@@ -1,3 +1,3 @@
-.bn-container[data-changing-font-demo] .bn-editor * {
+.bn-root[data-changing-font-demo] .bn-editor * {
   font-family: "Comic Sans MS", sans-serif;
 }
diff --git a/examples/04-theming/03-theming-css/src/styles.css b/examples/04-theming/03-theming-css/src/styles.css
@@ -1,11 +1,10 @@
 /* Adds border and shadow to editor */
-.bn-container[data-theming-css-demo] .bn-editor * {
+.bn-root[data-theming-css-demo] .bn-editor * {
   color: blue;
 }
 
 /* Makes slash menu hovered items blue */
-.bn-container[data-theming-css-demo]
-  .bn-suggestion-menu-item[aria-selected="true"],
-.bn-container[data-theming-css-demo] .bn-suggestion-menu-item:hover {
+.bn-root[data-theming-css-demo] .bn-suggestion-menu-item[aria-selected="true"],
+.bn-root[data-theming-css-demo] .bn-suggestion-menu-item:hover {
   background-color: blue;
 }
diff --git a/examples/04-theming/04-theming-css-variables/src/styles.css b/examples/04-theming/04-theming-css-variables/src/styles.css
@@ -1,5 +1,5 @@
 /* Base theme */
-.bn-container[data-theming-css-variables-demo][data-color-scheme] {
+.bn-root[data-theming-css-variables-demo][data-color-scheme] {
   --bn-colors-editor-text: #222222;
   --bn-colors-editor-background: #ffeeee;
   --bn-colors-menu-text: #ffffff;
@@ -21,7 +21,7 @@
 }
 
 /* Changes for dark mode */
-.bn-container[data-theming-css-variables-demo][data-color-scheme="dark"] {
+.bn-root[data-theming-css-variables-demo][data-color-scheme="dark"] {
   --bn-colors-editor-text: #ffffff;
   --bn-colors-editor-background: #9b0000;
   --bn-colors-side-menu: #ffffff;

diff --git a/examples/05-interoperability/09-blocks-to-html-static-render/src/App.tsx b/examples/05-interoperability/09-blocks-to-html-static-render/src/App.tsx
@@ -191,7 +191,7 @@ export default function App() {
           etc. It's easiest to just copy the class names and HTML attributes 
           from an actual BlockNote editor. */}
           <div
-            className="bn-container bn-mantine"
+            className="bn-root bn-container bn-mantine"
             data-color-scheme={theme}
             data-mantine-color-scheme={theme}
           >

diff --git a/examples/05-interoperability/10-static-html-render/src/App.tsx b/examples/05-interoperability/10-static-html-render/src/App.tsx
@@ -1,7 +1,6 @@
 import "@blocknote/core/fonts/inter.css";
 import "@blocknote/mantine/style.css";
 import { useCreateBlockNote, usePrefersColorScheme } from "@blocknote/react";
-import { useRef, useEffect } from "react";
 
 export default function App() {
   // Creates a new editor instance.
@@ -158,7 +157,7 @@ export default function App() {
   // Renders the exported static HTML from the editor.
   return (
     <div
-      className="bn-container bn-mantine"
+      className="bn-root bn-container bn-mantine"
       data-color-scheme={theme}
       data-mantine-color-scheme={theme}
     >

diff --git a/examples/07-collaboration/02-liveblocks/.bnexample.json b/examples/07-collaboration/02-liveblocks/.bnexample.json
@@ -4,11 +4,11 @@
   "author": "yousefed",
   "tags": ["Advanced", "Saving/Loading", "Collaboration"],
   "dependencies": {
-    "@liveblocks/client": "3.7.1-tiptap3",
-    "@liveblocks/react": "3.7.1-tiptap3",
-    "@liveblocks/react-blocknote": "3.7.1-tiptap3",
-    "@liveblocks/react-tiptap": "3.7.1-tiptap3",
-    "@liveblocks/react-ui": "3.7.1-tiptap3",
+    "@liveblocks/client": "^3.17.0",
+    "@liveblocks/react": "^3.17.0",
+    "@liveblocks/react-blocknote": "^3.17.0",
+    "@liveblocks/react-tiptap": "^3.17.0",
+    "@liveblocks/react-ui": "^3.17.0",
     "yjs": "^13.6.27"
   }
 }
diff --git a/examples/07-collaboration/02-liveblocks/package.json b/examples/07-collaboration/02-liveblocks/package.json
@@ -21,11 +21,11 @@
     "@mantine/utils": "^6.0.22",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "@liveblocks/client": "3.7.1-tiptap3",
-    "@liveblocks/react": "3.7.1-tiptap3",
-    "@liveblocks/react-blocknote": "3.7.1-tiptap3",
-    "@liveblocks/react-tiptap": "3.7.1-tiptap3",
-    "@liveblocks/react-ui": "3.7.1-tiptap3",
+    "@liveblocks/client": "^3.17.0",
+    "@liveblocks/react": "^3.17.0",
+    "@liveblocks/react-blocknote": "^3.17.0",
+    "@liveblocks/react-tiptap": "^3.17.0",
+    "@liveblocks/react-ui": "^3.17.0",
     "yjs": "^13.6.27"
   },
   "devDependencies": {

diff --git a/nx.json b/nx.json
@@ -24,26 +24,34 @@
     "build:site": {
       "cache": true,
       "dependsOn": ["^build"],
-      "inputs": ["{workspaceRoot}/examples/**/*", "{projectRoot}/**/*"],
+      "inputs": [
+        "{workspaceRoot}/examples/**/*",
+        "{projectRoot}/**/*",
+        "!{projectRoot}/sqlite.db",
+        "!{projectRoot}/.env*",
+        "!{projectRoot}/validate-links.mjs",
+        "!{projectRoot}/coverage/**/*"
+      ],
       "outputs": [
-        "{projectRoot}/dist",
         "{projectRoot}/.next",
+        "!{projectRoot}/.next/cache",
         "{projectRoot}/.source",
         "{projectRoot}/content/examples",
         "{projectRoot}/components/example/generated"
       ]
     },
     "test": {
       "cache": true,
-      "dependsOn": ["^test"]
+      "dependsOn": ["build", "^build"]
     },
     "lint": {
       "cache": true,
       "dependsOn": []
     },
     "e2e": {
       "cache": true,
-      "dependsOn": ["^e2e"]
+      "dependsOn": ["build", "^build"]
     }
-  }
+  },
+  "analytics": false
 }
diff --git a/package.json b/package.json
@@ -2,20 +2,20 @@
   "name": "root",
   "type": "module",
   "devDependencies": {
-    "@nx/js": "22.5.4",
+    "@nx/js": "22.6.4",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "concurrently": "9.1.2",
     "eslint": "^8.57.1",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.32.0",
     "glob": "^10.5.0",
-    "nx": "22.5.4",
+    "nx": "22.6.4",
     "prettier": "3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
-    "serve": "14.2.4",
+    "serve": "14.2.6",
     "typescript": "^5.9.3",
-    "vitest": "^2.1.9",
+    "vitest": "^4.1.2",
     "wait-on": "8.0.3"
   },
   "pnpm": {

diff --git a/packages/ariakit/package.json b/packages/ariakit/package.json
@@ -63,16 +63,16 @@
   "devDependencies": {
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react": "^6.0.1",
     "eslint": "^8.57.1",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "rimraf": "^5.0.10",
     "rollup-plugin-webpack-stats": "^0.2.6",
     "typescript": "^5.9.3",
-    "vite": "^5.4.20",
+    "vite": "^8.0.3",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-externalize-deps": "^0.8.0"
+    "vite-plugin-externalize-deps": "^0.10.0"
   },
   "peerDependencies": {
     "react": "^18.0 || ^19.0 || >= 19.0.0-rc",

diff --git a/packages/ariakit/src/comments/Comment.tsx b/packages/ariakit/src/comments/Comment.tsx
@@ -58,7 +58,7 @@ export const Comment = forwardRef<
     actions,
     children,
     edited,
-    emojiPickerOpen, // Unused
+    emojiPickerOpen,
     ...rest
   } = props;
 
@@ -72,7 +72,8 @@ export const Comment = forwardRef<
     (showActions === true ||
       showActions === undefined ||
       (showActions === "hover" && hovered) ||
-      focused);
+      focused ||
+      emojiPickerOpen);
 
   return (
     <AriakitGroup

diff --git a/packages/ariakit/src/popover/Popover.tsx b/packages/ariakit/src/popover/Popover.tsx
@@ -6,7 +6,11 @@ import {
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
-import { forwardRef } from "react";
+import { createContext, forwardRef, useContext } from "react";
+
+const PortalRootContext = createContext<HTMLElement | null | undefined>(
+  undefined,
+);
 
 export const PopoverTrigger = forwardRef<
   HTMLButtonElement,
@@ -27,13 +31,16 @@ export const PopoverContent = forwardRef<
 
   assertEmpty(rest);
 
+  const portalRoot = useContext(PortalRootContext);
+
   return (
     <AriakitPopover
       className={mergeCSSClasses(
         "bn-ak-popover",
         className || "",
         variant === "panel-popover" ? "bn-ak-panel-popover" : "",
       )}
+      portalElement={portalRoot ?? undefined}
       ref={ref}
     >
       {children}
@@ -44,7 +51,7 @@ export const PopoverContent = forwardRef<
 export const Popover = (
   props: ComponentProps["Generic"]["Popover"]["Root"],
 ) => {
-  const { children, open, onOpenChange, position, ...rest } = props;
+  const { children, open, onOpenChange, position, portalRoot, ...rest } = props;
 
   assertEmpty(rest);
 
@@ -54,7 +61,9 @@ export const Popover = (
       setOpen={onOpenChange}
       placement={position}
     >
-      {children}
+      <PortalRootContext.Provider value={portalRoot}>
+        {children}
+      </PortalRootContext.Provider>
     </AriakitPopoverProvider>
   );
 };
diff --git a/packages/ariakit/src/style.css b/packages/ariakit/src/style.css
@@ -38,10 +38,6 @@
     inset 0 1px 1px 1px var(--shadow);
 }
 
-.bn-ak-popover {
-  z-index: 10000;
-}
-
 .bn-toolbar .bn-ak-popover {
   gap: 0.5rem;
 }

diff --git a/packages/ariakit/vite.config.ts b/packages/ariakit/vite.config.ts
@@ -16,7 +16,13 @@ export default defineConfig((conf) => ({
   resolve: {
     alias:
       conf.command === "build"
-        ? ({} as Record<string, string>)
+        ? ({
+            // Vite 8's postcss-import can't resolve bare package specifiers in CSS @import
+            "@blocknote/react/style.css": path.resolve(
+              __dirname,
+              "../react/dist/style.css"
+            ),
+          } as Record<string, string>)
         : ({
             // load live from sources with live reload working
             "@blocknote/core": path.resolve(__dirname, "../core/src/"),
@@ -30,6 +36,7 @@ export default defineConfig((conf) => ({
         "blocknote-ariakit": path.resolve(__dirname, "src/index.tsx"),
       },
       name: "blocknote-ariakit",
+      cssFileName: "style",
       formats: ["es", "cjs"],
       fileName: (format, entryName) =>
         format === "es" ? `${entryName}.js` : `${entryName}.cjs`,
@@ -43,7 +50,7 @@ export default defineConfig((conf) => ({
             ...pkg.dependencies,
             ...((pkg as any).peerDependencies || {}),
             ...pkg.devDependencies,
-          }).includes(source)
+          }).some((dep) => source === dep || source.startsWith(dep + "/"))
         ) {
           return true;
         }
@@ -64,7 +71,6 @@ export default defineConfig((conf) => ({
           react: "React",
           "react-dom": "ReactDOM",
         },
-        interop: "compat", // https://rollupjs.org/migration/#changed-defaults
       },
     },
   },