@@ -4,6 +4,7 @@ import "@blocknote/mantine/style.css";
4
4
import {
5
5
BlockColorsItem ,
6
6
DragHandleMenu ,
7
+ DragHandleMenuProps ,
7
8
RemoveBlockItem ,
8
9
SideMenu ,
9
10
SideMenuController ,
@@ -12,6 +13,18 @@ import {
12
13
13
14
import { ResetBlockTypeItem } from "./ResetBlockTypeItem.js" ;
14
15
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
+
15
28
export default function App ( ) {
16
29
// Creates a new editor instance.
17
30
const editor = useCreateBlockNote ( {
@@ -40,17 +53,7 @@ export default function App() {
40
53
< BlockNoteView editor = { editor } sideMenu = { false } >
41
54
< SideMenuController
42
55
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 } />
54
57
) }
55
58
/>
56
59
</ BlockNoteView >
0 commit comments