From 8bfaa2502ee919dec5f36c279ad3fc9dc8f90ffa Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Thu, 6 Mar 2025 07:48:04 +0000
Subject: [PATCH] fix(editor): should shift toolbar to keep in view when
 selected area exceeds view (#10642)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 19 ++++++++++++++++++-
 .../tests-legacy/e2e/format-bar.spec.ts       |  4 ++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/blocksuite/affine/widget-toolbar/src/utils.ts b/blocksuite/affine/widget-toolbar/src/utils.ts
index bc93f8cac..9978e9dc0 100644
--- a/blocksuite/affine/widget-toolbar/src/utils.ts
+++ b/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)`;
diff --git a/blocksuite/tests-legacy/e2e/format-bar.spec.ts b/blocksuite/tests-legacy/e2e/format-bar.spec.ts
index 498b4403d..7d996272d 100644
--- a/blocksuite/tests-legacy/e2e/format-bar.spec.ts
+++ b/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,