Refactored FormattingToolbarController to handle whether the deskto…

…p or mobile version should be used
matthewlipski · Sep 22, 2026 · Aug 3, 2026 · Aug 6, 2026 · Aug 7, 2026 · Aug 7, 2026
commit a174fef451a04cd35d0499e7c8dd8356a7a08646
diff --git a/packages/react/src/components/FormattingToolbar/DesktopFormattingToolbarController.tsx b/packages/react/src/components/FormattingToolbar/DesktopFormattingToolbarController.tsx
@@ -0,0 +1,129 @@
+import {
+  blockHasType,
+  BlockSchema,
+  defaultProps,
+  DefaultProps,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+import { FormattingToolbarExtension } from "@blocknote/core/extensions";
+import { flip, offset, shift } from "@floating-ui/react";
+import { FC, useMemo } from "react";
+
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
+import { useEditorState } from "../../hooks/useEditorState.js";
+import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
+import { FloatingUIOptions } from "../Popovers/FloatingUIOptions.js";
+import { PositionPopover } from "../Popovers/PositionPopover.js";
+import { FormattingToolbar } from "./FormattingToolbar.js";
+import { FormattingToolbarProps } from "./FormattingToolbarProps.js";
+
+const textAlignmentToPlacement = (
+  textAlignment: DefaultProps["textAlignment"],
+) => {
+  switch (textAlignment) {
+    case "left":
+      return "top-start";
+    case "center":
+      return "top";
+    case "right":
+      return "top-end";
+    default:
+      return "top-start";
+  }
+};
+
+export const DesktopFormattingToolbarController = (props: {
+  formattingToolbar?: FC<FormattingToolbarProps>;
+  floatingUIOptions?: FloatingUIOptions;
+  /**
+   * Override the DOM node this floating element portals into. Falls back to
+   * `editor.portalElement` (which by default is mounted inside `bn-container`)
+   * when omitted.
+   */
+  portalElement?: HTMLElement | null;
+}) => {
+  const editor = useBlockNoteEditor<
+    BlockSchema,
+    InlineContentSchema,
+    StyleSchema
+  >();
+  const formattingToolbar = useExtension(FormattingToolbarExtension, {
+    editor,
+  });
+  const show = useExtensionState(FormattingToolbarExtension, {
+    editor,
+  });
+
+  const position = useEditorState({
+    editor,
+    selector: ({ editor }) =>
+      formattingToolbar.store.state
+        ? {
+            from: editor.prosemirrorState.selection.from,
+            to: editor.prosemirrorState.selection.to,
+          }
+        : undefined,
+  });
+
+  const placement = useEditorState({
+    editor,
+    selector: ({ editor }) => {
+      const block = editor.getTextCursorPosition().block;
+
+      if (
+        !blockHasType(block, editor, block.type, {
+          textAlignment: defaultProps.textAlignment,
+        })
+      ) {
+        return "top-start";
+      } else {
+        return textAlignmentToPlacement(block.props.textAlignment);
+      }
+    },
+  });
+
+  const floatingUIOptions = useMemo<FloatingUIOptions>(
+    () => ({
+      ...props.floatingUIOptions,
+      useFloatingOptions: {
+        open: show,
+        // Needed as hooks like `useDismiss` call `onOpenChange` to change the
+        // open state.
+        onOpenChange: (open, _event, reason) => {
+          formattingToolbar.store.setState(open);
+
+          if (reason === "escape-key") {
+            editor.focus();
+          }
+        },
+        placement,
+        middleware: [offset(10), shift(), flip()],
+        ...props.floatingUIOptions?.useFloatingOptions,
+      },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
+      elementProps: {
+        style: {
+          zIndex: 40,
+        },
+        ...props.floatingUIOptions?.elementProps,
+      },
+    }),
+    [show, placement, props.floatingUIOptions, formattingToolbar.store, editor],
+  );
+
+  const Component = props.formattingToolbar || FormattingToolbar;
+
+  return (
+    <PositionPopover
+      position={position}
+      portalElement={props.portalElement}
+      {...floatingUIOptions}
+    >
+      {show && <Component />}
+    </PositionPopover>
+  );
+};
diff --git a/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx b/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
@@ -1,37 +1,10 @@
-import {
-  blockHasType,
-  BlockSchema,
-  defaultProps,
-  DefaultProps,
-  InlineContentSchema,
-  StyleSchema,
-} from "@blocknote/core";
-import { FormattingToolbarExtension } from "@blocknote/core/extensions";
-import { flip, offset, shift } from "@floating-ui/react";
-import { FC, useMemo } from "react";
+import { isTouchDevice } from "@blocknote/core";
+import { FC } from "react";
 
-import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
-import { useEditorState } from "../../hooks/useEditorState.js";
-import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
 import { FloatingUIOptions } from "../Popovers/FloatingUIOptions.js";
-import { PositionPopover } from "../Popovers/PositionPopover.js";
-import { FormattingToolbar } from "./FormattingToolbar.js";
+import { DesktopFormattingToolbarController } from "./DesktopFormattingToolbarController.js";
 import { FormattingToolbarProps } from "./FormattingToolbarProps.js";
-
-const textAlignmentToPlacement = (
-  textAlignment: DefaultProps["textAlignment"],
-) => {
-  switch (textAlignment) {
-    case "left":
-      return "top-start";
-    case "center":
-      return "top";
-    case "right":
-      return "top-end";
-    default:
-      return "top-start";
-  }
-};
+import { MobileFormattingToolbarController } from "./MobileFormattingToolbarController.js";
 
 export const FormattingToolbarController = (props: {
   formattingToolbar?: FC<FormattingToolbarProps>;
@@ -43,87 +16,13 @@ export const FormattingToolbarController = (props: {
    */
   portalElement?: HTMLElement | null;
 }) => {
-  const editor = useBlockNoteEditor<
-    BlockSchema,
-    InlineContentSchema,
-    StyleSchema
-  >();
-  const formattingToolbar = useExtension(FormattingToolbarExtension, {
-    editor,
-  });
-  const show = useExtensionState(FormattingToolbarExtension, {
-    editor,
-  });
-
-  const position = useEditorState({
-    editor,
-    selector: ({ editor }) =>
-      formattingToolbar.store.state
-        ? {
-            from: editor.prosemirrorState.selection.from,
-            to: editor.prosemirrorState.selection.to,
-          }
-        : undefined,
-  });
-
-  const placement = useEditorState({
-    editor,
-    selector: ({ editor }) => {
-      const block = editor.getTextCursorPosition().block;
-
-      if (
-        !blockHasType(block, editor, block.type, {
-          textAlignment: defaultProps.textAlignment,
-        })
-      ) {
-        return "top-start";
-      } else {
-        return textAlignmentToPlacement(block.props.textAlignment);
-      }
-    },
-  });
-
-  const floatingUIOptions = useMemo<FloatingUIOptions>(
-    () => ({
-      ...props.floatingUIOptions,
-      useFloatingOptions: {
-        open: show,
-        // Needed as hooks like `useDismiss` call `onOpenChange` to change the
-        // open state.
-        onOpenChange: (open, _event, reason) => {
-          formattingToolbar.store.setState(open);
-
-          if (reason === "escape-key") {
-            editor.focus();
-          }
-        },
-        placement,
-        middleware: [offset(10), shift(), flip()],
-        ...props.floatingUIOptions?.useFloatingOptions,
-      },
-      focusManagerProps: {
-        disabled: true,
-        ...props.floatingUIOptions?.focusManagerProps,
-      },
-      elementProps: {
-        style: {
-          zIndex: 40,
-        },
-        ...props.floatingUIOptions?.elementProps,
-      },
-    }),
-    [show, placement, props.floatingUIOptions, formattingToolbar.store, editor],
-  );
-
-  const Component = props.formattingToolbar || FormattingToolbar;
+  if (isTouchDevice()) {
+    return (
+      <MobileFormattingToolbarController
+        formattingToolbar={props.formattingToolbar}
+      />
+    );
+  }
 
-  return (
-    <PositionPopover
-      position={position}
-      portalElement={props.portalElement}
-      {...floatingUIOptions}
-    >
-      {show && <Component />}
-    </PositionPopover>
-  );
+  return <DesktopFormattingToolbarController {...props} />;
 };
diff --git a/packages/react/src/editor/BlockNoteDefaultUI.tsx b/packages/react/src/editor/BlockNoteDefaultUI.tsx
@@ -1,4 +1,3 @@
-import { isTouchDevice } from "@blocknote/core";
 import { CommentsExtension } from "@blocknote/core/comments";
 import {
   FilePanelExtension,
@@ -12,7 +11,6 @@ import { lazy, Suspense } from "react";
 
 import { FilePanelController } from "../components/FilePanel/FilePanelController.js";
 import { FormattingToolbarController } from "../components/FormattingToolbar/FormattingToolbarController.js";
-import { MobileFormattingToolbarController } from "../components/FormattingToolbar/MobileFormattingToolbarController.js";
 import { LinkToolbarController } from "../components/LinkToolbar/LinkToolbarController.js";
 import { SideMenuController } from "../components/SideMenu/SideMenuController.js";
 import { AttributionTooltipController } from "../components/AttributionTooltip/AttributionTooltipController.js";
@@ -121,14 +119,11 @@ export function BlockNoteDefaultUI(props: BlockNoteDefaultUIProps) {
   return (
     <>
       {editor.getExtension(FormattingToolbarExtension) &&
-        props.formattingToolbar !== false &&
-        (isTouchDevice() ? (
-          <MobileFormattingToolbarController />
-        ) : (
+        props.formattingToolbar !== false && (
           <FormattingToolbarController
             portalElement={formattingToolbarPortal}
           />
-        ))}
+        )}
       {editor.getExtension(LinkToolbarExtension) &&
         props.linkToolbar !== false && (
           <LinkToolbarController portalElement={linkToolbarPortal} />

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -42,6 +42,7 @@ export * from "./components/FormattingToolbar/DefaultButtons/TableCellMergeButto
 export * from "./components/FormattingToolbar/DefaultButtons/TextAlignButton.js";
 export * from "./components/FormattingToolbar/DefaultSelects/BlockTypeSelect.js";
 export * from "./components/FormattingToolbar/FormattingToolbar.js";
+export * from "./components/FormattingToolbar/DesktopFormattingToolbarController.js";
 export * from "./components/FormattingToolbar/FormattingToolbarController.js";
 export * from "./components/FormattingToolbar/MobileFormattingToolbarController.js";
 export * from "./editor/PortalContext.js";