Adding Slash Menu Items
In this example, we add an item to the Slash Menu, which adds a new block below with a bold "Hello World" string.
Try it out: Press the "/" key to open the Slash Menu and select the new item!
Relevant Docs:
import { BlockNoteEditor } from "@blocknote/core";import { filterSuggestionItems, insertOrUpdateBlockForSlashMenu,} from "@blocknote/core/extensions";import "@blocknote/core/fonts/inter.css";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import { DefaultReactSuggestionItem, getDefaultReactSlashMenuItems, SuggestionMenuController, useCreateBlockNote,} from "@blocknote/react";import { HiOutlineGlobeAlt } from "react-icons/hi";// Custom Slash Menu item to insert a block after the current one.const insertHelloWorldItem = (editor: BlockNoteEditor) => ({ title: "Insert Hello World", onItemClick: () => // If the block containing the text caret is empty, `insertOrUpdateBlock` // changes its type to the provided block. Otherwise, it inserts the new // block below and moves the text caret to it. We use this function with // a block containing 'Hello World' in bold. insertOrUpdateBlockForSlashMenu(editor, { type: "paragraph", content: [{ type: "text", text: "Hello World", styles: { bold: true } }], }), aliases: ["helloworld", "hw"], group: "Other", icon: <HiOutlineGlobeAlt size={18} />, subtext: "Used to insert a block with 'Hello World' below.",});// List containing all default Slash Menu Items, as well as our custom one.const getCustomSlashMenuItems = ( editor: BlockNoteEditor,): DefaultReactSuggestionItem[] => [ ...getDefaultReactSlashMenuItems(editor), insertHelloWorldItem(editor),];export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ initialContent: [ { type: "paragraph", content: "Welcome to this demo!", }, { type: "paragraph", content: "Press the '/' key to open the Slash Menu", }, { type: "paragraph", content: "Notice the new 'Insert Hello World' item - try it out!", }, { type: "paragraph", }, ], }); // Renders the editor instance. return ( <BlockNoteView editor={editor} slashMenu={false}> <SuggestionMenuController triggerCharacter={"/"} // Replaces the default Slash Menu items with our custom ones. getItems={async (query) => filterSuggestionItems(getCustomSlashMenuItems(editor), query) } /> </BlockNoteView> );}