mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-05 03:02:56 +00:00
dev day #80
This commit is contained in:
Tomas Dvorak
@@ -0,0 +1,166 @@
|
||||
# Rich Text Editor Visibility Issue - Diagnostic & Fix
|
||||
|
||||
## Problem
|
||||
The rich text editor (React Quill) is not visible in admin pages.
|
||||
|
||||
## Root Cause Analysis
|
||||
|
||||
### Possible Causes:
|
||||
1. **Quill CSS not loading** - The `quill.snow.css` might not be bundled correctly
|
||||
2. **Height/size issue** - The editor container might have zero height
|
||||
3. **Z-index conflict** - Other elements might be covering the editor
|
||||
4. **React Quill initialization failure** - The component might be failing to mount
|
||||
|
||||
## Quick Diagnostic Steps
|
||||
|
||||
### 1. Check Browser Console
|
||||
Open browser dev tools → Console tab and look for:
|
||||
- Any errors related to "Quill" or "react-quill"
|
||||
- CSS loading errors
|
||||
- JavaScript errors in CustomRichEditor component
|
||||
|
||||
### 2. Inspect DOM Elements
|
||||
Open browser dev tools → Elements tab and search for:
|
||||
```html
|
||||
<div class="ql-toolbar">
|
||||
<div class="ql-container">
|
||||
<div class="ql-editor">
|
||||
```
|
||||
|
||||
If these elements exist but aren't visible, it's a CSS issue.
|
||||
If they don't exist at all, it's a component mounting issue.
|
||||
|
||||
### 3. Check Computed Styles
|
||||
If elements exist, check computed styles for:
|
||||
- `height: 0` or `min-height: 0`
|
||||
- `display: none`
|
||||
- `visibility: hidden`
|
||||
- `opacity: 0`
|
||||
|
||||
## Solutions
|
||||
|
||||
### Solution 1: Ensure Quill CSS Loads (Most Likely)
|
||||
|
||||
The CSS import in `index.tsx` might not be sufficient. Try adding this to ensure Quill styles load:
|
||||
|
||||
**File: `frontend/src/styles/ensure-quill.css`** (Create new file)
|
||||
```css
|
||||
/* Force load Quill styles if they're not loading */
|
||||
@import 'quill/dist/quill.snow.css';
|
||||
|
||||
/* Ensure Quill editor has minimum height */
|
||||
.ql-container {
|
||||
min-height: 200px !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.ql-editor {
|
||||
min-height: 200px !important;
|
||||
}
|
||||
|
||||
.ql-toolbar {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
```
|
||||
|
||||
Then import in `index.tsx` AFTER the react-quill import:
|
||||
```typescript
|
||||
import 'react-quill/dist/quill.snow.css';
|
||||
import './styles/ensure-quill.css'; // ADD THIS LINE
|
||||
```
|
||||
|
||||
### Solution 2: Add Explicit Height to Container
|
||||
|
||||
In `CustomRichEditor.tsx`, ensure the Box wrapper has explicit sizing:
|
||||
|
||||
Around line 1052-1058, modify the Box component:
|
||||
```tsx
|
||||
<Box
|
||||
position="relative"
|
||||
borderWidth="1px"
|
||||
borderColor={borderColor}
|
||||
borderRadius="md"
|
||||
overflow="hidden"
|
||||
bg={bgColor}
|
||||
minHeight={height} // ADD THIS
|
||||
height="auto" // ADD THIS
|
||||
sx={{
|
||||
// ... rest of sx
|
||||
}}
|
||||
>
|
||||
```
|
||||
|
||||
### Solution 3: Force Quill Editor Visibility
|
||||
|
||||
Add this CSS to `custom-editor.css` at the top:
|
||||
|
||||
```css
|
||||
/* FORCE QUILL VISIBILITY */
|
||||
.ql-toolbar.ql-snow,
|
||||
.ql-container.ql-snow {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
min-height: 40px !important;
|
||||
}
|
||||
|
||||
.ql-editor {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
min-height: 200px !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Solution 4: Check React Strict Mode Issue
|
||||
|
||||
React 18 + Strict Mode can cause issues with Quill. Temporarily disable StrictMode to test:
|
||||
|
||||
In `index.tsx`, temporarily change:
|
||||
```tsx
|
||||
// From:
|
||||
<React.StrictMode>
|
||||
<ErrorBoundary>
|
||||
...
|
||||
</ErrorBoundary>
|
||||
</React.StrictMode>
|
||||
|
||||
// To:
|
||||
<ErrorBoundary>
|
||||
...
|
||||
</ErrorBoundary>
|
||||
```
|
||||
|
||||
## Testing Steps
|
||||
|
||||
1. **Clear browser cache** and hard refresh (Ctrl+Shift+R or Cmd+Shift+R)
|
||||
2. **Rebuild frontend**:
|
||||
```bash
|
||||
cd frontend
|
||||
npm run build
|
||||
```
|
||||
3. Open admin page with rich text editor (e.g., `/admin/about` or `/admin/articles`)
|
||||
4. Check if toolbar and editor area are now visible
|
||||
|
||||
## Expected Result
|
||||
|
||||
You should see:
|
||||
- A toolbar with formatting buttons (Bold, Italic, Headers, etc.)
|
||||
- An editing area below the toolbar with placeholder text
|
||||
- The ability to type and format text
|
||||
|
||||
## Additional Debug Info
|
||||
|
||||
If none of the above works, gather this info:
|
||||
1. Browser console errors (screenshot)
|
||||
2. Network tab showing if `quill.snow.css` loads
|
||||
3. Computed styles of `.ql-container` and `.ql-editor`
|
||||
4. React DevTools showing if `ReactQuill` component exists in tree
|
||||
|
||||
## Common Mistakes to Avoid
|
||||
|
||||
- Don't remove the react-quill import from package.json
|
||||
- Don't modify CustomRichEditor extensively - it's complex
|
||||
- Ensure you're viewing the admin pages while logged in
|
||||
- Check that the pages are actually using RichTextEditor component
|
||||
Reference in New Issue
Block a user