suggestion

examples/02-ui-components/formatting-toolbar-block-type-items/App.tsx

@@ -7,8 +7,8 @@ import {
   useBlockNote,
 } from "@blocknote/react";
 import "@blocknote/react/style.css";
+import { RiImage2Fill } from "react-icons/ri";
 
-// TODO: Fix
 export default function App() {
   // Creates a new editor instance.
   const editor = useBlockNote();
@@ -19,7 +19,7 @@ export default function App() {
       <FormattingToolbarController
         formattingToolbar={() => (
           <FormattingToolbar
-            blockTypeDropdownItems={() => [
+            blockTypeDropdownItems={[
               ...blockTypeDropdownItems,
               {
                 name: "Specific Image",

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

@@ -3,19 +3,19 @@ import {
   BlockTypeDropdown,
   ColorStyleButton,
   CreateLinkButton,
+  FormattingToolbar,
   ImageCaptionButton,
   NestBlockButton,
   ReplaceImageButton,
   TextAlignButton,
-  ToolbarWrapper,
   UnnestBlockButton,
 } from "@blocknote/react";
 
 import { CustomButton } from "./CustomButton";
 
 export function CustomFormattingToolbar() {
   return (
-    <ToolbarWrapper>
+    <FormattingToolbar>
       <BlockTypeDropdown key={"blockTypeDropdown"} />
 
       <CustomButton key={"customButton"} />
@@ -48,6 +48,6 @@ export function CustomFormattingToolbar() {
       <UnnestBlockButton key={"unnestBlockButton"} />
 
       <CreateLinkButton key={"createLinkButton"} />
-    </ToolbarWrapper>
+    </FormattingToolbar>
   );
 }

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

@@ -1,13 +1,17 @@
-import { DragHandle, SideMenuProps, SideMenuWrapper } from "@blocknote/react";
+import {
+  DragHandle,
+  SideMenu,
+  SideMenuProps,
+} from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 import { CustomButton } from "./CustomButton";
 
 export function CustomSideMenu(props: SideMenuProps) {
   return (
-    <SideMenuWrapper>
+    <SideMenu {...props}>
       <CustomButton {...props} />
       <DragHandle {...props} />
-    </SideMenuWrapper>
+    </SideMenu>
   );
 }

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

@@ -1,21 +1,21 @@
 import {
   BlockColorsButton,
+  DragHandleMenu,
   DragHandleMenuItem,
   DragHandleMenuProps,
-  DragHandleMenuWrapper,
   RemoveBlockButton,
 } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 export function CustomDragHandleMenu(props: DragHandleMenuProps) {
   return (
-    <DragHandleMenuWrapper {...props}>
+    <DragHandleMenu {...props}>
       <RemoveBlockButton {...props}>Delete</RemoveBlockButton>
       <BlockColorsButton {...props}>Colors</BlockColorsButton>
       {/*Custom item which opens an alert when clicked.*/}
       <DragHandleMenuItem onClick={() => window.alert("Button Pressed!")}>
         Open Alert
       </DragHandleMenuItem>
-    </DragHandleMenuWrapper>
+    </DragHandleMenu>
   );
 }

examples/06-custom-schema/react-custom-styles/App.tsx

@@ -7,10 +7,10 @@ import {
 } from "@blocknote/core";
 import {
   BlockNoteView,
+  FormattingToolbar,
   FormattingToolbarController,
   FormattingToolbarProps,
   ToolbarButton,
-  ToolbarWrapper,
   createReactStyleSpec,
   useActiveStyles,
   useBlockNote,
@@ -62,7 +62,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
   const activeStyles = useActiveStyles(editor);
 
   return (
-    <ToolbarWrapper>
+    <FormattingToolbar>
       <ToolbarButton
         mainTooltip={"small"}
         onClick={() => {
@@ -83,7 +83,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
         isSelected={!!activeStyles.fontSize}>
         Font size
       </ToolbarButton>
-    </ToolbarWrapper>
+    </FormattingToolbar>
   );
 };
 

examples/09-vanilla-js/react-vanilla-custom-styles/App.tsx

@@ -7,10 +7,10 @@ import {
 } from "@blocknote/core";
 import {
   BlockNoteView,
+  FormattingToolbar,
   FormattingToolbarController,
   FormattingToolbarProps,
   ToolbarButton,
-  ToolbarWrapper,
   useActiveStyles,
   useBlockNote,
   useBlockNoteEditor,
@@ -67,7 +67,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
   const activeStyles = useActiveStyles(editor);
 
   return (
-    <ToolbarWrapper>
+    <FormattingToolbar>
       <ToolbarButton
         mainTooltip={"small"}
         onClick={() => {
@@ -88,7 +88,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
         isSelected={!!activeStyles.fontSize}>
         Font size
       </ToolbarButton>
-    </ToolbarWrapper>
+    </FormattingToolbar>
   );
 };
 

packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts

@@ -1,3 +1,5 @@
+import { BlockTypeDropdownItem } from "./mantine/DefaultDropdowns/BlockTypeDropdown";
+
 export type FormattingToolbarProps = {
-  items?: JSX.Element[];
+  blockTypeDropdownItems?: BlockTypeDropdownItem[];
 };

packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx

@@ -18,7 +18,7 @@ import { IconType } from "react-icons";
 import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
 import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
-import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 
 type BasicTextStyle = "bold" | "italic" | "underline" | "strike" | "code";
 

packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx

@@ -11,9 +11,9 @@ import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
 import { usePreventMenuOverflow } from "../../../../hooks/usePreventMenuOverflow";
 import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
-import { ColorIcon } from "../../../../components-shared/ColorPicker/ColorIcon";
-import { ColorPicker } from "../../../../components-shared/ColorPicker/ColorPicker";
-import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton";
+import { ColorIcon } from "../../../mantine-shared/ColorPicker/ColorIcon";
+import { ColorPicker } from "../../../mantine-shared/ColorPicker/ColorPicker";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 
 function checkColorInSchema<Color extends "text" | "background">(
   color: Color,

packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx

@@ -11,8 +11,8 @@ import {
 import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
 import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
-import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton";
-import { ToolbarInputDropdownButton } from "../../../../components-shared/Toolbar/ToolbarInputDropdownButton";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
+import { ToolbarInputDropdownButton } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownButton";
 import { EditHyperlinkMenu } from "../../../HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu";
 
 // TODO: Make sure Link is in inline content schema

packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx

@@ -14,10 +14,10 @@ import {
 } from "react";
 import { RiText } from "react-icons/ri";
 
-import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton";
-import { ToolbarInputDropdown } from "../../../../components-shared/Toolbar/ToolbarInputDropdown";
-import { ToolbarInputDropdownButton } from "../../../../components-shared/Toolbar/ToolbarInputDropdownButton";
-import { ToolbarInputDropdownItem } from "../../../../components-shared/Toolbar/ToolbarInputDropdownItem";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
+import { ToolbarInputDropdown } from "../../../mantine-shared/Toolbar/ToolbarInputDropdown";
+import { ToolbarInputDropdownButton } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownButton";
+import { ToolbarInputDropdownItem } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownItem";
 import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
 

packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons.tsx

@@ -9,7 +9,7 @@ import { RiIndentDecrease, RiIndentIncrease } from "react-icons/ri";
 
 import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
-import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 
 export const NestBlockButton = () => {
   const editor = useBlockNoteEditor<

packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx

@@ -10,7 +10,7 @@ import { RiImageEditFill } from "react-icons/ri";
 
 import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
-import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 import { ImageToolbar } from "../../../ImageToolbar/mantine/ImageToolbar";
 
 export const ReplaceImageButton = () => {

packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx

@@ -17,7 +17,7 @@ import {
 
 import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
-import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 
 type TextAlignment = DefaultProps["textAlignment"];
 

packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx

@@ -18,8 +18,8 @@ import {
 import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
 import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
-import { ToolbarDropdownItemProps } from "../../../../components-shared/Toolbar/ToolbarDropdownItem";
-import { ToolbarDropdown } from "../../../../components-shared/Toolbar/ToolbarDropdown";
+import { ToolbarDropdownItemProps } from "../../../mantine-shared/Toolbar/ToolbarDropdownItem";
+import { ToolbarDropdown } from "../../../mantine-shared/Toolbar/ToolbarDropdown";
 
 export type BlockTypeDropdownItem = {
   name: string;
@@ -31,7 +31,7 @@ export type BlockTypeDropdownItem = {
   ) => boolean;
 };
 
-// TODO: Filtering from schema should be done here, not in component
+// TODO: Filtering from schema should be done here, not in component?
 export const blockTypeDropdownItems: BlockTypeDropdownItem[] = [
   {
     name: "Paragraph",

packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx

@@ -1,19 +1,19 @@
+import { Toolbar } from "../../mantine-shared/Toolbar/Toolbar";
 import { FormattingToolbarProps } from "../FormattingToolbarProps";
-import { ToolbarWrapper } from "../../../components-shared/Toolbar/ToolbarWrapper";
-import {
-  BlockTypeDropdown,
-  BlockTypeDropdownItem,
-} from "./DefaultDropdowns/BlockTypeDropdown";
-import { ImageCaptionButton } from "./DefaultButtons/ImageCaptionButton";
-import { ReplaceImageButton } from "./DefaultButtons/ReplaceImageButton";
 import { BasicTextStyleButton } from "./DefaultButtons/BasicTextStyleButton";
-import { TextAlignButton } from "./DefaultButtons/TextAlignButton";
 import { ColorStyleButton } from "./DefaultButtons/ColorStyleButton";
+import { CreateLinkButton } from "./DefaultButtons/CreateLinkButton";
+import { ImageCaptionButton } from "./DefaultButtons/ImageCaptionButton";
 import {
   NestBlockButton,
   UnnestBlockButton,
 } from "./DefaultButtons/NestBlockButtons";
-import { CreateLinkButton } from "./DefaultButtons/CreateLinkButton";
+import { ReplaceImageButton } from "./DefaultButtons/ReplaceImageButton";
+import { TextAlignButton } from "./DefaultButtons/TextAlignButton";
+import {
+  BlockTypeDropdown,
+  BlockTypeDropdownItem,
+} from "./DefaultDropdowns/BlockTypeDropdown";
 
 export const getFormattingToolbarItems = (
   blockTypeDropdownItems?: BlockTypeDropdownItem[]
@@ -41,10 +41,13 @@ export const getFormattingToolbarItems = (
 ];
 
 // TODO: This is basically the same as `ToolbarWrapper`, seems pretty useless
-export const FormattingToolbar = (props: FormattingToolbarProps) => {
+export const FormattingToolbar = (
+  props: FormattingToolbarProps & { children?: React.ReactNode }
+) => {
   return (
-    <ToolbarWrapper>
-      {props.items || getFormattingToolbarItems()}
-    </ToolbarWrapper>
+    <Toolbar>
+      {props.children ||
+        getFormattingToolbarItems(props.blockTypeDropdownItems)}
+    </Toolbar>
   );
 };

packages/react/src/components/HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu.tsx

@@ -9,8 +9,8 @@ import {
 } from "react";
 import { RiLink, RiText } from "react-icons/ri";
 
-import { ToolbarInputDropdown } from "../../../../components-shared/Toolbar/ToolbarInputDropdown";
-import { ToolbarInputDropdownItem } from "../../../../components-shared/Toolbar/ToolbarInputDropdownItem";
+import { ToolbarInputDropdown } from "../../../mantine-shared/Toolbar/ToolbarInputDropdown";
+import { ToolbarInputDropdownItem } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownItem";
 
 export type EditHyperlinkMenuProps = {
   url: string;

packages/react/src/components/HyperlinkToolbar/mantine/HyperlinkToolbar.tsx

@@ -3,8 +3,8 @@ import { RiExternalLinkFill, RiLinkUnlink } from "react-icons/ri";
 
 import { HyperlinkToolbarProps } from "../HyperlinkToolbarProps";
 import { EditHyperlinkMenu } from "./EditHyperlinkMenu/EditHyperlinkMenu";
-import { ToolbarWrapper } from "../../../components-shared/Toolbar/ToolbarWrapper";
-import { ToolbarButton } from "../../../components-shared/Toolbar/ToolbarButton";
+import { Toolbar } from "../../mantine-shared/Toolbar/Toolbar";
+import { ToolbarButton } from "../../mantine-shared/Toolbar/ToolbarButton";
 
 export const HyperlinkToolbar = (props: HyperlinkToolbarProps) => {
   const [isEditing, setIsEditing] = useState<boolean>(false);
@@ -40,7 +40,7 @@ export const HyperlinkToolbar = (props: HyperlinkToolbarProps) => {
   }
 
   return (
-    <ToolbarWrapper onMouseEnter={stopHideTimer} onMouseLeave={startHideTimer}>
+    <Toolbar onMouseEnter={stopHideTimer} onMouseLeave={startHideTimer}>
       <ToolbarButton
         mainTooltip="Edit"
         isSelected={false}
@@ -61,6 +61,6 @@ export const HyperlinkToolbar = (props: HyperlinkToolbarProps) => {
         onClick={deleteHyperlink}
         icon={RiLinkUnlink}
       />
-    </ToolbarWrapper>
+    </Toolbar>
   );
 };

packages/react/src/components/ImageToolbar/mantine/ImageToolbar.tsx

@@ -23,7 +23,7 @@ import {
 
 import { useBlockNoteEditor } from "../../../editor/BlockNoteContext";
 import { ImageToolbarProps } from "../ImageToolbarProps";
-import { ToolbarWrapper } from "../../../components-shared/Toolbar/ToolbarWrapper";
+import { Toolbar } from "../../mantine-shared/Toolbar/Toolbar";
 
 export const ImageToolbar = <
   I extends InlineContentSchema = DefaultInlineContentSchema,
@@ -116,7 +116,7 @@ export const ImageToolbar = <
   }, [editor, props.block, currentURL]);
 
   return (
-    <ToolbarWrapper className={"bn-image-toolbar"}>
+    <Toolbar className={"bn-image-toolbar"}>
       <Tabs value={openTab} onChange={setOpenTab as any}>
         {uploading && <LoadingOverlay visible={uploading} />}
 
@@ -169,6 +169,6 @@ export const ImageToolbar = <
           </div>
         </Tabs.Panel>
       </Tabs>
-    </ToolbarWrapper>
+    </Toolbar>
   );
 };

packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultButtons/BlockColorsButton.tsx

@@ -16,7 +16,7 @@ import { useBlockNoteEditor } from "../../../../../editor/BlockNoteContext";
 import { usePreventMenuOverflow } from "../../../../../hooks/usePreventMenuOverflow";
 import { DragHandleMenuProps } from "../../DragHandleMenuProps";
 import { DragHandleMenuItem } from "../DragHandleMenuItem";
-import { ColorPicker } from "../../../../../components-shared/ColorPicker/ColorPicker";
+import { ColorPicker } from "../../../../mantine-shared/ColorPicker/ColorPicker";
 
 export const BlockColorsButton = <
   BSchema extends BlockSchema = DefaultBlockSchema,