refactor: Mentions & custom suggestion menus

examples/editor/examples/basic/App.tsx

@@ -9,16 +9,11 @@ import {
   uploadToTmpFilesDotOrg_DEV_ONLY,
 } from "@blocknote/core";
 import {
+  BlockNoteDefaultUI,
   BlockNoteView,
   createReactInlineContentSpec,
-  DefaultSlashMenu,
-  FormattingToolbarPositioner,
-  HyperlinkToolbarPositioner,
-  ImageToolbarPositioner,
-  SideMenuPositioner,
-  SlashMenuPositioner,
-  SuggestionMenuPositioner,
-  TableHandlesPositioner,
+  DefaultPositionedSuggestionMenu,
+  SuggestionMenuItemProps,
   useBlockNote,
 } from "@blocknote/react";
 import "@blocknote/react/style.css";
@@ -53,17 +48,23 @@ const customInlineContentSchema = {
   mention: MentionInlineContent.config,
 } satisfies InlineContentSchema;
 
-async function getMentionMenuItems(query: string) {
+async function getMentionMenuItems(
+  editor: BlockNoteEditor<
+    DefaultBlockSchema,
+    typeof customInlineContentSchema,
+    DefaultStyleSchema
+  >,
+  query: string,
+  closeMenu: () => void,
+  clearQuery: () => void
+): Promise<SuggestionMenuItemProps[]> {
   const users = ["Steve", "Bob", "Joe", "Mike"];
-  const items = users.map((user) => ({
+  const items: SuggestionMenuItemProps[] = users.map((user) => ({
     name: user,
-    execute: (
-      editor: BlockNoteEditor<
-        DefaultBlockSchema,
-        typeof customInlineContentSchema,
-        DefaultStyleSchema
-      >
-    ) => {
+    execute: () => {
+      closeMenu();
+      clearQuery();
+
       editor._tiptapEditor.commands.insertContent({
         type: "mention",
         attrs: {
@@ -94,32 +95,21 @@ export function App() {
       },
     },
     uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
-    extraSuggestionMenus: [
-      {
-        name: "mentions",
-        triggerCharacter: "@",
-        getItems: getMentionMenuItems,
-      },
-    ],
   });
 
   // Give tests a way to get prosemirror instance
   (window as WindowWithProseMirror).ProseMirror = editor?._tiptapEditor;
 
+  // TODO: Figure out cleaner API for adding/changing/removing menus & toolbars
   return (
     <BlockNoteView className="root" editor={editor}>
-      <FormattingToolbarPositioner editor={editor} />
-      <HyperlinkToolbarPositioner editor={editor} />
-      <SlashMenuPositioner editor={editor} />
-      <SideMenuPositioner editor={editor} />
-      <ImageToolbarPositioner editor={editor} />
-      {editor.blockSchema.table && (
-        <TableHandlesPositioner editor={editor as any} />
-      )}
-      <SuggestionMenuPositioner
-        editor={editor as any}
-        suggestionsMenuName={"mentions"}
-        suggestionsMenuComponent={DefaultSlashMenu}
+      <BlockNoteDefaultUI editor={editor} />
+      <DefaultPositionedSuggestionMenu
+        editor={editor}
+        triggerCharacter={"@"}
+        getItems={(query, closeMenu, clearQuery) =>
+          getMentionMenuItems(editor, query, closeMenu, clearQuery)
+        }
       />
     </BlockNoteView>
   );

examples/editor/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blocknote/example-editor",
   "private": true,
-  "version": "0.11.0",
+  "version": "0.11.2",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -10,9 +10,9 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@blocknote/core": "^0.11.0",
-    "@blocknote/react": "^0.11.0",
-    "@mantine/core": "^7.3.1",
+    "@blocknote/core": "^0.11.2",
+    "@blocknote/react": "^0.11.2",
+    "@mantine/core": "^7.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.0",

examples/editor/src/main.tsx

@@ -8,13 +8,13 @@ import {
   createBrowserRouter,
 } from "react-router-dom";
 
+import "./style.css";
 import { App } from "../examples/basic/App";
 import { ReactCustomBlocks } from "../examples/react-custom-blocks/App";
 import { ReactInlineContent } from "../examples/react-custom-inline-content/App";
 import { ReactStyles } from "../examples/react-custom-styles/App";
 import { CustomBlocks } from "../examples/vanilla-custom-blocks/App";
 import { InlineContent } from "../examples/vanilla-custom-inline-content/App";
-import "./style.css";
 
 window.React = React;
 

examples/editor/src/style.css

@@ -1,6 +1,4 @@
-body {
-  height: auto;
-}
+@import url("@mantine/core/styles.css");
 
 .editor {
   margin: 8px calc((100% - 731px) / 2) 0;

examples/vanilla/package.json

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

examples/vanilla/src/ui/addSlashMenu.ts

@@ -1,39 +1,18 @@
-import {
-  BlockNoteEditor,
-  DefaultBlockSchema,
-  DefaultInlineContentSchema,
-  DefaultStyleSchema,
-  SuggestionItem,
-} from "@blocknote/core";
+import { BlockNoteEditor } from "@blocknote/core";
 import { createButton } from "./util";
 
 export const addSlashMenu = async (editor: BlockNoteEditor) => {
   let element: HTMLElement;
 
   async function updateItems(
     query: string,
-    getItems: (
-      query: string
-    ) => Promise<
-      SuggestionItem<
-        DefaultBlockSchema,
-        DefaultInlineContentSchema,
-        DefaultStyleSchema
-      >[]
-    >,
-    onClick: (
-      item: SuggestionItem<
-        DefaultBlockSchema,
-        DefaultInlineContentSchema,
-        DefaultStyleSchema
-      >
-    ) => void
+    getItems: (query: string) => Promise<any[]>
   ) {
     element.innerHTML = "";
     const items = await getItems(query);
-    const domItems = items.map((val, i) => {
-      const element = createButton(val.name, () => {
-        onClick(val);
+    const domItems = items.map((val) => {
+      const element = createButton(val.text, () => {
+        val.executeItem();
       });
       element.style.display = "block";
       return element;
@@ -42,7 +21,7 @@ export const addSlashMenu = async (editor: BlockNoteEditor) => {
     return domItems;
   }
 
-  editor.suggestionMenus.slashMenu.onUpdate(async (slashMenuState) => {
+  editor.suggestionMenus.onUpdate("slashMenu", async (slashMenuState) => {
     if (!element) {
       element = document.createElement("div");
       element.style.background = "gray";
@@ -55,11 +34,76 @@ export const addSlashMenu = async (editor: BlockNoteEditor) => {
     }
 
     if (slashMenuState.show) {
-      await updateItems(
-        slashMenuState.query,
-        editor.suggestionMenus.slashMenu.getItems,
-        editor.suggestionMenus.slashMenu.executeItem
-      );
+      // TODO: Default vanilla getItems data type?
+      const getItems = async (query: string) => {
+        const items = [
+          {
+            text: "Heading",
+            aliases: ["h", "heading1", "h1"],
+            executeItem: () => {
+              editor.suggestionMenus.closeMenu();
+              editor.suggestionMenus.clearQuery();
+
+              editor.insertBlocks(
+                [
+                  {
+                    type: "heading",
+                  },
+                ],
+                editor.getTextCursorPosition().block,
+                "after"
+              );
+            },
+          },
+          {
+            text: "List",
+            aliases: ["ul", "li", "list", "bulletlist", "bullet list"],
+            executeItem: () => {
+              editor.suggestionMenus.closeMenu();
+              editor.suggestionMenus.clearQuery();
+
+              editor.insertBlocks(
+                [
+                  {
+                    type: "bulletListItem",
+                  },
+                ],
+                editor.getTextCursorPosition().block,
+                "after"
+              );
+            },
+          },
+          {
+            text: "Paragraph",
+            aliases: ["p", "paragraph"],
+            executeItem: () => {
+              editor.suggestionMenus.closeMenu();
+              editor.suggestionMenus.clearQuery();
+
+              editor.insertBlocks(
+                [
+                  {
+                    type: "paragraph",
+                  },
+                ],
+                editor.getTextCursorPosition().block,
+                "after"
+              );
+            },
+          },
+        ];
+
+        return items.filter(
+          ({ text, aliases }) =>
+            text.toLowerCase().startsWith(query.toLowerCase()) ||
+            (aliases &&
+              aliases.filter((alias) =>
+                alias.toLowerCase().startsWith(query.toLowerCase())
+              ).length !== 0)
+        );
+      };
+
+      await updateItems(slashMenuState.query, getItems);
 
       element.style.display = "block";
 

lerna.json

@@ -2,5 +2,5 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": false,
   "useWorkspaces": true,
-  "version": "0.11.0"
+  "version": "0.11.2"
 }