handleColorChange(color, 'main')}
+ label={t('annotation.changeColor', 'Change Colour')}
+ />
+
+
+ );
+ }
+ };
+
+ // Calculate position for portal based on wrapper element
+ useEffect(() => {
+ if (!selected || !annotation || !wrapperRef.current) {
+ setMenuPosition(null);
+ return;
+ }
+
+ const updatePosition = () => {
+ const wrapper = wrapperRef.current;
+ if (!wrapper) {
+ setMenuPosition(null);
+ return;
+ }
+
+ const wrapperRect = wrapper.getBoundingClientRect();
+ // Position menu below the wrapper, centered
+ // Use getBoundingClientRect which gives viewport-relative coordinates
+ // Since we're using fixed positioning in the portal, we don't need to add scroll offsets
+ setMenuPosition({
+ top: wrapperRect.bottom + 8,
+ left: wrapperRect.left + wrapperRect.width / 2,
+ });
+ };
+
+ updatePosition();
+
+ // Update position on scroll/resize
+ window.addEventListener('scroll', updatePosition, true);
+ window.addEventListener('resize', updatePosition);
+
+ return () => {
+ window.removeEventListener('scroll', updatePosition, true);
+ window.removeEventListener('resize', updatePosition);
+ };
+ }, [selected, annotation]);
+
+ // Early return AFTER all hooks have been called
+ if (!selected || !annotation) return null;
+
+ const menuContent = menuPosition ? (
+
+
+ {renderButtons()}
+
+
+ ) : null;
+
+ const textEditorOverlay = isTextEditorOpen && textBoxPosition ? (
+
+