fix: Menu overflows (#340)

* Fixed overflow for slash menu, color picker, and formatting toolbar dropdown.

* Updated screenshots

* Added comment for `setTimeout`

Author: matthewlipski

packages/react/src/BlockNoteTheme.ts

@@ -41,7 +41,8 @@ export type ComponentStyles = Partial<{
   Editor: CSSObject;
   // Wraps Formatting Toolbar & Hyperlink Toolbar
   Toolbar: CSSObject;
-  // Appears on hover for Formatting Toolbar & Hyperlink Toolbar buttons
+  // Appears on hover for Formatting Toolbar
+  // & Hyperlink Toolbar buttons
   Tooltip: CSSObject;
   SlashMenu: CSSObject;
   SideMenu: CSSObject;
@@ -105,6 +106,7 @@ export const blockNoteToMantineTheme = (theme: Theme): MantineThemeOverride => {
               boxShadow: shadow,
               color: theme.colors.menu.text,
               padding: "2px",
+              overflowY: "scroll",
               ".mantine-Menu-label": {
                 backgroundColor: theme.colors.menu.background,
                 color: theme.colors.menu.text,

packages/react/src/FormattingToolbar/components/DefaultButtons/ColorStyleButton.tsx

@@ -6,6 +6,7 @@ import { ColorIcon } from "../../../SharedComponents/ColorPicker/components/Colo
 import { ColorPicker } from "../../../SharedComponents/ColorPicker/components/ColorPicker";
 import { useEditorContentChange } from "../../../hooks/useEditorContentChange";
 import { useEditorSelectionChange } from "../../../hooks/useEditorSelectionChange";
+import { usePreventMenuOverflow } from "../../../hooks/usePreventMenuOverflow";
 
 export const ColorStyleButton = <BSchema extends BlockSchema>(props: {
   editor: BlockNoteEditor<BSchema>;
@@ -51,8 +52,10 @@ export const ColorStyleButton = <BSchema extends BlockSchema>(props: {
     [props.editor]
   );
 
+  const { ref, updateMaxHeight } = usePreventMenuOverflow();
+
   return (
-    <Menu>
+    <Menu onOpen={updateMaxHeight}>
       <Menu.Target>
         <ToolbarButton
           mainTooltip={"Colors"}
@@ -65,14 +68,16 @@ export const ColorStyleButton = <BSchema extends BlockSchema>(props: {
           )}
         />
       </Menu.Target>
-      <Menu.Dropdown>
-        <ColorPicker
-          textColor={currentTextColor}
-          setTextColor={setTextColor}
-          backgroundColor={currentBackgroundColor}
-          setBackgroundColor={setBackgroundColor}
-        />
-      </Menu.Dropdown>
+      <div ref={ref}>
+        <Menu.Dropdown>
+          <ColorPicker
+            textColor={currentTextColor}
+            setTextColor={setTextColor}
+            backgroundColor={currentBackgroundColor}
+            setBackgroundColor={setBackgroundColor}
+          />
+        </Menu.Dropdown>
+      </div>
     </Menu>
   );
 };

packages/react/src/SharedComponents/Toolbar/components/ToolbarDropdown.tsx

@@ -4,6 +4,7 @@ import {
   ToolbarDropdownItemProps,
 } from "./ToolbarDropdownItem";
 import { ToolbarDropdownTarget } from "./ToolbarDropdownTarget";
+import { usePreventMenuOverflow } from "../../../hooks/usePreventMenuOverflow";
 
 export type ToolbarDropdownProps = {
   items: ToolbarDropdownItemProps[];
@@ -13,24 +14,31 @@ export type ToolbarDropdownProps = {
 export function ToolbarDropdown(props: ToolbarDropdownProps) {
   const selectedItem = props.items.filter((p) => p.isSelected)[0];
 
+  const { ref, updateMaxHeight } = usePreventMenuOverflow();
+
   if (!selectedItem) {
     return null;
   }
 
   return (
-    <Menu exitTransitionDuration={0} disabled={props.isDisabled}>
+    <Menu
+      exitTransitionDuration={0}
+      disabled={props.isDisabled}
+      onOpen={updateMaxHeight}>
       <Menu.Target>
         <ToolbarDropdownTarget
           text={selectedItem.text}
           icon={selectedItem.icon}
           isDisabled={selectedItem.isDisabled}
         />
       </Menu.Target>
-      <Menu.Dropdown>
-        {props.items.map((item) => (
-          <ToolbarDropdownItem key={item.text} {...item} />
-        ))}
-      </Menu.Dropdown>
+      <div ref={ref}>
+        <Menu.Dropdown>
+          {props.items.map((item) => (
+            <ToolbarDropdownItem key={item.text} {...item} />
+          ))}
+        </Menu.Dropdown>
+      </div>
     </Menu>
   );
 }

packages/react/src/SideMenu/components/DragHandleMenu/DefaultButtons/BlockColorsButton.tsx

@@ -6,12 +6,15 @@ import { BlockSchema, PartialBlock } from "@blocknote/core";
 import { DragHandleMenuProps } from "../DragHandleMenu";
 import { DragHandleMenuItem } from "../DragHandleMenuItem";
 import { ColorPicker } from "../../../../SharedComponents/ColorPicker/components/ColorPicker";
+import { usePreventMenuOverflow } from "../../../../hooks/usePreventMenuOverflow";
 
 export const BlockColorsButton = <BSchema extends BlockSchema>(
   props: DragHandleMenuProps<BSchema> & { children: ReactNode }
 ) => {
   const [opened, setOpened] = useState(false);
 
+  const { ref, updateMaxHeight } = usePreventMenuOverflow();
+
   const menuCloseTimer = useRef<NodeJS.Timeout | undefined>();
 
   const startMenuCloseTimer = useCallback(() => {
@@ -27,8 +30,13 @@ export const BlockColorsButton = <BSchema extends BlockSchema>(
     if (menuCloseTimer.current) {
       clearTimeout(menuCloseTimer.current);
     }
+
+    if (!opened) {
+      updateMaxHeight();
+    }
+
     setOpened(true);
-  }, []);
+  }, [opened, updateMaxHeight]);
 
   if (
     !("textColor" in props.block.props) ||
@@ -50,26 +58,28 @@ export const BlockColorsButton = <BSchema extends BlockSchema>(
             </Box>
           </div>
         </Menu.Target>
-        <Menu.Dropdown
-          onMouseLeave={startMenuCloseTimer}
-          onMouseOver={stopMenuCloseTimer}
-          style={{ marginLeft: "5px" }}>
-          <ColorPicker
-            iconSize={18}
-            textColor={props.block.props.textColor || "default"}
-            backgroundColor={props.block.props.backgroundColor || "default"}
-            setTextColor={(color) =>
-              props.editor.updateBlock(props.block, {
-                props: { textColor: color },
-              } as PartialBlock<BSchema>)
-            }
-            setBackgroundColor={(color) =>
-              props.editor.updateBlock(props.block, {
-                props: { backgroundColor: color },
-              } as PartialBlock<BSchema>)
-            }
-          />
-        </Menu.Dropdown>
+        <div ref={ref}>
+          <Menu.Dropdown
+            onMouseLeave={startMenuCloseTimer}
+            onMouseOver={stopMenuCloseTimer}
+            style={{ marginLeft: "5px" }}>
+            <ColorPicker
+              iconSize={18}
+              textColor={props.block.props.textColor || "default"}
+              backgroundColor={props.block.props.backgroundColor || "default"}
+              setTextColor={(color) =>
+                props.editor.updateBlock(props.block, {
+                  props: { textColor: color },
+                } as PartialBlock<BSchema>)
+              }
+              setBackgroundColor={(color) =>
+                props.editor.updateBlock(props.block, {
+                  props: { backgroundColor: color },
+                } as PartialBlock<BSchema>)
+              }
+            />
+          </Menu.Dropdown>
+        </div>
       </Menu>
     </DragHandleMenuItem>
   );

packages/react/src/SideMenu/components/DragHandleMenu/DragHandleMenu.tsx

@@ -13,6 +13,8 @@ export const DragHandleMenu = (props: { children: ReactNode }) => {
   });
 
   return (
-    <Menu.Dropdown className={classes.root}>{props.children}</Menu.Dropdown>
+    <Menu.Dropdown className={classes.root} style={{ overflow: "visible" }}>
+      {props.children}
+    </Menu.Dropdown>
   );
 };

packages/react/src/SlashMenu/components/SlashMenuPositioner.tsx

@@ -10,6 +10,7 @@ import { FC, useEffect, useMemo, useRef, useState } from "react";
 
 import { ReactSlashMenuItem } from "../ReactSlashMenuItem";
 import { DefaultSlashMenu } from "./DefaultSlashMenu";
+import { usePreventMenuOverflow } from "../../hooks/usePreventMenuOverflow";
 
 export type SlashMenuProps<BSchema extends BlockSchema = DefaultBlockSchema> =
   Pick<SlashMenuProsemirrorPlugin<BSchema, any>, "itemCallback"> &
@@ -53,6 +54,8 @@ export const SlashMenuPositioner = <
     [referencePos.current] // eslint-disable-line
   );
 
+  const { ref, updateMaxHeight } = usePreventMenuOverflow();
+
   const slashMenuElement = useMemo(() => {
     if (!filteredItems || keyboardHoveredItemIndex === undefined) {
       return null;
@@ -61,21 +64,25 @@ export const SlashMenuPositioner = <
     const SlashMenu = props.slashMenu || DefaultSlashMenu;
 
     return (
-      <SlashMenu
-        filteredItems={filteredItems}
-        itemCallback={(item) => props.editor.slashMenu.itemCallback(item)}
-        keyboardHoveredItemIndex={keyboardHoveredItemIndex}
-      />
+      <div ref={ref}>
+        <SlashMenu
+          filteredItems={filteredItems}
+          itemCallback={(item) => props.editor.slashMenu.itemCallback(item)}
+          keyboardHoveredItemIndex={keyboardHoveredItemIndex}
+        />
+      </div>
     );
   }, [
     filteredItems,
     keyboardHoveredItemIndex,
     props.editor.slashMenu,
     props.slashMenu,
+    ref,
   ]);
 
   return (
     <Tippy
+      onShow={updateMaxHeight}
       appendTo={props.editor.domElement.parentElement!}
       content={slashMenuElement}
       getReferenceClientRect={getReferenceClientRect}

packages/react/src/hooks/usePreventMenuOverflow.ts

@@ -0,0 +1,47 @@
+import { useRef } from "react";
+
+// This hook is used to stop Mantine Menu.Dropdown components from extending
+// beyond the viewport. It does this by dynamically setting the max height of
+// the dropdown. To use it, set the ref on a Menu.Dropdown's parent div, and
+// call updateMaxHeight() in the Menu's `onOpen` listener. Unfortunately, this
+// may mean you have to create an additional parent div, but you cannot set the
+// ref on the Menu or Menu.Dropdown components directly so this is a necessary
+// workaround.
+export function usePreventMenuOverflow() {
+  const ref = useRef<HTMLDivElement>(null);
+
+  return {
+    ref: ref,
+    updateMaxHeight: () => {
+      // Seems a small delay is necessary to get the correct DOM rect - likely
+      // because the menu is not yet fully rendered when the `onOpen` event is
+      // fired.
+      setTimeout(() => {
+        if (!ref.current) {
+          return;
+        }
+
+        if (ref.current.childElementCount > 0) {
+          // Reset any previously set max-height
+          (ref.current.firstElementChild as HTMLDivElement).style.maxHeight =
+            "none";
+
+          // Get the menu DOM rect
+          const domRect =
+            ref.current.firstElementChild!.getBoundingClientRect();
+
+          // Set the menu max height, based on the Tippy position. Checking if
+          // the top of the menu is above the viewport (position < 0) is a quick
+          // way to check if the placement is "top" or "bottom".
+          (
+            ref.current.firstElementChild as HTMLDivElement
+          ).style.maxHeight = `${Math.min(
+            domRect.top >= 0
+              ? window.innerHeight - domRect.top - 20
+              : domRect.bottom - 20
+          )}px`;
+        }
+      }, 10);
+    },
+  };
+}