docs: updated custom drag handle menu example (#1628)

Author: matthewlipski

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>