Skip to content

Commit 0fb6323

Browse files
docs: updated custom drag handle menu example (#1628)
1 parent 5aed7e9 commit 0fb6323

File tree

1 file changed

+14
-11
lines changed
  • examples/03-ui-components/05-side-menu-drag-handle-items

1 file changed

+14
-11
lines changed

examples/03-ui-components/05-side-menu-drag-handle-items/App.tsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import "@blocknote/mantine/style.css";
44
import {
55
BlockColorsItem,
66
DragHandleMenu,
7+
DragHandleMenuProps,
78
RemoveBlockItem,
89
SideMenu,
910
SideMenuController,
@@ -12,6 +13,18 @@ import {
1213

1314
import { ResetBlockTypeItem } from "./ResetBlockTypeItem.js";
1415

16+
// To avoid rendering issues, it's good practice to define your custom drag
17+
// handle menu in a separate component, instead of inline within the `sideMenu`
18+
// prop of `SideMenuController`.
19+
const CustomDragHandleMenu = (props: DragHandleMenuProps) => (
20+
<DragHandleMenu {...props}>
21+
<RemoveBlockItem {...props}>Delete</RemoveBlockItem>
22+
<BlockColorsItem {...props}>Colors</BlockColorsItem>
23+
{/* Item which resets the hovered block's type. */}
24+
<ResetBlockTypeItem {...props}>Reset Type</ResetBlockTypeItem>
25+
</DragHandleMenu>
26+
);
27+
1528
export default function App() {
1629
// Creates a new editor instance.
1730
const editor = useCreateBlockNote({
@@ -40,17 +53,7 @@ export default function App() {
4053
<BlockNoteView editor={editor} sideMenu={false}>
4154
<SideMenuController
4255
sideMenu={(props) => (
43-
<SideMenu
44-
{...props}
45-
dragHandleMenu={(props) => (
46-
<DragHandleMenu {...props}>
47-
<RemoveBlockItem {...props}>Delete</RemoveBlockItem>
48-
<BlockColorsItem {...props}>Colors</BlockColorsItem>
49-
{/* Item which resets the hovered block's type. */}
50-
<ResetBlockTypeItem {...props}>Reset Type</ResetBlockTypeItem>
51-
</DragHandleMenu>
52-
)}
53-
/>
56+
<SideMenu {...props} dragHandleMenu={CustomDragHandleMenu} />
5457
)}
5558
/>
5659
</BlockNoteView>

0 commit comments

Comments
 (0)