Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-25 02:13:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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)
This commit is contained in:
fundon
2025-03-06 07:48:04 +00:00
parent 91adc533a8
commit 8bfaa2502e
2 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
blocksuite/affine/widget-toolbar/src/utils.ts
View File

@@ -21,7 +21,9 @@ import {
autoUpdate, autoUpdate,
computePosition, computePosition,
flip, flip,
hide,
inline, inline,
limitShift,
offset, offset,
shift, shift,
} from '@floating-ui/dom'; } from '@floating-ui/dom';
@@ -62,7 +64,22 @@ export function autoUpdatePosition(
const { x, y } = await computePosition(referenceElement, toolbar, { const { x, y } = await computePosition(referenceElement, toolbar, {
placement, 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)`; toolbar.style.transform = `translate3d(${x}px, ${y}px, 0)`;

4
blocksuite/tests-legacy/e2e/format-bar.spec.ts
View File

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