dev day #67

DOCS/ADMIN_TROUBLESHOOTING.md

@@ -371,6 +371,43 @@ GET http://localhost:3000/api/v1/admin/cache/list 404
 GET http://localhost:8080/api/v1/admin/cache/list 200
 ```
 
+### 14. Rich Text Editor Not Visible
+
+**Problem:**
+The Quill rich text editor appears blank or invisible in articles, activities, or other content forms. The editor toolbar and text area don't show up.
+
+**Root Cause:**
+Quill CSS files weren't loading due to component-level imports not working properly with CRACO/Create React App build setup.
+
+**Solution:**
+The CSS imports have been moved to `frontend/src/index.tsx` to load globally:
+
+```typescript
+// Quill editor styles (MUST be imported globally)
+import 'react-quill/dist/quill.snow.css';
+import 'react-image-crop/dist/ReactCrop.css';
+import './styles/custom-editor.css';
+```
+
+**After applying this fix:**
+1. **Restart the frontend dev server** (required for CSS changes):
+   ```bash
+   cd frontend
+   npm start
+   ```
+
+2. Clear browser cache or do a hard refresh (`Ctrl+Shift+R` / `Cmd+Shift+R`)
+
+3. Verify the editor is now visible with:
+   - Toolbar buttons (bold, italic, headers, etc.)
+   - White text area with proper styling
+   - Image upload and formatting controls
+
+**Technical Note:**
+Component-level CSS imports (`import './style.css'` inside a component) don't always process correctly with webpack/CRACO. Critical third-party CSS like Quill must be imported at the app entry point.
+
+---
+
 ### Still Stuck?
 1. Verify all environment variables are set correctly
 2. Restart both frontend and backend