Adding Block Side Menu Buttons
In this example, we replace the button to add a block in the Block Side Menu, with a button to remove the hovered block.
Try it out: Hover a block to open the Block Side Menu, and click the new button!
Relevant Docs:
import {
BlockNoteView,
DragHandleButton,
SideMenu,
SideMenuController,
useCreateBlockNote,
} from "@blocknote/react";
import "@blocknote/react/style.css";
import { RemoveBlockButton } from "./RemoveBlockButton";
export default function App() {
// Creates a new editor instance.
const editor = useCreateBlockNote({
initialContent: [
{
type: "paragraph",
content: "Welcome to this demo!",
},
{
type: "paragraph",
content: "<- Notice the new button in the side menu",
},
{
type: "paragraph",
content: "Click it to remove the hovered block",
},
{
type: "paragraph",
},
],
});
// Renders the editor instance.
return (
<BlockNoteView editor={editor} sideMenu={false}>
<SideMenuController
sideMenu={(props) => (
<SideMenu {...props}>
{/* Button which removes the hovered block. */}
<RemoveBlockButton {...props} />
<DragHandleButton {...props} />
</SideMenu>
)}
/>
</BlockNoteView>
);
}