fix(editor): should shift toolbar to keep in view when selected area exceeds view (#10642)

Closes: [BS-2757](https://linear.app/affine-design/issue/BS-2757/体验优化：pageedgeless-下，有超长选区时，toolbar-flip-后浮动在下方)

![Screenshot 2025-03-06 at 10.50.39.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/8ypiIKZXudF5a0tIgIzf/e92c586c-4bf0-4196-b2f5-ffaa09adcf14.png)

![Screenshot 2025-03-06 at 10.52.22.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/8ypiIKZXudF5a0tIgIzf/c24204df-5249-4a22-bde8-90cb8fa368c9.png)

![Screenshot 2025-03-06 at 10.50.58.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/8ypiIKZXudF5a0tIgIzf/22746460-5bb4-4f65-b96c-cbac7f189bdb.png)

blocksuite/affine/widget-toolbar/src/utils.ts

@@ -21,7 +21,9 @@ import {
   autoUpdate,
   computePosition,
   flip,
+  hide,
   inline,
+  limitShift,
   offset,
   shift,
 } from '@floating-ui/dom';
@@ -62,7 +64,22 @@ export function autoUpdatePosition(
 
     const { x, y } = await computePosition(referenceElement, toolbar, {
       placement,
-      middleware: [offset(10), inline(), shift({ padding: 6 }), flip()],
+      middleware: [
+        offset(10),
+        inline(),
+        shift(state => ({
+          padding: {
+            top: 10,
+            right: 10,
+            bottom: 150,
+            left: 10,
+          },
+          crossAxis: state.placement.includes('bottom'),
+          limiter: limitShift(),
+        })),
+        flip({ padding: 10 }),
+        hide(),
+      ],
     });
 
     toolbar.style.transform = `translate3d(${x}px, ${y}px, 0)`;

blocksuite/tests-legacy/e2e/format-bar.spec.ts

@@ -123,7 +123,7 @@ test('should format quick bar show when select text by keyboard', async ({
     throw new Error("formatBar doesn't exist");
   }
   let selectionRect = await getSelectionRect(page);
-  assertAlmostEqual(formatBarBox.x - selectionRect.x, -107, 3);
+  assertAlmostEqual(formatBarBox.x - selectionRect.x, -103, 3);
   assertAlmostEqual(
     formatBarBox.y + formatBarBox.height - selectionRect.top,
     -10,
@@ -150,7 +150,7 @@ test('should format quick bar show when select text by keyboard', async ({
   // The x position of the format quick bar depends on the font size
   // so there are slight differences in different environments
   selectionRect = await getSelectionRect(page);
-  assertAlmostEqual(formatBarBox.x - selectionRect.x, -107, 3);
+  assertAlmostEqual(formatBarBox.x - selectionRect.x, -103, 3);
   assertAlmostEqual(
     formatBarBox.y + formatBarBox.height - selectionRect.top,
     -10,