dev day #67

2026-06-05 03:02:56 +00:00 · 2025-10-21 15:02:05 +02:00
parent 68e69e00cc
commit 63700eedb2
103 changed files with 12442 additions and 446 deletions
@@ -0,0 +1,117 @@
+# 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:
+1. Properly measure dimensions for the editor container
+2. Render the toolbar correctly
+3. 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
+
+1. **Added Container Ref**
+   - Added `containerRef` to track the editor's container element
+   - Attached ref to the Box component wrapping ReactQuill
+
+2. **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)
+
+3. **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
+
+```typescript
+// 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
+1. Open Articles Admin Page
+2. Click "Nový článek" (New Article)
+3. Switch to "Obsah" tab
+4. Verify rich text editor toolbar is visible
+5. Verify editor area is visible and editable
+6. 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)