diff --git a/src/components/notes/MarkdownToolbar.tsx b/src/components/notes/MarkdownToolbar.tsx index 7b9a57c..e9babc4 100644 --- a/src/components/notes/MarkdownToolbar.tsx +++ b/src/components/notes/MarkdownToolbar.tsx @@ -21,28 +21,55 @@ export const MarkdownToolbar: React.FC = ({ const [showHeaderDropdown, setShowHeaderDropdown] = useState(false); const dispatch = useAppDispatch(); const dropdownRef = useRef(null); + const buttonRef = useRef(null); + const menuRef = useRef(null); const containerRef = useRef(null); const [isDragging, setIsDragging] = useState(false); const [startX, setStartX] = useState(0); const [scrollLeft, setScrollLeft] = useState(0); + const [menuPosition, setMenuPosition] = useState<{ top: number; left: number } | null>(null); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( dropdownRef.current && - !dropdownRef.current.contains(event.target as Node) + !dropdownRef.current.contains(event.target as Node) && + menuRef.current && + !menuRef.current.contains(event.target as Node) ) { setShowHeaderDropdown(false); + setMenuPosition(null); + } + }; + + const updateMenuPosition = () => { + if (buttonRef.current && showHeaderDropdown) { + const rect = buttonRef.current.getBoundingClientRect(); + setMenuPosition({ + top: rect.bottom + window.scrollY + 2, + left: rect.left + window.scrollX, + }); } }; if (showHeaderDropdown) { - document.addEventListener("mousedown", handleClickOutside); - } + updateMenuPosition(); + // Используем небольшой таймаут, чтобы не перехватить клик на кнопке + const timeoutId = setTimeout(() => { + document.addEventListener("mousedown", handleClickOutside); + window.addEventListener("resize", updateMenuPosition); + window.addEventListener("scroll", updateMenuPosition); + }, 100); - return () => { - document.removeEventListener("mousedown", handleClickOutside); - }; + return () => { + clearTimeout(timeoutId); + document.removeEventListener("mousedown", handleClickOutside); + window.removeEventListener("resize", updateMenuPosition); + window.removeEventListener("scroll", updateMenuPosition); + }; + } else { + setMenuPosition(null); + } }, [showHeaderDropdown]); const handleMouseDown = (e: React.MouseEvent) => { @@ -118,8 +145,15 @@ export const MarkdownToolbar: React.FC = ({
- {showHeaderDropdown && ( -
+ {showHeaderDropdown && menuPosition && ( +
{[1, 2, 3, 4, 5].map((level) => (