Rich Text Editor - Tab Visibility Fix

Issue

The rich text editor did not work in the admin blog creation page when placed inside a hidden tab panel. The editor worked correctly in the activity page where it was directly visible in the modal body.

Root Cause

When Quill editor initializes inside a hidden element (Chakra UI's TabPanel with display: none), it cannot:

Properly measure dimensions for the editor container
Render the toolbar correctly
Set up the editor area with proper visibility

This is a common issue with WYSIWYG editors in tabbed interfaces.

Solution Applied

File Modified

/frontend/src/components/common/CustomRichEditor.tsx

Changes Made

Added Container Ref
- Added containerRef to track the editor's container element
- Attached ref to the Box component wrapping ReactQuill
Implemented Visibility Detection
- Added IntersectionObserver to detect when the editor becomes visible
- Observer watches for when the container enters the viewport or becomes visible (e.g., tab switch)
Forced Refresh on Visibility
- When editor becomes visible, force Quill to refresh:
  - Set toolbar display to flex and visibility to visible
  - Set editor container display to block and visibility to visible
  - Trigger after 100ms delay to ensure DOM is ready

Code Details

// Added containerRef
const containerRef = useRef<HTMLDivElement | null>(null);

// Visibility detection effect
useEffect(() => {
  if (!containerRef.current) return;
  
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting && entry.intersectionRatio > 0) {
          // Editor became visible - force Quill to refresh
          setTimeout(() => {
            const editor = quillRef.current?.getEditor();
            if (editor && editor.root) {
              try {
                editor.root.style.display = 'block';
                const toolbar = editor.root.previousSibling as HTMLElement;
                if (toolbar && toolbar.classList.contains('ql-toolbar')) {
                  toolbar.style.display = 'flex';
                  toolbar.style.visibility = 'visible';
                  toolbar.style.opacity = '1';
                }
                if (editor.container) {
                  editor.container.style.display = 'block';
                  editor.container.style.visibility = 'visible';
                  editor.container.style.opacity = '1';
                }
              } catch (err) {
                console.warn('Failed to refresh Quill editor:', err);
              }
            }
          }, 100);
        }
      });
    },
    {
      threshold: 0.1,
      rootMargin: '50px'
    }
  );
  
  observer.observe(containerRef.current);
  
  return () => {
    observer.disconnect();
  };
}, []);

Affected Pages

✅ Now Working

Articles Admin Page (/admin/articles)
- Editor in "Obsah" tab (3rd tab) now works correctly
- Toolbar and editor area properly visible when tab is switched

✅ Still Working

Activity Admin Page (/admin/activities)
- Editor in direct modal body continues to work
- No regression introduced

Testing

Open Articles Admin Page
Click "Nový článek" (New Article)
Switch to "Obsah" tab
Verify rich text editor toolbar is visible
Verify editor area is visible and editable
Test image upload, formatting, and other features

Technical Notes

IntersectionObserver has 10% threshold and 50px rootMargin for early detection
100ms delay ensures DOM is fully rendered before forcing visibility
Solution is non-invasive and doesn't affect editor performance
Works with all tab-based layouts (Chakra UI Tabs, Material UI Tabs, etc.)

Status

✅ FIXED - Rich text editor now works correctly in both:

Direct modal placements (Activity page)
Hidden tab panels (Articles admin page)

3.9 KiB Raw Permalink Blame History