Custom Search for Slash Menu

examples/editor/examples/basic/App.tsx

@@ -1,17 +1,36 @@
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
+import {
+  BaseSlashMenuItem,
+  SlashMenuQuery,
+  uploadToTmpFilesDotOrg_DEV_ONLY,
+} from "@blocknote/core";
 import "@blocknote/core/style.css";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
+export class CustomQueryManager extends SlashMenuQuery<
+  any,
+  any,
+  any,
+  BaseSlashMenuItem<any, any, any>
+> {
+  async query(q: string, items: any[]) {
+    return items.filter((item) => item.name.includes(q));
+  }
 
+  async execute({ item, editor }: { item: any; editor: any }) {
+    return item.execute(editor);
+  }
+}
 export function App() {
+  console.log("App");
   const editor = useBlockNote({
     domAttributes: {
       editor: {
         class: "editor",
         "data-test": "editor",
       },
     },
+    slashMenuQueryManager: new CustomQueryManager(),
     uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
   });
 

examples/editor/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blocknote/example-editor",
   "private": true,
-  "version": "0.10.1",
+  "version": "0.10.2-slash-menu",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -10,8 +10,8 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@blocknote/core": "^0.10.1",
-    "@blocknote/react": "^0.10.1",
+    "@blocknote/core": "^0.10.2-slash-menu",
+    "@blocknote/react": "^0.10.2-slash-menu",
     "@mantine/core": "^5.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/vanilla/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@blocknote/example-vanilla",
   "private": true,
-  "version": "0.10.1",
+  "version": "0.10.2-slash-menu",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint src --max-warnings 0"
   },
   "dependencies": {
-    "@blocknote/core": "^0.10.1"
+    "@blocknote/core": "^0.10.2-slash-menu"
   },
   "devDependencies": {
     "eslint": "^8.10.0",

lerna.json

@@ -2,5 +2,5 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": false,
   "useWorkspaces": true,
-  "version": "0.10.1"
+  "version": "0.10.2-slash-menu"
 }

package.json

@@ -7,14 +7,14 @@
     "tests"
   ],
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "^5.5.0",
     "eslint": "^8.22.0",
-    "eslint-plugin-import": "^2.28.0",
     "eslint-config-react-app": "^7.0.0",
+    "eslint-plugin-import": "^2.28.0",
     "lerna": "^5.4.0",
     "patch-package": "^6.4.7",
-    "typescript": "^5.2.2",
-    "@typescript-eslint/parser": "^5.5.0",
-    "@typescript-eslint/eslint-plugin": "^5.5.0"
+    "typescript": "^5.2.2"
   },
   "scripts": {
     "start": "lerna run --stream --scope @blocknote/example-editor dev",

packages/core/.gitignore

@@ -8,8 +8,8 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-dist
-dist-ssr
+# dist
+# dist-ssr
 *.local
 
 # Editor directories and files

packages/core/package.json

@@ -3,7 +3,7 @@
   "homepage": "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/TypeCellOS/BlockNote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.10.1",
+  "version": "0.10.2-slash-menu",
   "files": [
     "dist",
     "types",
@@ -115,5 +115,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "37614ab348dcc7faa830a9a88437b37197a2162d"
+  "gitHead": "d082035d3c6253ccbc74fe8a8454518f1a02d5e9"
 }

packages/core/src/editor/BlockNoteEditor.ts

@@ -33,7 +33,10 @@ import { HyperlinkToolbarProsemirrorPlugin } from "../extensions/HyperlinkToolba
 import { ImageToolbarProsemirrorPlugin } from "../extensions/ImageToolbar/ImageToolbarPlugin";
 import { SideMenuProsemirrorPlugin } from "../extensions/SideMenu/SideMenuPlugin";
 import { BaseSlashMenuItem } from "../extensions/SlashMenu/BaseSlashMenuItem";
-import { SlashMenuProsemirrorPlugin } from "../extensions/SlashMenu/SlashMenuPlugin";
+import {
+  SlashMenuProsemirrorPlugin,
+  SlashMenuQuery,
+} from "../extensions/SlashMenu/SlashMenuPlugin";
 import { getDefaultSlashMenuItems } from "../extensions/SlashMenu/defaultSlashMenuItems";
 import { TableHandlesProsemirrorPlugin } from "../extensions/TableHandles/TableHandlesPlugin";
 import { UniqueID } from "../extensions/UniqueID/UniqueID";
@@ -85,6 +88,30 @@ export type BlockNoteEditorOptions<
    */
   slashMenuItems: BaseSlashMenuItem<any, any, any>[];
 
+  /**
+   *  A query manager that handles the slash menu.
+   *  @default new SlashMenuQuery()
+   *  @example
+   *    ```
+   *      class SlashMenuFetchQuery extends SlashMenuQuery<any, any, any, any> {
+   *          async query(q: string, items: SlashMenuItem[]): SlashMenuItem[] {
+g   *            return []
+   *          }
+   * 
+   *          async execute({
+   *              item,
+   *              editor,
+   *          }: {
+   *             item: SlashMenuItem;
+   *            editor: BlockNoteEditor<BSchema, I, S>;
+   *         }) {
+   *           return item.execute(editor);
+   *        }
+   *      }
+   *  
+   */
+  slashMenuQueryManager?: SlashMenuQuery<any, any, any, any>;
+
   /**
    * The HTML element that should be used as the parent element for the editor.
    *
@@ -226,6 +253,12 @@ export class BlockNoteEditor<
     SSchema,
     any
   >;
+  // public readonly slashMenuQueryManager: SlashMenuQuery<
+  //   BSchema,
+  //   ISchema,
+  //   SSchema,
+  //   any
+  // >;
   public readonly hyperlinkToolbar: HyperlinkToolbarProsemirrorPlugin<
     BSchema,
     ISchema,
@@ -290,7 +323,8 @@ export class BlockNoteEditor<
     this.slashMenu = new SlashMenuProsemirrorPlugin(
       this,
       newOptions.slashMenuItems ||
-        (getDefaultSlashMenuItems(this.blockSchema) as any)
+        (getDefaultSlashMenuItems(this.blockSchema) as any),
+      newOptions.slashMenuQueryManager
     );
     this.hyperlinkToolbar = new HyperlinkToolbarProsemirrorPlugin(this);
     this.imageToolbar = new ImageToolbarProsemirrorPlugin(this);