fix: More Notion-like side menu positioning (#812)

* Made side menu position at first line of block

* Improved attribute naming

Author: matthewlipski

packages/ariakit/src/menu/Menu.tsx

@@ -40,6 +40,7 @@ export const MenuDropdown = forwardRef<
 
   return (
     <Ariakit.Menu
+      unmountOnHide={true}
       className={mergeCSSClasses("bn-ak-menu", className || "")}
       ref={ref}>
       {children}

packages/ariakit/src/sideMenu/SideMenu.tsx

@@ -10,10 +10,10 @@ export const SideMenu = forwardRef<
 >((props, ref) => {
   const { className, children, ...rest } = props;
 
-  assertEmpty(rest);
+  assertEmpty(rest, false);
 
   return (
-    <Ariakit.Group className={className} ref={ref}>
+    <Ariakit.Group className={className} ref={ref} {...rest}>
       {children}
     </Ariakit.Group>
   );

packages/mantine/src/sideMenu/SideMenu.tsx

@@ -10,10 +10,15 @@ export const SideMenu = forwardRef<
 >((props, ref) => {
   const { className, children, ...rest } = props;
 
-  assertEmpty(rest);
+  assertEmpty(rest, false);
 
   return (
-    <Mantine.Group align={"center"} gap={0} className={className} ref={ref}>
+    <Mantine.Group
+      align={"center"}
+      gap={0}
+      className={className}
+      ref={ref}
+      {...rest}>
       {children}
     </Mantine.Group>
   );

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

@@ -6,7 +6,7 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
-import { ReactNode } from "react";
+import { ReactNode, useMemo } from "react";
 
 import { AddBlockButton } from "./DefaultButtons/AddBlockButton";
 import { DragHandleButton } from "./DefaultButtons/DragHandleButton";
@@ -33,8 +33,28 @@ export const SideMenu = <
 
   const { addBlock, ...rest } = props;
 
+  const dataAttributes = useMemo(() => {
+    const attrs: Record<string, string> = {
+      "data-block-type": props.block.type,
+    };
+
+    if (props.block.type === "heading") {
+      attrs["data-level"] = props.block.props.level.toString();
+    }
+
+    if (props.editor.schema.blockSchema[props.block.type].isFileBlock) {
+      if (props.block.props.url) {
+        attrs["data-url"] = "true";
+      } else {
+        attrs["data-url"] = "false";
+      }
+    }
+
+    return attrs;
+  }, [props.block, props.editor.schema.blockSchema]);
+
   return (
-    <Components.SideMenu.Root className={"bn-side-menu"}>
+    <Components.SideMenu.Root className={"bn-side-menu"} {...dataAttributes}>
       {props.children || (
         <>
           <AddBlockButton addBlock={addBlock} />

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

@@ -39,7 +39,7 @@ export const SideMenuController = <
     state?.referencePos || null,
     1000,
     {
-      placement: "left",
+      placement: "left-start",
     }
   );
 

packages/react/src/editor/styles.css

@@ -210,3 +210,32 @@
 [data-background-color="pink"] {
   background-color: var(--bn-colors-highlights-pink-background);
 }
+
+/* Matching Side Menu height to block line height */
+.bn-side-menu {
+  height: 30px;
+}
+
+.bn-side-menu[data-block-type="heading"][data-level="1"] {
+  height: 78px;
+}
+
+.bn-side-menu[data-block-type="heading"][data-level="2"] {
+  height: 54px;
+}
+
+.bn-side-menu[data-block-type="heading"][data-level="3"] {
+  height: 37px;
+}
+
+.bn-side-menu[data-block-type="file"] {
+  height: 38px;
+}
+
+.bn-side-menu[data-block-type="audio"] {
+  height: 60px;
+}
+
+.bn-side-menu[data-url="false"] {
+  height: 54px;
+}

packages/shadcn/src/sideMenu/SideMenu.tsx

@@ -8,10 +8,10 @@ export const SideMenu = forwardRef<
 >((props, ref) => {
   const { className, children, ...rest } = props;
 
-  assertEmpty(rest);
+  assertEmpty(rest, false);
 
   return (
-    <div className={className} ref={ref}>
+    <div className={className} ref={ref} {...rest}>
       {children}
     </div>
   );

packages/shadcn/src/style.css

@@ -82,6 +82,7 @@
 }
 
 .bn-side-menu {
+  align-items: center;
   display: flex;
   justify-content: center;
 }