refactor: portal floating UI elements to document.body to prevent overflow clipping BLO-1115 (#2591)

Floating UI elements (menus, toolbars, emoji picker) are now portaled to a
dedicated container at document.body, preventing them from being clipped by
overflow:hidden ancestors.

Author: YousefED

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.

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
 

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

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

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

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

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;

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

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

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