Slash Menu Grouping & Ordering

import { BlockNoteEditor } from "@blocknote/core";import { filterSuggestionItems } 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";// Returns the default Slash Menu items, keeping only the "Basic blocks" and// "Headings" groups, with "Basic blocks" listed before "Headings".const getCustomSlashMenuItems = (  editor: BlockNoteEditor,): DefaultReactSuggestionItem[] => {  const defaultItems = getDefaultReactSlashMenuItems(editor);  const basicBlocks = defaultItems.filter(    (item) => item.group === "Basic blocks",  );  const headings = defaultItems.filter((item) => item.group === "Headings");  return [...basicBlocks, ...headings];};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 that only 'Basic blocks' and 'Headings' are shown, in that order",      },      {        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>  );}