MyClub/DOCS/RICHTEXT_EDITOR_VISIBILITY_FIX.md

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:

<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)

/* 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:

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:

<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:

/* 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:

// 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:

   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