diff --git a/examples/02-ui-components/02-formatting-toolbar-buttons/App.tsx b/examples/02-ui-components/02-formatting-toolbar-buttons/App.tsx
index e34a0d9cdf..e2f093fcf9 100644
--- a/examples/02-ui-components/02-formatting-toolbar-buttons/App.tsx
+++ b/examples/02-ui-components/02-formatting-toolbar-buttons/App.tsx
@@ -70,57 +70,80 @@ export default function App() {
   return (
     <BlockNoteView editor={editor} formattingToolbar={false}>
       <FormattingToolbarController
-        formattingToolbar={() => (
-          <FormattingToolbar>
-            <BlockTypeDropdown key={"blockTypeDropdown"} />
+        formattingToolbar={(props) => (
+          <FormattingToolbar {...props}>
+            <BlockTypeDropdown
+              selectedBlocks={props.selectedBlocks}
+              key={"blockTypeDropdown"}
+            />
 
             {/* Extra button to toggle blue text & background */}
             <BlueButton key={"customButton"} />
 
-            <ImageCaptionButton key={"imageCaptionButton"} />
-            <ReplaceImageButton key={"replaceImageButton"} />
+            <ImageCaptionButton
+              selectedBlocks={props.selectedBlocks}
+              key={"imageCaptionButton"}
+            />
+            <ReplaceImageButton
+              selectedBlocks={props.selectedBlocks}
+              key={"replaceImageButton"}
+            />
 
             <BasicTextStyleButton
+              selectedBlocks={props.selectedBlocks}
               basicTextStyle={"bold"}
               key={"boldStyleButton"}
             />
             <BasicTextStyleButton
+              selectedBlocks={props.selectedBlocks}
               basicTextStyle={"italic"}
               key={"italicStyleButton"}
             />
             <BasicTextStyleButton
+              selectedBlocks={props.selectedBlocks}
               basicTextStyle={"underline"}
               key={"underlineStyleButton"}
             />
             <BasicTextStyleButton
+              selectedBlocks={props.selectedBlocks}
               basicTextStyle={"strike"}
               key={"strikeStyleButton"}
             />
             {/* Extra button to toggle code styles */}
             <BasicTextStyleButton
+              selectedBlocks={props.selectedBlocks}
               key={"codeStyleButton"}
               basicTextStyle={"code"}
             />
 
             <TextAlignButton
+              selectedBlocks={props.selectedBlocks}
               textAlignment={"left"}
               key={"textAlignLeftButton"}
             />
             <TextAlignButton
+              selectedBlocks={props.selectedBlocks}
               textAlignment={"center"}
               key={"textAlignCenterButton"}
             />
             <TextAlignButton
+              selectedBlocks={props.selectedBlocks}
               textAlignment={"right"}
               key={"textAlignRightButton"}
             />
 
-            <ColorStyleButton key={"colorStyleButton"} />
+            <ColorStyleButton
+              selectedBlocks={props.selectedBlocks}
+              key={"colorStyleButton"}
+            />
 
             <NestBlockButton key={"nestBlockButton"} />
             <UnnestBlockButton key={"unnestBlockButton"} />
 
-            <CreateLinkButton key={"createLinkButton"} />
+            <CreateLinkButton
+              selectedBlocks={props.selectedBlocks}
+              key={"createLinkButton"}
+            />
           </FormattingToolbar>
         )}
       />
diff --git a/examples/02-ui-components/03-formatting-toolbar-block-type-items/App.tsx b/examples/02-ui-components/03-formatting-toolbar-block-type-items/App.tsx
index 315e4afc5b..d57f0f1ad6 100644
--- a/examples/02-ui-components/03-formatting-toolbar-block-type-items/App.tsx
+++ b/examples/02-ui-components/03-formatting-toolbar-block-type-items/App.tsx
@@ -53,8 +53,9 @@ export default function App() {
   return (
     <BlockNoteView editor={editor} formattingToolbar={false}>
       <FormattingToolbarController
-        formattingToolbar={() => (
+        formattingToolbar={(props) => (
           <FormattingToolbar
+            {...props}
             blockTypeDropdownItems={[
               ...blockTypeDropdownItems,
               {
diff --git a/examples/05-custom-schema/03-font-style/App.tsx b/examples/05-custom-schema/03-font-style/App.tsx
index 1b8c79a96f..892f9668c6 100644
--- a/examples/05-custom-schema/03-font-style/App.tsx
+++ b/examples/05-custom-schema/03-font-style/App.tsx
@@ -97,26 +97,39 @@ export default function App() {
     <BlockNoteView editor={editor} formattingToolbar={false}>
       {/* Replaces the default Formatting Toolbar. */}
       <FormattingToolbarController
-        formattingToolbar={() => (
-          <FormattingToolbar>
-            <BlockTypeDropdown key={"blockTypeDropdown"} />
+        formattingToolbar={(props) => (
+          <FormattingToolbar {...props}>
+            <BlockTypeDropdown
+              selectedBlocks={props.selectedBlocks}
+              key={"blockTypeDropdown"}
+            />
 
-            <ImageCaptionButton key={"imageCaptionButton"} />
-            <ReplaceImageButton key={"replaceImageButton"} />
+            <ImageCaptionButton
+              selectedBlocks={props.selectedBlocks}
+              key={"imageCaptionButton"}
+            />
+            <ReplaceImageButton
+              selectedBlocks={props.selectedBlocks}
+              key={"replaceImageButton"}
+            />
 
             <BasicTextStyleButton
+              selectedBlocks={props.selectedBlocks}
               basicTextStyle={"bold"}
               key={"boldStyleButton"}
             />
             <BasicTextStyleButton
+              selectedBlocks={props.selectedBlocks}
               basicTextStyle={"italic"}
               key={"italicStyleButton"}
             />
             <BasicTextStyleButton
+              selectedBlocks={props.selectedBlocks}
               basicTextStyle={"underline"}
               key={"underlineStyleButton"}
             />
             <BasicTextStyleButton
+              selectedBlocks={props.selectedBlocks}
               basicTextStyle={"strike"}
               key={"strikeStyleButton"}
             />
@@ -124,24 +137,33 @@ export default function App() {
             <SetFontStyleButton />
 
             <TextAlignButton
+              selectedBlocks={props.selectedBlocks}
               textAlignment={"left"}
               key={"textAlignLeftButton"}
             />
             <TextAlignButton
+              selectedBlocks={props.selectedBlocks}
               textAlignment={"center"}
               key={"textAlignCenterButton"}
             />
             <TextAlignButton
+              selectedBlocks={props.selectedBlocks}
               textAlignment={"right"}
               key={"textAlignRightButton"}
             />
 
-            <ColorStyleButton key={"colorStyleButton"} />
+            <ColorStyleButton
+              selectedBlocks={props.selectedBlocks}
+              key={"colorStyleButton"}
+            />
 
             <NestBlockButton key={"nestBlockButton"} />
             <UnnestBlockButton key={"unnestBlockButton"} />
 
-            <CreateLinkButton key={"createLinkButton"} />
+            <CreateLinkButton
+              selectedBlocks={props.selectedBlocks}
+              key={"createLinkButton"}
+            />
           </FormattingToolbar>
         )}
       />
diff --git a/examples/05-custom-schema/react-custom-blocks/App.tsx b/examples/05-custom-schema/react-custom-blocks/App.tsx
index 49a541a21c..8f743abe95 100644
--- a/examples/05-custom-schema/react-custom-blocks/App.tsx
+++ b/examples/05-custom-schema/react-custom-blocks/App.tsx
@@ -110,11 +110,11 @@ export const bracketsParagraphBlock = createReactBlockSpec(
   {
     render: (props) => (
       <div className={"brackets-paragraph"}>
-        <div contentEditable={"false"}>{"["}</div>
-        <span contentEditable={"false"}>{"{"}</span>
+        <div>{"["}</div>
+        <span>{"{"}</span>
         <div className={"inline-content"} ref={props.contentRef} />
-        <span contentEditable={"false"}>{"}"}</span>
-        <div contentEditable={"false"}>{"]"}</div>
+        <span>{"}"}</span>
+        <div>{"]"}</div>
       </div>
     ),
   }
diff --git a/examples/05-custom-schema/react-custom-styles/App.tsx b/examples/05-custom-schema/react-custom-styles/App.tsx
index aba31bdeda..027468cdab 100644
--- a/examples/05-custom-schema/react-custom-styles/App.tsx
+++ b/examples/05-custom-schema/react-custom-styles/App.tsx
@@ -52,7 +52,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
   const activeStyles = useActiveStyles(editor);
 
   return (
-    <FormattingToolbar>
+    <FormattingToolbar {...props}>
       <ToolbarButton
         mainTooltip={"small"}
         onClick={() => {
diff --git a/examples/vanilla-js/react-vanilla-custom-styles/App.tsx b/examples/vanilla-js/react-vanilla-custom-styles/App.tsx
index ee30b7b8ef..9753a0c48c 100644
--- a/examples/vanilla-js/react-vanilla-custom-styles/App.tsx
+++ b/examples/vanilla-js/react-vanilla-custom-styles/App.tsx
@@ -64,7 +64,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
   const activeStyles = useActiveStyles(editor);
 
   return (
-    <FormattingToolbar>
+    <FormattingToolbar {...props}>
       <ToolbarButton
         mainTooltip={"small"}
         onClick={() => {
diff --git a/packages/core/src/editor/BlockNoteEditor.ts b/packages/core/src/editor/BlockNoteEditor.ts
index 65596426c7..2f1836540f 100644
--- a/packages/core/src/editor/BlockNoteEditor.ts
+++ b/packages/core/src/editor/BlockNoteEditor.ts
@@ -155,7 +155,11 @@ export class BlockNoteEditor<
   public readonly inlineContentImplementations: InlineContentSpecs;
   public readonly styleImplementations: StyleSpecs;
 
-  public readonly formattingToolbar: FormattingToolbarProsemirrorPlugin;
+  public readonly formattingToolbar: FormattingToolbarProsemirrorPlugin<
+    BSchema,
+    ISchema,
+    SSchema
+  >;
   public readonly hyperlinkToolbar: HyperlinkToolbarProsemirrorPlugin<
     BSchema,
     ISchema,
@@ -361,7 +365,7 @@ export class BlockNoteEditor<
    * @deprecated, use `editor.document` instead
    */
   public get topLevelBlocks(): Block<BSchema, ISchema, SSchema>[] {
-    return this.topLevelBlocks;
+    return this.document;
   }
 
   /**
diff --git a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts
index a60f1cb398..afc1f9a711 100644
--- a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts
+++ b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts
@@ -6,11 +6,22 @@ import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
 import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { EventEmitter } from "../../util/EventEmitter";
-
-export type FormattingToolbarState = UiElementPosition;
-
-export class FormattingToolbarView {
-  public state?: FormattingToolbarState;
+import { Block } from "../../blocks/defaultBlocks";
+
+export type FormattingToolbarState<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+> = UiElementPosition & {
+  selectedBlocks: Block<BSchema, I, S>[];
+};
+
+export class FormattingToolbarView<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+> {
+  public state?: FormattingToolbarState<BSchema, I, S>;
   public emitUpdate: () => void;
 
   public preventHide = false;
@@ -25,13 +36,9 @@ export class FormattingToolbarView {
   }) => boolean = ({ state }) => !state.selection.empty;
 
   constructor(
-    private readonly editor: BlockNoteEditor<
-      BlockSchema,
-      InlineContentSchema,
-      StyleSchema
-    >,
+    private readonly editor: BlockNoteEditor<BSchema, I, S>,
     private readonly pmView: EditorView,
-    emitUpdate: (state: FormattingToolbarState) => void
+    emitUpdate: (state: FormattingToolbarState<BSchema, I, S>) => void
   ) {
     this.emitUpdate = () => {
       if (!this.state) {
@@ -145,9 +152,14 @@ export class FormattingToolbarView {
       !this.preventShow &&
       (shouldShow || this.preventHide)
     ) {
+      const blockWithTextCursor = this.editor.getTextCursorPosition().block;
+      const selection = this.editor.getSelection();
+
       this.state = {
         show: true,
         referencePos: this.getSelectionBoundingBox(),
+        selectedBlocks:
+          selection !== undefined ? selection.blocks : [blockWithTextCursor],
       };
 
       this.emitUpdate();
@@ -205,11 +217,15 @@ export const formattingToolbarPluginKey = new PluginKey(
   "FormattingToolbarPlugin"
 );
 
-export class FormattingToolbarProsemirrorPlugin extends EventEmitter<any> {
-  private view: FormattingToolbarView | undefined;
+export class FormattingToolbarProsemirrorPlugin<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+> extends EventEmitter<any> {
+  private view: FormattingToolbarView<BSchema, I, S> | undefined;
   public readonly plugin: Plugin;
 
-  constructor(editor: BlockNoteEditor<any, any, any>) {
+  constructor(editor: BlockNoteEditor<BSchema, I, S>) {
     super();
     this.plugin = new Plugin({
       key: formattingToolbarPluginKey,
@@ -222,7 +238,9 @@ export class FormattingToolbarProsemirrorPlugin extends EventEmitter<any> {
     });
   }
 
-  public onUpdate(callback: (state: FormattingToolbarState) => void) {
+  public onUpdate(
+    callback: (state: FormattingToolbarState<BSchema, I, S>) => void
+  ) {
     return this.on("update", callback);
   }
 }
diff --git a/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx b/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
index 839903c172..10be98ac25 100644
--- a/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
+++ b/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
@@ -1,6 +1,9 @@
 import {
   BlockSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
   DefaultProps,
+  DefaultStyleSchema,
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
@@ -29,14 +32,14 @@ const textAlignmentToPlacement = (
   }
 };
 
-export const FormattingToolbarController = (props: {
-  formattingToolbar?: FC<FormattingToolbarProps>;
+export const FormattingToolbarController = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(props: {
+  formattingToolbar?: FC<FormattingToolbarProps<BSchema, I, S>>;
 }) => {
-  const editor = useBlockNoteEditor<
-    BlockSchema,
-    InlineContentSchema,
-    StyleSchema
-  >();
+  const editor = useBlockNoteEditor<BSchema, I, S>();
 
   const [placement, setPlacement] = useState<"top-start" | "top" | "top-end">(
     () => {
@@ -83,11 +86,13 @@ export const FormattingToolbarController = (props: {
     return null;
   }
 
+  const { show, referencePos, ...data } = state;
+
   const Component = props.formattingToolbar || FormattingToolbar;
 
   return (
     <div ref={ref} style={style}>
-      <Component />
+      <Component {...data} />
     </div>
   );
 };
diff --git a/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts b/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts
index 158ac4ec32..032e5dc19c 100644
--- a/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts
+++ b/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts
@@ -1,5 +1,19 @@
 import { BlockTypeDropdownItem } from "./mantine/DefaultDropdowns/BlockTypeDropdown";
+import {
+  BlockSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  FormattingToolbarState,
+  InlineContentSchema,
+  StyleSchema,
+  UiElementPosition,
+} from "@blocknote/core";
 
-export type FormattingToolbarProps = {
+export type FormattingToolbarProps<
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+> = Omit<FormattingToolbarState<BSchema, I, S>, keyof UiElementPosition> & {
   blockTypeDropdownItems?: BlockTypeDropdownItem[];
 };
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx
index 1f5d58bd93..def4cba433 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx
@@ -1,6 +1,10 @@
 import {
+  Block,
   BlockNoteEditor,
   BlockSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
   formatKeyboardShortcut,
   InlineContentSchema,
   StyleSchema,
@@ -17,7 +21,6 @@ import {
 
 import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
 import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
-import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
 import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 
 type BasicTextStyle = "bold" | "italic" | "underline" | "strike" | "code";
@@ -38,12 +41,16 @@ const shortcuts = {
   code: "",
 } satisfies Record<BasicTextStyle, string>;
 
-function checkBasicTextStyleInSchema<Style extends BasicTextStyle>(
+function checkBasicTextStyleInSchema<
+  Style extends BasicTextStyle,
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema
+>(
   style: Style,
-  editor: BlockNoteEditor<BlockSchema, InlineContentSchema, StyleSchema>
+  editor: BlockNoteEditor<BSchema, I, any>
 ): editor is BlockNoteEditor<
-  BlockSchema,
-  InlineContentSchema,
+  BSchema,
+  I,
   {
     [k in Style]: {
       type: k;
@@ -58,8 +65,14 @@ function checkBasicTextStyleInSchema<Style extends BasicTextStyle>(
   );
 }
 
-export const BasicTextStyleButton = <Style extends BasicTextStyle>(props: {
+export const BasicTextStyleButton = <
+  Style extends BasicTextStyle,
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(props: {
   basicTextStyle: Style;
+  selectedBlocks: Block<BSchema, I, S>[];
 }) => {
   const editor = useBlockNoteEditor<
     BlockSchema,
@@ -72,8 +85,6 @@ export const BasicTextStyleButton = <Style extends BasicTextStyle>(props: {
     editor
   );
 
-  const selectedBlocks = useSelectedBlocks(editor);
-
   const [active, setActive] = useState<boolean>(
     props.basicTextStyle in editor.getActiveStyles()
   );
@@ -101,8 +112,8 @@ export const BasicTextStyleButton = <Style extends BasicTextStyle>(props: {
       return false;
     }
     // Also don't show when none of the selected blocks have text content
-    return !!selectedBlocks.find((block) => block.content !== undefined);
-  }, [basicTextStyleInSchema, selectedBlocks]);
+    return !!props.selectedBlocks.find((block) => block.content !== undefined);
+  }, [basicTextStyleInSchema, props.selectedBlocks]);
 
   if (!show) {
     return null;
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx
index e3be88f467..7434cab53d 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx
@@ -1,6 +1,10 @@
 import {
+  Block,
   BlockNoteEditor,
   BlockSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
@@ -10,17 +14,20 @@ import { useCallback, useMemo, useState } from "react";
 import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
 import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
 import { usePreventMenuOverflow } from "../../../../hooks/usePreventMenuOverflow";
-import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
 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">(
+function checkColorInSchema<
+  Color extends "text" | "background",
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema
+>(
   color: Color,
-  editor: BlockNoteEditor<BlockSchema, InlineContentSchema, StyleSchema>
+  editor: BlockNoteEditor<BSchema, I, any>
 ): editor is BlockNoteEditor<
-  BlockSchema,
-  InlineContentSchema,
+  BSchema,
+  I,
   Color extends "text"
     ? {
         textColor: {
@@ -42,7 +49,13 @@ function checkColorInSchema<Color extends "text" | "background">(
   );
 }
 
-export const ColorStyleButton = () => {
+export const ColorStyleButton = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(props: {
+  selectedBlocks: Block<BSchema, I, S>[];
+}) => {
   const editor = useBlockNoteEditor<
     BlockSchema,
     InlineContentSchema,
@@ -52,8 +65,6 @@ export const ColorStyleButton = () => {
   const textColorInSchema = checkColorInSchema("text", editor);
   const backgroundColorInSchema = checkColorInSchema("background", editor);
 
-  const selectedBlocks = useSelectedBlocks(editor);
-
   const [currentTextColor, setCurrentTextColor] = useState<string>(
     textColorInSchema
       ? editor.getActiveStyles().textColor || "default"
@@ -115,14 +126,14 @@ export const ColorStyleButton = () => {
       return false;
     }
 
-    for (const block of selectedBlocks) {
+    for (const block of props.selectedBlocks) {
       if (block.content !== undefined) {
         return true;
       }
     }
 
     return false;
-  }, [backgroundColorInSchema, selectedBlocks, textColorInSchema]);
+  }, [backgroundColorInSchema, props.selectedBlocks, textColorInSchema]);
 
   if (!show) {
     return null;
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx
index 9de18b94db..d63108a7ca 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx
@@ -2,7 +2,12 @@ import { useCallback, useMemo, useState } from "react";
 import { RiLink } from "react-icons/ri";
 
 import {
+  Block,
+  BlockNoteEditor,
   BlockSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
   formatKeyboardShortcut,
   InlineContentSchema,
   StyleSchema,
@@ -10,20 +15,43 @@ import {
 
 import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
 import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
-import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
 import { EditHyperlinkMenu } from "../../../HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu";
 import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 import { ToolbarInputDropdownButton } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownButton";
 
-// TODO: Make sure Link is in inline content schema
-export const CreateLinkButton = () => {
+function checkLinkInSchema<BSchema extends BlockSchema, S extends StyleSchema>(
+  editor: BlockNoteEditor<BSchema, any, S>
+): editor is BlockNoteEditor<
+  BSchema,
+  {
+    link: {
+      type: "link";
+      propSchema: any;
+      content: "styled";
+    };
+  },
+  S
+> {
+  return (
+    "link" in editor.schema.inlineContentSchema &&
+    editor.schema.inlineContentSchema["link"] === "link"
+  );
+}
+
+export const CreateLinkButton = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(props: {
+  selectedBlocks: Block<BSchema, I, S>[];
+}) => {
   const editor = useBlockNoteEditor<
     BlockSchema,
     InlineContentSchema,
     StyleSchema
   >();
 
-  const selectedBlocks = useSelectedBlocks(editor);
+  const linkInSchema = checkLinkInSchema(editor);
 
   const [url, setUrl] = useState<string>(editor.getSelectedLinkUrl() || "");
   const [text, setText] = useState<string>(editor.getSelectedText());
@@ -42,14 +70,18 @@ export const CreateLinkButton = () => {
   );
 
   const show = useMemo(() => {
-    for (const block of selectedBlocks) {
+    if (!linkInSchema) {
+      return false;
+    }
+
+    for (const block of props.selectedBlocks) {
       if (block.content === undefined) {
         return false;
       }
     }
 
     return true;
-  }, [selectedBlocks]);
+  }, [linkInSchema, props.selectedBlocks]);
 
   if (!show) {
     return null;
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx
index 91811faff1..bc77650faf 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx
@@ -1,7 +1,11 @@
 import {
+  Block,
   BlockSchema,
   checkBlockIsDefaultType,
   checkDefaultBlockTypeInSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
@@ -15,13 +19,18 @@ import {
 import { RiText } from "react-icons/ri";
 
 import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
-import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
 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";
 
-export const ImageCaptionButton = () => {
+export const ImageCaptionButton = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(props: {
+  selectedBlocks: Block<BSchema, I, S>[];
+}) => {
   const editor = useBlockNoteEditor<
     BlockSchema,
     InlineContentSchema,
@@ -30,22 +39,20 @@ export const ImageCaptionButton = () => {
 
   const [currentEditingCaption, setCurrentEditingCaption] = useState<string>();
 
-  const selectedBlocks = useSelectedBlocks(editor);
-
   const imageBlock = useMemo(() => {
     // Checks if only one block is selected.
-    if (selectedBlocks.length !== 1) {
+    if (props.selectedBlocks.length !== 1) {
       return undefined;
     }
 
-    const block = selectedBlocks[0];
+    const block = props.selectedBlocks[0];
 
     if (checkBlockIsDefaultType("image", block, editor)) {
       return block;
     }
 
     return undefined;
-  }, [editor, selectedBlocks]);
+  }, [editor, props.selectedBlocks]);
 
   const handleEnter = useCallback(
     (event: KeyboardEvent) => {
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx
index d878532d87..7d95753559 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx
@@ -1,6 +1,10 @@
 import {
+  Block,
   BlockSchema,
   checkBlockIsDefaultType,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
@@ -9,26 +13,30 @@ import { useEffect, useState } from "react";
 import { RiImageEditFill } from "react-icons/ri";
 
 import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
-import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
 import { ImageToolbar } from "../../../ImageToolbar/mantine/ImageToolbar";
 import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 
-export const ReplaceImageButton = () => {
+export const ReplaceImageButton = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(props: {
+  selectedBlocks: Block<BSchema, I, S>[];
+}) => {
   const editor = useBlockNoteEditor<
     BlockSchema,
     InlineContentSchema,
     StyleSchema
   >();
 
-  const selectedBlocks = useSelectedBlocks(editor);
-
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   useEffect(() => {
     setIsOpen(false);
-  }, [selectedBlocks]);
+  }, []);
 
-  const block = selectedBlocks.length === 1 ? selectedBlocks[0] : undefined;
+  const block =
+    props.selectedBlocks.length === 1 ? props.selectedBlocks[0] : undefined;
 
   if (
     block === undefined ||
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx
index 8c8fc711d3..cbec929fb4 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx
@@ -1,8 +1,12 @@
 import {
+  Block,
   BlockSchema,
   checkBlockHasDefaultProp,
   checkBlockTypeHasDefaultProp,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
   DefaultProps,
+  DefaultStyleSchema,
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
@@ -16,7 +20,6 @@ import {
 } from "react-icons/ri";
 
 import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
-import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
 import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 
 type TextAlignment = DefaultProps["textAlignment"];
@@ -28,30 +31,35 @@ const icons: Record<TextAlignment, IconType> = {
   justify: RiAlignJustify,
 };
 
-export const TextAlignButton = (props: { textAlignment: TextAlignment }) => {
+export const TextAlignButton = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(props: {
+  textAlignment: TextAlignment;
+  selectedBlocks: Block<BSchema, I, S>[];
+}) => {
   const editor = useBlockNoteEditor<
     BlockSchema,
     InlineContentSchema,
     StyleSchema
   >();
 
-  const selectedBlocks = useSelectedBlocks(editor);
-
   const textAlignment = useMemo(() => {
-    const block = selectedBlocks[0];
+    const block = props.selectedBlocks[0];
 
     if (checkBlockHasDefaultProp("textAlignment", block, editor)) {
       return block.props.textAlignment;
     }
 
     return;
-  }, [editor, selectedBlocks]);
+  }, [editor, props.selectedBlocks]);
 
   const setTextAlignment = useCallback(
     (textAlignment: TextAlignment) => {
       editor.focus();
 
-      for (const block of selectedBlocks) {
+      for (const block of props.selectedBlocks) {
         if (checkBlockTypeHasDefaultProp("textAlignment", block.type, editor)) {
           editor.updateBlock(block, {
             props: { textAlignment: textAlignment },
@@ -59,12 +67,14 @@ export const TextAlignButton = (props: { textAlignment: TextAlignment }) => {
         }
       }
     },
-    [editor, selectedBlocks]
+    [editor, props.selectedBlocks]
   );
 
   const show = useMemo(() => {
-    return !!selectedBlocks.find((block) => "textAlignment" in block.props);
-  }, [selectedBlocks]);
+    return !!props.selectedBlocks.find(
+      (block) => "textAlignment" in block.props
+    );
+  }, [props.selectedBlocks]);
 
   if (!show) {
     return null;
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx
index 1218753798..8a6516cfda 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx
@@ -1,10 +1,13 @@
 import {
   Block,
   BlockSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import type { IconType } from "react-icons";
 import {
   RiH1,
@@ -16,8 +19,6 @@ import {
 } from "react-icons/ri";
 
 import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
-import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
-import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
 import { ToolbarDropdown } from "../../../mantine-shared/Toolbar/ToolbarDropdown";
 import { ToolbarDropdownItemProps } from "../../../mantine-shared/Toolbar/ToolbarDropdownItem";
 
@@ -83,8 +84,13 @@ export const blockTypeDropdownItems: BlockTypeDropdownItem[] = [
   },
 ];
 
-export const BlockTypeDropdown = (props: {
+export const BlockTypeDropdown = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(props: {
   items?: BlockTypeDropdownItem[];
+  selectedBlocks: Block<BSchema, I, S>[];
 }) => {
   const editor = useBlockNoteEditor<
     BlockSchema,
@@ -92,10 +98,6 @@ export const BlockTypeDropdown = (props: {
     StyleSchema
   >();
 
-  const selectedBlocks = useSelectedBlocks(editor);
-
-  const [block, setBlock] = useState(editor.getTextCursorPosition().block);
-
   const filteredItems: BlockTypeDropdownItem[] = useMemo(() => {
     return (props.items || blockTypeDropdownItems).filter((item) => {
       // Checks if block type exists in the schema
@@ -126,15 +128,18 @@ export const BlockTypeDropdown = (props: {
   }, [editor, props.items]);
 
   const shouldShow: boolean = useMemo(
-    () => filteredItems.find((item) => item.type === block.type) !== undefined,
-    [block.type, filteredItems]
+    () =>
+      filteredItems.find(
+        (item) => item.type === props.selectedBlocks[0].type
+      ) !== undefined,
+    [filteredItems, props.selectedBlocks]
   );
 
   const fullItems: ToolbarDropdownItemProps[] = useMemo(() => {
     const onClick = (item: BlockTypeDropdownItem) => {
       editor.focus();
 
-      for (const block of selectedBlocks) {
+      for (const block of props.selectedBlocks) {
         editor.updateBlock(block, {
           type: item.type as any,
           props: item.props as any,
@@ -146,13 +151,15 @@ export const BlockTypeDropdown = (props: {
       text: item.name,
       icon: item.icon,
       onClick: () => onClick(item),
-      isSelected: item.isSelected(block),
+      isSelected: item.isSelected(
+        props.selectedBlocks[0] as Block<
+          BlockSchema,
+          InlineContentSchema,
+          StyleSchema
+        >
+      ),
     }));
-  }, [block, filteredItems, editor, selectedBlocks]);
-
-  useEditorContentOrSelectionChange(() => {
-    setBlock(editor.getTextCursorPosition().block);
-  }, editor);
+  }, [filteredItems, editor, props.selectedBlocks]);
 
   if (!shouldShow) {
     return null;
diff --git a/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx b/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx
index ef5b6fea49..874734c533 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx
@@ -14,30 +14,76 @@ import {
   BlockTypeDropdown,
   BlockTypeDropdownItem,
 } from "./DefaultDropdowns/BlockTypeDropdown";
+import {
+  Block,
+  BlockSchema,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
 
-export const getFormattingToolbarItems = (
+export const getFormattingToolbarItems = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  selectedBlocks: Block<BSchema, I, S>[],
   blockTypeDropdownItems?: BlockTypeDropdownItem[]
 ): JSX.Element[] => [
   <BlockTypeDropdown
-    key={"blockTypeDropdown"}
+    selectedBlocks={selectedBlocks}
     items={blockTypeDropdownItems}
+    key={"blockTypeDropdown"}
+  />,
+  <ImageCaptionButton
+    selectedBlocks={selectedBlocks}
+    key={"imageCaptionButton"}
+  />,
+  <ReplaceImageButton
+    selectedBlocks={selectedBlocks}
+    key={"replaceImageButton"}
+  />,
+  <BasicTextStyleButton
+    selectedBlocks={selectedBlocks}
+    basicTextStyle={"bold"}
+    key={"boldStyleButton"}
   />,
-  <ImageCaptionButton key={"imageCaptionButton"} />,
-  <ReplaceImageButton key={"replaceImageButton"} />,
-  <BasicTextStyleButton basicTextStyle={"bold"} key={"boldStyleButton"} />,
-  <BasicTextStyleButton basicTextStyle={"italic"} key={"italicStyleButton"} />,
   <BasicTextStyleButton
+    selectedBlocks={selectedBlocks}
+    basicTextStyle={"italic"}
+    key={"italicStyleButton"}
+  />,
+  <BasicTextStyleButton
+    selectedBlocks={selectedBlocks}
     basicTextStyle={"underline"}
     key={"underlineStyleButton"}
   />,
-  <BasicTextStyleButton basicTextStyle={"strike"} key={"strikeStyleButton"} />,
-  <TextAlignButton textAlignment={"left"} key={"textAlignLeftButton"} />,
-  <TextAlignButton textAlignment={"center"} key={"textAlignCenterButton"} />,
-  <TextAlignButton textAlignment={"right"} key={"textAlignRightButton"} />,
-  <ColorStyleButton key={"colorStyleButton"} />,
+  <BasicTextStyleButton
+    selectedBlocks={selectedBlocks}
+    basicTextStyle={"strike"}
+    key={"strikeStyleButton"}
+  />,
+  <TextAlignButton
+    selectedBlocks={selectedBlocks}
+    textAlignment={"left"}
+    key={"textAlignLeftButton"}
+  />,
+  <TextAlignButton
+    selectedBlocks={selectedBlocks}
+    textAlignment={"center"}
+    key={"textAlignCenterButton"}
+  />,
+  <TextAlignButton
+    selectedBlocks={selectedBlocks}
+    textAlignment={"right"}
+    key={"textAlignRightButton"}
+  />,
+  <ColorStyleButton selectedBlocks={selectedBlocks} key={"colorStyleButton"} />,
   <NestBlockButton key={"nestBlockButton"} />,
   <UnnestBlockButton key={"unnestBlockButton"} />,
-  <CreateLinkButton key={"createLinkButton"} />,
+  <CreateLinkButton selectedBlocks={selectedBlocks} key={"createLinkButton"} />,
 ];
 
 // TODO: props.blockTypeDropdownItems should only be available if no children
@@ -54,13 +100,20 @@ export const getFormattingToolbarItems = (
  * - Custom buttons: The `ToolbarButton` component in the
  * `components/mantine-shared/Toolbar` directory.
  */
-export const FormattingToolbar = (
-  props: FormattingToolbarProps & { children?: React.ReactNode }
+export const FormattingToolbar = <
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(
+  props: FormattingToolbarProps<BSchema, I, S> & { children?: React.ReactNode }
 ) => {
   return (
     <Toolbar>
       {props.children ||
-        getFormattingToolbarItems(props.blockTypeDropdownItems)}
+        getFormattingToolbarItems(
+          props.selectedBlocks,
+          props.blockTypeDropdownItems
+        )}
     </Toolbar>
   );
 };