Using Custom DragHandleMenu and SideMenu at the same time but didn't show custom DragHandleMenu

[julzheng]

Describe the bug I tried to use custom SideMenu and DragHandleMenu together, but the custom DragHandleMenu didn't show

To Reproduce Just try to mix/use both example from docs that is custom SideMenu and custom DraghandleMenu

<BlockNoteView editor={editor} formattingToolbar={false} linkToolbar={false} imageToolbar={false} sideMenu={false} slashMenu={false} tableHandles={false}> <SideMenuController sideMenu={(props) => ( <SideMenu {...props} dragHandleMenu={(props) => ( <DragHandleMenu {...props}> <DragHandleMenuItem onClick={() => { editor.updateBlock(props.block, { type: 'paragraph' }); }}> Reset Type </DragHandleMenuItem> </DragHandleMenu> )}> <RemoveBlockButton {...props} /> <DragHandleButton {...props} /> </SideMenu> )} /> </BlockNoteView>

Misc

• Node version: 21.6.2
• Package manager: 10.2.4
• Vite: 5.1.4
• Blocknote: 0.12.4

[YousefED]

Interesting. Could you add a stackblitz / codesandbox for this?

[julzheng]

Interesting. Could you add a stackblitz / codesandbox for this?

https://stackblitz.com/edit/bn-custom-dhm-sm?file=src%2FApp.tsx

[YousefED]

The issue was that the DragHandleMenu had to be set on the DragHandleButton. A todo about this is noted here: https://github.com/TypeCellOS/BlockNote/blob/bea361e39846c26d9729a777a5cd3de1f48e8c3e/packages/react/src/components/SideMenu/SideMenu.tsx#L16

Here's a fix on the latest version of BlockNote: https://stackblitz.com/edit/bn-custom-dhm-sm-eirhtu?file=package.json,src%2FApp.tsx,src%2FRemoveBlockButton.tsx