mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-24 18:02:47 +08:00
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-后浮动在下方)   
This commit is contained in:
@@ -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)`;
|
||||
|
||||
Reference in New Issue
Block a user