From 818e36ff518b0596f1290bc1b171dafb56bdfa1d Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Tue, 22 Apr 2025 16:21:14 +0200
Subject: [PATCH] Updated custom drag handle menu example

---
 .../05-side-menu-drag-handle-items/App.tsx    | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/examples/03-ui-components/05-side-menu-drag-handle-items/App.tsx b/examples/03-ui-components/05-side-menu-drag-handle-items/App.tsx
index a923e77c64..d469349206 100644
--- a/examples/03-ui-components/05-side-menu-drag-handle-items/App.tsx
+++ b/examples/03-ui-components/05-side-menu-drag-handle-items/App.tsx
@@ -4,6 +4,7 @@ import "@blocknote/mantine/style.css";
 import {
   BlockColorsItem,
   DragHandleMenu,
+  DragHandleMenuProps,
   RemoveBlockItem,
   SideMenu,
   SideMenuController,
@@ -12,6 +13,18 @@ import {
 
 import { ResetBlockTypeItem } from "./ResetBlockTypeItem.js";
 
+// To avoid rendering issues, it's good practice to define your custom drag
+// handle menu in a separate component, instead of inline within the `sideMenu`
+// prop of `SideMenuController`.
+const CustomDragHandleMenu = (props: DragHandleMenuProps) => (
+  <DragHandleMenu {...props}>
+    <RemoveBlockItem {...props}>Delete</RemoveBlockItem>
+    <BlockColorsItem {...props}>Colors</BlockColorsItem>
+    {/* Item which resets the hovered block's type. */}
+    <ResetBlockTypeItem {...props}>Reset Type</ResetBlockTypeItem>
+  </DragHandleMenu>
+);
+
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
@@ -40,17 +53,7 @@ export default function App() {
     <BlockNoteView editor={editor} sideMenu={false}>
       <SideMenuController
         sideMenu={(props) => (
-          <SideMenu
-            {...props}
-            dragHandleMenu={(props) => (
-              <DragHandleMenu {...props}>
-                <RemoveBlockItem {...props}>Delete</RemoveBlockItem>
-                <BlockColorsItem {...props}>Colors</BlockColorsItem>
-                {/* Item which resets the hovered block's type. */}
-                <ResetBlockTypeItem {...props}>Reset Type</ResetBlockTypeItem>
-              </DragHandleMenu>
-            )}
-          />
+          <SideMenu {...props} dragHandleMenu={CustomDragHandleMenu} />
         )}
       />
     </BlockNoteView>