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

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

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

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

packages/core/src/editor/editor.css

@@ -20,26 +20,6 @@
   padding: 0;
 }
 
-/*
-bn-root should be applied to all top-level elements
-
-This includes the Prosemirror editor, but also <div> element such as 
-Tippy popups that are appended to document.body directly
-*/
-.bn-root {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.bn-root *,
-.bn-root *::before,
-.bn-root *::after {
-  -webkit-box-sizing: inherit;
-  -moz-box-sizing: inherit;
-  box-sizing: inherit;
-}
-
 /* reset styles, they will be set on blockContent */
 .bn-default-styles p,
 .bn-default-styles h1,

packages/core/src/extensions/SideMenu/SideMenu.ts

@@ -612,8 +612,7 @@ export class SideMenuView<
       this.mousePos.y > editorOuterBoundingBox.top &&
       this.mousePos.y < editorOuterBoundingBox.bottom;
 
-    // TODO: remove parentElement, but then we need to remove padding from boundingbox or find a different solution
-    const editorWrapper = this.pmView.dom!.parentElement!;
+    const closestBNRoot = (event.target as HTMLElement).closest(".bn-root");
 
     // Doesn't update if the mouse hovers an element that's over the editor but
     // isn't a part of it or the side menu.
@@ -624,10 +623,7 @@ export class SideMenuView<
       event &&
       event.target &&
       // Element is outside the editor
-      !(
-        editorWrapper === event.target ||
-        editorWrapper.contains(event.target as HTMLElement)
-      )
+      !closestBNRoot
     ) {
       if (this.state?.show) {
         this.state.show = false;

packages/mantine/src/popover/Popover.tsx

@@ -11,18 +11,19 @@ import { forwardRef } from "react";
 export const Popover = (
   props: ComponentProps["Generic"]["Popover"]["Root"],
 ) => {
-  const { open, onOpenChange, position, children, ...rest } = props;
+  const { open, onOpenChange, position, portalRoot, children, ...rest } = props;
 
   assertEmpty(rest);
 
   return (
     <MantinePopover
       middlewares={{ size: { padding: 20 } }}
-      withinPortal={false}
+      withinPortal={!!portalRoot}
+      portalProps={portalRoot ? { target: portalRoot } : undefined}
       opened={open}
       onChange={onOpenChange}
       position={position}
-      zIndex={10000}
+      zIndex={portalRoot ? undefined : 10000}
     >
       {children}
     </MantinePopover>

packages/react/src/components/Comments/EmojiPicker.tsx

@@ -3,8 +3,6 @@ import { ReactNode, useState } from "react";
 import { useComponentsContext } from "../../editor/ComponentsContext.js";
 import { useBlockNoteContext } from "../../editor/BlockNoteContext.js";
 import Picker from "./EmojiMartPicker.js";
-import { createPortal } from "react-dom";
-import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 
 export const EmojiPicker = (props: {
   onEmojiSelect: (emoji: { native: string }) => void;
@@ -14,11 +12,10 @@ export const EmojiPicker = (props: {
   const [open, setOpen] = useState(false);
 
   const Components = useComponentsContext()!;
-  const editor = useBlockNoteEditor();
   const blockNoteContext = useBlockNoteContext();
 
   return (
-    <Components.Generic.Popover.Root open={open}>
+    <Components.Generic.Popover.Root open={open} portalRoot={blockNoteContext?.portalRoot}>
       <Components.Generic.Popover.Trigger>
         <div
           onClick={(event) => {
@@ -39,28 +36,24 @@ export const EmojiPicker = (props: {
           {props.children}
         </div>
       </Components.Generic.Popover.Trigger>
-      {editor.domElement?.parentElement &&
-        createPortal(
-          <Components.Generic.Popover.Content
-            className={"bn-emoji-picker-popover"}
-            variant={"panel-popover"}
-          >
-            <Picker
-              perLine={7}
-              onClickOutside={() => {
-                setOpen(false);
-                props.onOpenChange?.(false);
-              }}
-              onEmojiSelect={(emoji: { native: string }) => {
-                props.onEmojiSelect(emoji);
-                setOpen(false);
-                props.onOpenChange?.(false);
-              }}
-              theme={blockNoteContext?.colorSchemePreference}
-            />
-          </Components.Generic.Popover.Content>,
-          editor.domElement.parentElement,
-        )}
+      <Components.Generic.Popover.Content
+        className={"bn-emoji-picker-popover"}
+        variant={"panel-popover"}
+      >
+        <Picker
+          perLine={7}
+          onClickOutside={() => {
+            setOpen(false);
+            props.onOpenChange?.(false);
+          }}
+          onEmojiSelect={(emoji: { native: string }) => {
+            props.onEmojiSelect(emoji);
+            setOpen(false);
+            props.onOpenChange?.(false);
+          }}
+          theme={blockNoteContext?.colorSchemePreference}
+        />
+      </Components.Generic.Popover.Content>
     </Components.Generic.Popover.Root>
   );
 };

packages/react/src/components/Popovers/GenericPopover.tsx

@@ -1,6 +1,7 @@
 import {
   autoUpdate,
   FloatingFocusManager,
+  FloatingPortal,
   useDismiss,
   useFloating,
   useHover,
@@ -11,6 +12,7 @@ import {
 } from "@floating-ui/react";
 import { HTMLAttributes, ReactNode, useEffect, useRef } from "react";
 
+import { useBlockNoteContext } from "../../editor/BlockNoteContext.js";
 import { FloatingUIOptions } from "./FloatingUIOptions.js";
 
 export type GenericPopoverReference =
@@ -83,6 +85,9 @@ export const GenericPopover = (
     children: ReactNode;
   },
 ) => {
+  const blockNoteContext = useBlockNoteContext();
+  const portalRoot = blockNoteContext?.portalRoot ?? undefined;
+
   const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({
     whileElementsMounted: autoUpdate,
     ...props.useFloatingOptions,
@@ -152,7 +157,7 @@ export const GenericPopover = (
     style: {
       display: "flex",
       ...props.elementProps?.style,
-      zIndex: `calc(var(--bn-ui-base-z-index) + ${props.elementProps?.style?.zIndex || 0})`,
+      zIndex: `calc(var(--bn-ui-base-z-index, 0) + ${props.elementProps?.style?.zIndex || 0})`,
       ...floatingStyles,
       ...styles,
     },
@@ -169,27 +174,33 @@ export const GenericPopover = (
     // should be open. So without this fix, the popover just won't transition
     // out and will instead appear to hide instantly.
     return (
-      <div
-        ref={mergedRefs}
-        {...mergedProps}
-        dangerouslySetInnerHTML={{ __html: innerHTML.current }}
-      />
+      <FloatingPortal root={portalRoot}>
+        <div
+          ref={mergedRefs}
+          {...mergedProps}
+          dangerouslySetInnerHTML={{ __html: innerHTML.current }}
+        />
+      </FloatingPortal>
     );
   }
 
   if (!props.focusManagerProps?.disabled) {
     return (
-      <FloatingFocusManager {...props.focusManagerProps} context={context}>
-        <div ref={mergedRefs} {...mergedProps}>
-          {props.children}
-        </div>
-      </FloatingFocusManager>
+      <FloatingPortal root={portalRoot}>
+        <FloatingFocusManager {...props.focusManagerProps} context={context}>
+          <div ref={mergedRefs} {...mergedProps}>
+            {props.children}
+          </div>
+        </FloatingFocusManager>
+      </FloatingPortal>
     );
   }
 
   return (
-    <div ref={mergedRefs} {...mergedProps}>
-      {props.children}
-    </div>
+    <FloatingPortal root={portalRoot}>
+      <div ref={mergedRefs} {...mergedProps}>
+        {props.children}
+      </div>
+    </FloatingPortal>
   );
 };