feat: Add Drag Handle Menu item closeMenuOnClick prop (#363)

* Added `DragHandleMenuItem` prop to prevent menu closing on click

* Small docs fix

* Small fix

* Implemented PR feedback

Author: matthewlipski

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

@@ -59,38 +59,38 @@ export const BlockColorsButton = <BSchema extends BlockSchema>(
           </div>
         </Menu.Target>
         <div ref={ref}>
-        <Menu.Dropdown
-          onMouseLeave={startMenuCloseTimer}
-          onMouseOver={stopMenuCloseTimer}
-          style={{ marginLeft: "5px" }}>
-          <ColorPicker
-            iconSize={18}
-            text={
-              "textColor" in props.block.props &&
-              typeof props.block.props.textColor === "string"
-                ? {
-                    color: props.block.props.textColor,
-                    setColor: (color) =>
-                      props.editor.updateBlock(props.block, {
-                        props: { textColor: color },
-                      } as PartialBlock<BSchema>),
-                  }
-                : undefined
-            }
-            background={
-              "backgroundColor" in props.block.props &&
-              typeof props.block.props.backgroundColor === "string"
-                ? {
-                    color: props.block.props.backgroundColor,
-                    setColor: (color) =>
-                      props.editor.updateBlock(props.block, {
-                        props: { backgroundColor: color },
-                      } as PartialBlock<BSchema>),
-                  }
-                : undefined
-            }
-          />
-        </Menu.Dropdown>
+          <Menu.Dropdown
+            onMouseLeave={startMenuCloseTimer}
+            onMouseOver={stopMenuCloseTimer}
+            style={{ marginLeft: "5px" }}>
+            <ColorPicker
+              iconSize={18}
+              text={
+                "textColor" in props.block.props &&
+                typeof props.block.props.textColor === "string"
+                  ? {
+                      color: props.block.props.textColor,
+                      setColor: (color) =>
+                        props.editor.updateBlock(props.block, {
+                          props: { textColor: color },
+                        } as PartialBlock<BSchema>),
+                    }
+                  : undefined
+              }
+              background={
+                "backgroundColor" in props.block.props &&
+                typeof props.block.props.backgroundColor === "string"
+                  ? {
+                      color: props.block.props.backgroundColor,
+                      setColor: (color) =>
+                        props.editor.updateBlock(props.block, {
+                          props: { backgroundColor: color },
+                        } as PartialBlock<BSchema>),
+                    }
+                  : undefined
+              }
+            />
+          </Menu.Dropdown>
         </div>
       </Menu>
     </DragHandleMenuItem>

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

@@ -1,8 +1,8 @@
-import { Menu } from "@mantine/core";
+import { Menu, MenuItemProps } from "@mantine/core";
 import { PolymorphicComponentProps } from "@mantine/utils";
 
 export const DragHandleMenuItem = (
-  props: PolymorphicComponentProps<"button">
+  props: PolymorphicComponentProps<"button"> & MenuItemProps
 ) => {
   const { children, ...remainingProps } = props;
   return <Menu.Item {...remainingProps}>{children}</Menu.Item>;

packages/website/docs/docs/side-menu.md

@@ -177,6 +177,7 @@ type SideMenuButtonProps = {
 }
 export const SideMenuButton = (props: SideMenuButtonProps) => ...;
 
-// Takes same props as `button` elements, e.g. onClick.
-export const DragHandleMenuItem = (props) => ...;
+// Contains all props that a regular button element would take, as well as all props from the Mantine `Menu.Item` component.
+type DragHandleMenuItemProps = PolymorphicComponentProps<"button"> & MenuItemProps
+export const DragHandleMenuItem = (props: DragHandleMenuItemProps) => ...;
 ```