feat: Mentions & custom suggestion menus

examples/02-ui-components/custom-ui/ColorMenu.tsx

@@ -18,7 +18,7 @@ export const colors = [
 
 // Formatting Toolbar sub menu for changing text and background color
 export const ColorMenu = (
-  props: FormattingToolbarProps & HTMLAttributes<HTMLDivElement>
+  props: FormattingToolbarProps<any> & HTMLAttributes<HTMLDivElement>
 ) => {
   const { editor, className, ...rest } = props;
 

examples/02-ui-components/custom-ui/CustomFormattingToolbar.tsx

@@ -30,7 +30,7 @@ type CustomFormattingToolbarState = {
   backgroundColor: string;
 };
 
-export const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
+export const CustomFormattingToolbar = (props: FormattingToolbarProps<any>) => {
   // Function to get the state of toolbar buttons (active/inactive)
   const getState = (): CustomFormattingToolbarState => {
     const block = props.editor.getTextCursorPosition().block;

examples/02-ui-components/custom-ui/CustomSideMenu.tsx

@@ -1,9 +1,9 @@
 import { BlockNoteEditor } from "@blocknote/core";
-import { SideMenuPositioner } from "@blocknote/react";
+import { DefaultPositionedSideMenu } from "@blocknote/react";
 import { RxDragHandleHorizontal } from "react-icons/rx";
 
 export const CustomSideMenu = (props: { editor: BlockNoteEditor }) => (
-  <SideMenuPositioner
+  <DefaultPositionedSideMenu
     editor={props.editor}
     sideMenu={(props) => (
       // Side menu consists of only a drag handle

examples/02-ui-components/custom-ui/CustomSlashMenu.tsx

@@ -1,83 +1,84 @@
 import { BlockNoteEditor } from "@blocknote/core";
-import { ReactSlashMenuItem, SlashMenuPositioner } from "@blocknote/react";
-import {
-  RiH1,
-  RiH2,
-  RiH3,
-  RiListOrdered,
-  RiListUnordered,
-  RiText,
-} from "react-icons/ri";
+// import { ReactSlashMenuItem, SlashMenuPositioner } from "@blocknote/react";
+// import {
+//   RiH1,
+//   RiH2,
+//   RiH3,
+//   RiListOrdered,
+//   RiListUnordered,
+//   RiText,
+// } from "react-icons/ri";
 
 // Icons for slash menu items
-const icons = {
-  Paragraph: RiText,
-  Heading: RiH1,
-  "Heading 2": RiH2,
-  "Heading 3": RiH3,
-  "Numbered List": RiListOrdered,
-  "Bullet List": RiListUnordered,
-};
+// const icons = {
+//   Paragraph: RiText,
+//   Heading: RiH1,
+//   "Heading 2": RiH2,
+//   "Heading 3": RiH3,
+//   "Numbered List": RiListOrdered,
+//   "Bullet List": RiListUnordered,
+// };
 
 export const CustomSlashMenu = (props: { editor: BlockNoteEditor }) => {
   const editor = props.editor;
 
-  return (
-    <SlashMenuPositioner
-      editor={editor}
-      slashMenu={(props) => {
-        // Sorts items by group
-        const groups: Record<string, ReactSlashMenuItem[]> = {};
-        for (const item of props.filteredItems) {
-          if (!groups[item.group]) {
-            groups[item.group] = [];
-          }
+  return <div>TODO</div>;
+  // TODO
+  // <SlashMenuPositioner
+  //   editor={editor}
+  //   slashMenu={(props) => {
+  //     // Sorts items by group
+  //     const groups: Record<string, ReactSlashMenuItem[]> = {};
+  //     for (const item of props.filteredItems) {
+  //       if (!groups[item.group]) {
+  //         groups[item.group] = [];
+  //       }
 
-          groups[item.group].push(item);
-        }
+  //       groups[item.group].push(item);
+  //     }
 
-        // If query matches no items, show "No matches" message
-        if (props.filteredItems.length === 0) {
-          return <div className={"slash-menu"}>No matches</div>;
-        }
+  //     // If query matches no items, show "No matches" message
+  //     if (props.filteredItems.length === 0) {
+  //       return <div className={"slash-menu"}>No matches</div>;
+  //     }
 
-        return (
-          <div className={"slash-menu"}>
-            {Object.entries(groups).map(([group, items]) => (
-              // Component for each group
-              <div key={group} className={"slash-menu-group"}>
-                {/*Group label*/}
-                <div className={"slash-menu-label"}>{group}</div>
-                {/*Group items*/}
-                <div className={"slash-menu-item-group"}>
-                  {items.map((item) => {
-                    const Icon =
-                      item.name in icons
-                        ? icons[item.name as keyof typeof icons]
-                        : "div";
-                    return (
-                      <button
-                        key={item.name}
-                        className={`slash-menu-item${
-                          props.filteredItems.indexOf(item) ===
-                          props.keyboardHoveredItemIndex
-                            ? " active"
-                            : ""
-                        }`}
-                        onClick={() => {
-                          item.execute(editor);
-                          editor.focus();
-                        }}>
-                        <Icon />
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-            ))}
-          </div>
-        );
-      }}
-    />
-  );
+  //     return (
+  //       <div className={"slash-menu"}>
+  //         {Object.entries(groups).map(([group, items]) => (
+  //           // Component for each group
+  //           <div key={group} className={"slash-menu-group"}>
+  //             {/*Group label*/}
+  //             <div className={"slash-menu-label"}>{group}</div>
+  //             {/*Group items*/}
+  //             <div className={"slash-menu-item-group"}>
+  //               {items.map((item) => {
+  //                 const Icon =
+  //                   item.name in icons
+  //                     ? icons[item.name as keyof typeof icons]
+  //                     : "div";
+  //                 return (
+  //                   <button
+  //                     key={item.name}
+  //                     className={`slash-menu-item${
+  //                       props.filteredItems.indexOf(item) ===
+  //                       props.keyboardHoveredItemIndex
+  //                         ? " active"
+  //                         : ""
+  //                     }`}
+  //                     onClick={() => {
+  //                       item.execute(editor);
+  //                       editor.focus();
+  //                     }}>
+  //                     <Icon />
+  //                   </button>
+  //                 );
+  //               })}
+  //             </div>
+  //           </div>
+  //         ))}
+  //       </div>
+  //     );
+  //   }}
+  // />
+  // );
 };

examples/02-ui-components/custom-ui/LinkMenu.tsx

@@ -3,7 +3,7 @@ import { HTMLAttributes, useState } from "react";
 
 // Formatting Toolbar sub menu for creating links
 export const LinkMenu = (
-  props: FormattingToolbarProps & HTMLAttributes<HTMLDivElement>
+  props: FormattingToolbarProps<any> & HTMLAttributes<HTMLDivElement>
 ) => {
   const { editor, className, ...rest } = props;
 

examples/02-ui-components/formatting-toolbar-buttons/App.tsx

@@ -1,28 +1,10 @@
-import {
-  BlockNoteView,
-  FormattingToolbarPositioner,
-  HyperlinkToolbarPositioner,
-  SideMenuPositioner,
-  SlashMenuPositioner,
-  useBlockNote,
-} from "@blocknote/react";
+import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
-import { CustomFormattingToolbar } from "./CustomFormattingToolbar";
 
 export default function App() {
   // Creates a new editor instance.
   const editor = useBlockNote();
 
   // Renders the editor instance.
-  return (
-    <BlockNoteView editor={editor}>
-      <FormattingToolbarPositioner
-        editor={editor}
-        formattingToolbar={CustomFormattingToolbar}
-      />
-      <HyperlinkToolbarPositioner editor={editor} />
-      <SlashMenuPositioner editor={editor} />
-      <SideMenuPositioner editor={editor} />
-    </BlockNoteView>
-  );
+  return <BlockNoteView editor={editor}>{/* TODO */}</BlockNoteView>;
 }

examples/02-ui-components/formatting-toolbar-buttons/CustomFormattingToolbar.tsx

@@ -13,7 +13,7 @@ import {
 } from "@blocknote/react";
 import { CustomButton } from "./CustomButton";
 
-export function CustomFormattingToolbar(props: FormattingToolbarProps) {
+export function CustomFormattingToolbar(props: FormattingToolbarProps<any>) {
   return (
     <Toolbar>
       <BlockTypeDropdown {...props} />

examples/02-ui-components/side-menu-buttons/App.tsx

@@ -1,26 +1,18 @@
-import {
-  BlockNoteView,
-  FormattingToolbarPositioner,
-  HyperlinkToolbarPositioner,
-  SideMenuPositioner,
-  SlashMenuPositioner,
-  useBlockNote,
-} from "@blocknote/react";
+import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
-import { CustomSideMenu } from "./CustomSideMenu";
-
 export default function App() {
   // Creates a new editor instance.
   const editor = useBlockNote();
 
   // Renders the editor instance.
   return (
     <BlockNoteView editor={editor}>
+      {/* TODO
       <FormattingToolbarPositioner editor={editor} />
       <HyperlinkToolbarPositioner editor={editor} />
       <SlashMenuPositioner editor={editor} />
-      <SideMenuPositioner editor={editor} sideMenu={CustomSideMenu} />
+      <SideMenuPositioner editor={editor} sideMenu={CustomSideMenu} /> */}
     </BlockNoteView>
   );
 }

examples/02-ui-components/side-menu-drag-handle-items/App.tsx

@@ -1,32 +1,23 @@
-import {
-  BlockNoteView,
-  DefaultSideMenu,
-  FormattingToolbarPositioner,
-  HyperlinkToolbarPositioner,
-  SideMenuPositioner,
-  SlashMenuPositioner,
-  useBlockNote,
-} from "@blocknote/react";
+import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
-import { CustomDragHandleMenu } from "./CustomDragHandleMenu";
-
 export default function App() {
   // Creates a new editor instance.
   const editor = useBlockNote();
 
   // Renders the editor instance.
   return (
     <BlockNoteView editor={editor}>
-      <FormattingToolbarPositioner editor={editor} />
+      {/* TODO */}
+      {/* <FormattingToolbarPositioner editor={editor} />
       <HyperlinkToolbarPositioner editor={editor} />
       <SlashMenuPositioner editor={editor} />
       <SideMenuPositioner
         editor={editor}
         sideMenu={(props) => (
           <DefaultSideMenu {...props} dragHandleMenu={CustomDragHandleMenu} />
-        )}
-      />
+        )} */}
+      {/* /> */}
     </BlockNoteView>
   );
 }

examples/02-ui-components/slash-menu-items/App.tsx

@@ -1,12 +1,12 @@
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
-import { customSlashMenuItems } from "./CustomSlashMenuItems";
+// import { customSlashMenuItems } from "./CustomSlashMenuItems";
 
 export default function App() {
   // Creates a new editor instance.
   const editor = useBlockNote({
-    slashMenuItems: customSlashMenuItems,
+    // slashMenuItems: customSlashMenuItems, TODO
   });
 
   // Renders the editor instance.

examples/02-ui-components/ui-elements-remove/App.tsx

@@ -1,9 +1,9 @@
 import {
   BlockNoteView,
-  FormattingToolbarPositioner,
-  HyperlinkToolbarPositioner,
-  ImageToolbarPositioner,
-  SlashMenuPositioner,
+  // FormattingToolbarPositioner,
+  // HyperlinkToolbarPositioner,
+  // ImageToolbarPositioner,
+  // SlashMenuPositioner,
   useBlockNote,
 } from "@blocknote/react";
 import "@blocknote/react/style.css";
@@ -15,10 +15,11 @@ export default function App() {
   // Renders the editor instance.
   return (
     <BlockNoteView editor={editor}>
+      {/* TODO
       <FormattingToolbarPositioner editor={editor} />
       <HyperlinkToolbarPositioner editor={editor} />
       <SlashMenuPositioner editor={editor} />
-      <ImageToolbarPositioner editor={editor} />
+      <ImageToolbarPositioner editor={editor} /> */}
     </BlockNoteView>
   );
 }

examples/02-ui-components/ui-elements-replace/App.tsx

@@ -1,12 +1,4 @@
-import {
-  BlockNoteView,
-  FormattingToolbarPositioner,
-  HyperlinkToolbarPositioner,
-  ImageToolbarPositioner,
-  SideMenuPositioner,
-  SlashMenuPositioner,
-  useBlockNote,
-} from "@blocknote/react";
+import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 export default function App() {
@@ -16,14 +8,15 @@ export default function App() {
   // Renders the editor instance.
   return (
     <BlockNoteView editor={editor}>
-      <FormattingToolbarPositioner editor={editor} />
+      {/* TODO */}
+      {/* <FormattingToolbarPositioner editor={editor} />
       <HyperlinkToolbarPositioner editor={editor} />
       <SlashMenuPositioner editor={editor} />
       <SideMenuPositioner
         editor={editor}
         sideMenu={() => <div className={"sideMenu"}>Side Menu</div>}
       />
-      <ImageToolbarPositioner editor={editor} />
+      <ImageToolbarPositioner editor={editor} /> */}
     </BlockNoteView>
   );
 }