dewedev/EDITOR_CHECKLIST.md

Editor Tool Consistency Checklist

Quick reference for ensuring your new editor tool follows all consistency patterns.

✅ Input Section

Tab Structure

• 4 tabs: Create New, URL, Paste, Open
• Icons: Plus, Globe, FileText, Upload
• Active tab styling: bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500

Create New Tab

• Grid layout with 2 buttons (Start Empty, Load Sample)
• Dashed border buttons with icons
• Blue tip box at bottom

URL Tab ⚠️ CRITICAL

• <div className="flex gap-2"> wrapper
• Input in <div className="relative flex-1">
• Button INLINE on the right (not below!)
• Button text: "Fetch Data" or "Fetching..."
• Enter key triggers fetch
• Helper text below

Paste Tab

• CodeMirrorEditor component
• Collapse after successful parse
• Collapsed state shows summary with "Edit Input ▼" button
• Error display in red box
• Parse button on bottom-right
• Button disabled when invalid

Open Tab ⚠️ CRITICAL

• <input className="tool-input" /> (not custom styling!)
• Auto-load on file selection (no button needed!)
• Green privacy notice below

---

✅ Main Editor Section

• Conditional render: {(activeTab !== 'create' || createNewCompleted) && ...}
• White card with border
• Header with icon and title
• Content area with padding

Fullscreen (Optional)

• z-[99999] when fullscreen
• !m-0 and marginTop: "0 !important" to override spacing

---

✅ Export Section

• Collapsible by default (exportExpanded state)
• Clickable header with hover effect
• ChevronUp/ChevronDown icons
• Summary info in header
• Content only renders when expanded

---

✅ Usage Tips

• Collapsible by default (usageTipsExpanded state)
• Header: "💡 Usage Tips"
• Clickable header with hover effect
• ChevronUp/ChevronDown icons
• Organized by categories:
  • 📝 Input Methods
  • ✏️ Editing Features (editor-specific)
  • 📤 Export Options
  • 💾 Data Privacy

---

✅ Data Loss Prevention (CRITICAL!)

Confirmation Modal

• Shows when user has data and tries to switch tabs
• Shows when user clicks Start Empty/Load Sample with existing data
• Amber header with AlertTriangle icon
• Lists specific data user will lose (not generic)
• Blue tip box suggesting to save first
• "Cancel" button (gray)
• "Switch & Clear Data" button (amber with icon)
• z-50 to appear above everything

Logic

• hasUserData() function implemented
• hasModifiedData() function implemented
• handleTabChange() checks for data before switching
• showInputChangeModal state variable
• pendingTabChange state variable
• Modal component created as separate component
• onConfirm clears data and switches tab
• onCancel closes modal without action

---

✅ State Variables

// Required states
const [activeTab, setActiveTab] = useState('create');
const [createNewCompleted, setCreateNewCompleted] = useState(false);
const [inputText, setInputText] = useState('');
const [url, setUrl] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
const [pasteCollapsed, setPasteCollapsed] = useState(false);
const [pasteDataSummary, setPasteDataSummary] = useState(null);
const [exportExpanded, setExportExpanded] = useState(false);
const [usageTipsExpanded, setUsageTipsExpanded] = useState(false);
const [showInputChangeModal, setShowInputChangeModal] = useState(false);
const [pendingTabChange, setPendingTabChange] = useState(null);
const fileInputRef = useRef(null);

---

✅ Error Handling

• Parse errors keep input expanded
• Parse errors show in red box with AlertTriangle icon
• Valid data collapses input and shows editor
• Error state: setPasteCollapsed(false)
• Success state: setPasteCollapsed(true)

---

✅ Imports

import {
  Plus, Globe, FileText, Upload,      // Input tabs
  Download, Edit3,                     // Editor/Export
  AlertTriangle,                       // Errors
  ChevronUp, ChevronDown,             // Collapse indicators
} from 'lucide-react';

import ToolLayout from '../components/ToolLayout';
import CodeMirrorEditor from '../components/CodeMirrorEditor';

---

✅ Visual Consistency

Colors

• Primary action: bg-blue-600 hover:bg-blue-700
• Disabled: disabled:bg-gray-400
• Success: bg-green-50 dark:bg-green-900/20
• Error: bg-red-50 dark:bg-red-900/20
• Info: bg-blue-50 dark:bg-blue-900/20

Spacing

• Section spacing: mt-6
• Internal spacing: space-y-3
• Padding: p-4 or px-4 py-3

Typography

• Headers: text-lg font-semibold
• Body: text-sm
• Helper text: text-xs

---

✅ Behavior

• Tab change confirmation when data exists
• File input auto-loads (no button)
• Paste requires button click
• URL supports Enter key
• Collapsible sections start collapsed
• Error messages are specific and helpful

---

⚠️ Common Mistakes to Avoid

1. ❌ URL button below input → ✅ Button inline on right
2. ❌ Custom file input styling → ✅ Use tool-input class
3. ❌ File input with parse button → ✅ Auto-load on selection
4. ❌ Always-visible usage tips → ✅ Collapsible by default
5. ❌ Always-visible export → ✅ Collapsible by default
6. ❌ Parse button on left → ✅ Parse button on right
7. ❌ No error handling → ✅ Show errors, keep input expanded

---

🧪 Testing Checklist

• Create New: Both buttons work
• URL: Inline button, Enter key works
• Paste: Valid data collapses, invalid shows error
• Open: Auto-loads file
• Export: Collapses/expands correctly
• Usage Tips: Collapses/expands correctly
• Tab switching: Confirmation modal works
• Dark mode: All colors work
• Mobile: Responsive layout
• Errors: Specific messages, input stays expanded

---

📚 Reference Examples

• Object Editor: /src/pages/ObjectEditor.js
• Table Editor: /src/pages/TableEditor.js
• Invoice Editor: /src/pages/InvoiceEditor.js

---

🚀 Quick Start

1. Copy structure from existing editor
2. Replace editor-specific logic
3. Update Usage Tips content
4. Test all input methods
5. Test collapse/expand behavior
6. Test error handling
7. Test dark mode
8. Test mobile view

Follow this checklist and your editor will be perfectly consistent! ✅