zlei6/ragflow
1
0
Fork 0
mirror of https://github.com/infiniflow/ragflow.git synced 2026-08-13 04:13:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(floating-selection-toolbar): adjust dropdown direction based on available space (#18053)

Browse Source
This commit is contained in:
chanx
2026-08-11 13:31:42 +08:00
committed by GitHub
parent 11c9649a6c
commit e0d199ea7b
1 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/lib/editor/plugins/floating-selection-toolbar.tsx
View File

@@ -189,6 +189,26 @@ export default function FloatingSelectionToolbar() {
];
const [showHeadingMenu, setShowHeadingMenu] = useState(false);
// Dropdown open direction: true = open upward when not enough space below
const [headingMenuUp, setHeadingMenuUp] = useState(false);
const [codeMenuUp, setCodeMenuUp] = useState(false);
// Recompute dropdown direction whenever a menu opens, based on toolbar's
// position relative to the viewport. If there's not enough space below the
// toolbar to fit the menu, open it upward instead.
useEffect(() => {
if (!barRef.current) return;
const rect = barRef.current.getBoundingClientRect();
const spaceBelow = window.innerHeight - rect.bottom;
// Heading menu: 6 items (~26px each) + padding
if (showHeadingMenu) {
setHeadingMenuUp(spaceBelow < 6 * 26 + 12);
}
if (showCodeLang) {
// Code menu already caps at maxHeight 200
setCodeMenuUp(spaceBelow < 220);
}
}, [showHeadingMenu, showCodeLang]);
if (!show) return null;
@@ -260,9 +280,10 @@ export default function FloatingSelectionToolbar() {
<div
style={{
position: 'absolute',
top: '100%',
left: 0,
marginTop: 4,
...(headingMenuUp
? { bottom: '100%', marginBottom: 4 }
: { top: '100%', marginTop: 4 }),
background: 'var(--nim-bg)',
border: '1px solid var(--nim-border)',
borderRadius: 6,
@@ -339,10 +360,11 @@ export default function FloatingSelectionToolbar() {
<div
style={{
position: 'absolute',
top: '100%',
left: '50%',
transform: 'translateX(-50%)',
marginTop: 4,
...(codeMenuUp
? { bottom: '100%', marginBottom: 4 }
: { top: '100%', marginTop: 4 }),
background: 'var(--nim-bg)',
border: '1px solid var(--nim-border)',
borderRadius: 6,