feat: Asynchronous slash menu item fetching

examples/vanilla/src/ui/addSlashMenu.ts

@@ -2,33 +2,47 @@ import {
   BaseSlashMenuItem,
   BlockNoteEditor,
   DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
 } from "@blocknote/core";
 import { createButton } from "./util";
 
-export const addSlashMenu = (editor: BlockNoteEditor) => {
+export const addSlashMenu = async (editor: BlockNoteEditor) => {
   let element: HTMLElement;
 
-  function updateItems(
-    items: BaseSlashMenuItem<DefaultBlockSchema, any, any>[],
-    onClick: (item: BaseSlashMenuItem<DefaultBlockSchema, any, any>) => void,
-    selected: number
+  async function updateItems(
+    query: string,
+    getItems: (
+      query: string
+    ) => Promise<
+      BaseSlashMenuItem<
+        DefaultBlockSchema,
+        DefaultInlineContentSchema,
+        DefaultStyleSchema
+      >[]
+    >,
+    onClick: (
+      item: BaseSlashMenuItem<
+        DefaultBlockSchema,
+        DefaultInlineContentSchema,
+        DefaultStyleSchema
+      >
+    ) => void
   ) {
     element.innerHTML = "";
+    const items = await getItems(query);
     const domItems = items.map((val, i) => {
       const element = createButton(val.name, () => {
         onClick(val);
       });
       element.style.display = "block";
-      if (selected === i) {
-        element.style.fontWeight = "bold";
-      }
       return element;
     });
     element.append(...domItems);
     return domItems;
   }
 
-  editor.slashMenu.onUpdate((slashMenuState) => {
+  editor.slashMenu.onUpdate(async (slashMenuState) => {
     if (!element) {
       element = document.createElement("div");
       element.style.background = "gray";
@@ -41,10 +55,10 @@ export const addSlashMenu = (editor: BlockNoteEditor) => {
     }
 
     if (slashMenuState.show) {
-      updateItems(
-        slashMenuState.filteredItems,
-        editor.slashMenu.itemCallback,
-        slashMenuState.keyboardHoveredItemIndex
+      await updateItems(
+        slashMenuState.query,
+        editor.slashMenu.getItems,
+        editor.slashMenu.executeItem
       );
 
       element.style.display = "block";

packages/core/src/editor/BlockNoteEditor.ts

@@ -83,7 +83,9 @@ export type BlockNoteEditorOptions<
    *
    * @default defaultSlashMenuItems from `./extensions/SlashMenu`
    */
-  slashMenuItems: BaseSlashMenuItem<any, any, any>[];
+  slashMenuItems: (
+    query: string
+  ) => Promise<BaseSlashMenuItem<any, any, any>[]>;
 
   /**
    * The HTML element that should be used as the parent element for the editor.
@@ -290,7 +292,7 @@ export class BlockNoteEditor<
     this.slashMenu = new SlashMenuProsemirrorPlugin(
       this,
       newOptions.slashMenuItems ||
-        (getDefaultSlashMenuItems(this.blockSchema) as any)
+        ((query) => getDefaultSlashMenuItems(query, this.blockSchema) as any)
     );
     this.hyperlinkToolbar = new HyperlinkToolbarProsemirrorPlugin(this);
     this.imageToolbar = new ImageToolbarProsemirrorPlugin(this);