From 084592340e46889d8358c8c05d3d3dfd343bfdfe Mon Sep 17 00:00:00 2001
From: rlmattax <rlmattax@users.noreply.github.com>
Date: Fri, 7 Nov 2025 23:56:56 -0500
Subject: [PATCH] Add middleware prop to FormattingToolbarController for mobile
 customization

This change adds an optional middleware prop to FormattingToolbarController,
allowing developers to customize the Floating UI middleware for positioning
the formatting toolbar.

Benefits:
- Enables mobile-friendly toolbar centering
- Maintains backward compatibility (defaults to existing middleware)
- Provides clear, explicit API for positioning customization
- Works alongside existing floatingOptions.middleware

Example use case: On mobile devices, the toolbar can be centered horizontally
instead of following the text selection position, improving accessibility
when the toolbar wraps to multiple rows.
---
 .../FormattingToolbar/FormattingToolbarController.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx b/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
index 6ce960d035..e7f3350487 100644
--- a/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
+++ b/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
@@ -4,7 +4,7 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
-import { UseFloatingOptions, flip, offset, shift } from "@floating-ui/react";
+import { Middleware, UseFloatingOptions, flip, offset, shift } from "@floating-ui/react";
 import { isEventTargetWithin } from "@floating-ui/react/utils";
 import { FC, useMemo, useRef, useState } from "react";
 
@@ -34,6 +34,13 @@ const textAlignmentToPlacement = (
 export const FormattingToolbarController = (props: {
   formattingToolbar?: FC<FormattingToolbarProps>;
   floatingOptions?: Partial<UseFloatingOptions>;
+  /**
+   * Custom Floating UI middleware for positioning the toolbar.
+   * If not provided, defaults to [offset(10), shift(), flip()].
+   * Useful for customizing toolbar behavior on mobile devices.
+   * Can also be provided via floatingOptions.middleware.
+   */
+  middleware?: Middleware[];
 }) => {
   const divRef = useRef<HTMLDivElement>(null);
 
@@ -81,7 +88,7 @@ export const FormattingToolbarController = (props: {
     3000,
     {
       placement,
-      middleware: [offset(10), shift(), flip()],
+      middleware: props.middleware || props.floatingOptions?.middleware || [offset(10), shift(), flip()],
       onOpenChange: (open, _event) => {
         // console.log("change", event);
         if (!open) {