From f60c1d16c8cbf3f761a9ce978c82f84ba39b0481 Mon Sep 17 00:00:00 2001 From: dwindown Date: Wed, 15 Oct 2025 00:12:54 +0700 Subject: [PATCH] feat: comprehensive editor UX refinement with collapsible sections and data loss prevention Major improvements to Object Editor, Table Editor, and Invoice Editor: ## UX Enhancements: - Made export sections collapsible across all editors to reduce page height - Added comprehensive, collapsible usage tips with eye-catching design - Implemented consistent input method patterns (file auto-load, inline URL buttons) - Paste sections now collapse after successful parsing with data summaries ## Data Loss Prevention: - Added confirmation modals when switching input methods with existing data - Amber-themed warning design with specific data summaries - Suggests saving before proceeding with destructive actions - Prevents accidental data loss across all editor tools ## Consistency Improvements: - Standardized file input styling with 'tool-input' class - URL fetch buttons now inline (not below input) across all editors - Parse buttons positioned consistently on bottom-right - Auto-load behavior for file inputs matching across editors ## Bug Fixes: - Fixed Table Editor cell text overflow with proper truncation - Fixed Object Editor file input to auto-load content - Removed unnecessary parse buttons and checkboxes - Fixed Invoice Editor URL form layout ## Documentation: - Created EDITOR_TOOL_GUIDE.md with comprehensive patterns - Created EDITOR_CHECKLIST.md for quick reference - Created PROJECT_ROADMAP.md with future plans - Created TODO.md with detailed task lists - Documented data loss prevention patterns - Added code examples and best practices All editors now follow consistent UX patterns with improved user experience and data protection. --- EDITOR_CHECKLIST.md | 226 ++++++++ EDITOR_TOOL_GUIDE.md | 748 ++++++++++++++++++++++++ PROJECT_ROADMAP.md | 481 ++++++++++++++++ TODO.md | 889 +++++++++++++++++++++++++++++ public/data/commits.json | 47 ++ src/components/CodeMirrorEditor.js | 2 +- src/components/MindmapView.js | 2 +- src/components/StructuredEditor.js | 265 ++++++++- src/pages/InvoiceEditor.js | 269 ++++++--- src/pages/ObjectEditor.js | 186 ++++-- src/pages/TableEditor.js | 361 +++++++++--- 11 files changed, 3222 insertions(+), 254 deletions(-) create mode 100644 EDITOR_CHECKLIST.md create mode 100644 EDITOR_TOOL_GUIDE.md create mode 100644 PROJECT_ROADMAP.md create mode 100644 TODO.md diff --git a/EDITOR_CHECKLIST.md b/EDITOR_CHECKLIST.md new file mode 100644 index 00000000..8911b5c8 --- /dev/null +++ b/EDITOR_CHECKLIST.md @@ -0,0 +1,226 @@ +# 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 +- [ ] `
` wrapper +- [ ] Input in `
` +- [ ] 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 +- [ ] `` (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 + +```jsx +// 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 + +```jsx +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!** ✅ diff --git a/EDITOR_TOOL_GUIDE.md b/EDITOR_TOOL_GUIDE.md new file mode 100644 index 00000000..8cfc1dd4 --- /dev/null +++ b/EDITOR_TOOL_GUIDE.md @@ -0,0 +1,748 @@ +# Editor Tool Building Guide + +This guide ensures consistency across all editor tools in the Developer Tools application. Follow these patterns when creating new editor tools. + +## Table of Contents +1. [Input Section Patterns](#input-section-patterns) +2. [Main Editor Section](#main-editor-section) +3. [Export/Output Section](#export-output-section) +4. [Usage Tips Section](#usage-tips-section) +5. [State Management](#state-management) +6. [Error Handling](#error-handling) +7. [Complete Example](#complete-example) + +--- + +## Input Section Patterns + +### Required Tabs +All editor tools must have these 4 input tabs: +1. **Create New** - Start empty or load sample data +2. **URL** - Fetch data from API endpoints +3. **Paste** - Paste data directly +4. **Open** - Upload files + +### Tab Structure +```jsx +
+ + + + +
+``` + +### Create New Tab +```jsx +{activeTab === 'create' && ( +
+
+ {/* Start Empty Button */} + + + {/* Load Sample Button */} + +
+ + {/* Tip */} +
+

+ 💡 Tip: You can always import data later using the URL, Paste, or Open tabs. +

+
+
+)} +``` + +### URL Tab (CONSISTENT LAYOUT) +**IMPORTANT:** Button must be INLINE on the right, not below! + +```jsx +{activeTab === 'url' && ( +
+
+
+ setUrl(e.target.value)} + placeholder="https://api.telegram.org/bot/getMe" + className="tool-input w-full" + onKeyPress={(e) => e.key === 'Enter' && handleFetchData()} + /> +
+ +
+

+ Enter any URL that returns JSON data. Examples: Telegram Bot API, JSONPlaceholder, GitHub API, etc. +

+
+)} +``` + +### Paste Tab (WITH COLLAPSE) +```jsx +{activeTab === 'paste' && ( + pasteCollapsed ? ( + // Collapsed State +
+
+ + ✓ Data loaded: {pasteDataSummary.format} ({pasteDataSummary.size.toLocaleString()} chars) + + +
+
+ ) : ( + // Expanded State +
+
+ +
+ {error && ( +
+

+ Invalid Data: {error} +

+
+ )} +
+
+ Auto-detects format +
+ +
+
+ ) +)} +``` + +### Open Tab (CONSISTENT WITH TABLE EDITOR) +**IMPORTANT:** Use `tool-input` class and auto-load on file selection! + +```jsx +{activeTab === 'open' && ( +
+ +
+

+ 🔒 Privacy: Your data stays in your browser. We don't store or upload anything - just help you open, edit, and export your files locally. +

+
+
+)} +``` + +### Parse Button Behavior +- **Valid data**: Collapse input, show summary, display editor +- **Invalid data**: Show error, keep input expanded, hide editor +- **Button disabled**: When no data or invalid format + +--- + +## Main Editor Section + +### Structure +```jsx +{(activeTab !== 'create' || createNewCompleted) && ( +
+ {/* Editor Header */} +
+
+

+ + Your Editor Name +

+ {/* Optional: Settings or Actions */} +
+
+ + {/* Editor Content */} +
+ {/* Your editor implementation */} +
+
+)} +``` + +### Fullscreen Support (Optional) +If your editor supports fullscreen: +```jsx +const [isFullscreen, setIsFullscreen] = useState(false); + +
+``` + +--- + +## Export/Output Section + +### Collapsible Export (REQUIRED) +```jsx +{data && ( +
+ {/* Collapsible Header */} +
setExportExpanded(!exportExpanded)} + className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" + > +
+

+ + Export Results + {exportExpanded ? : } +

+
+ {/* Summary info */} +
+
+
+ + {/* Export Content - Collapsible */} + {exportExpanded && ( +
+ {/* Export tabs and content */} +
+ )} +
+)} +``` + +### Export Tabs Pattern +```jsx +
+ + {/* More export format tabs */} +
+``` + +--- + +## Usage Tips Section + +### Collapsible Usage Tips (REQUIRED) +```jsx +{/* Usage Tips */} +
+
setUsageTipsExpanded(!usageTipsExpanded)} + className="px-4 py-3 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors flex items-center justify-between" + > +

+ 💡 Usage Tips +

+ {usageTipsExpanded ? : } +
+ + {usageTipsExpanded && ( +
+
+

📝 Input Methods:

+
    +
  • Create New: Description
    • +
  • URL Import: Description
    • +
  • Paste Data: Description
    • +
  • Open Files: Description
    • +
+
+ +
+

✏️ Editing Features:

+
    + {/* Your editor-specific features */} +
+
+ +
+

📤 Export Options:

+
    + {/* Your export formats */} +
+
+ +
+

💾 Data Privacy:

+
    +
  • Local Processing: All data stays in your browser
    • +
  • No Upload: We don't store or transmit your data
    • +
  • Secure: Your information remains private
    • +
+
+
+ )} +
+``` + +--- + +## Data Loss Prevention (CRITICAL!) + +### Confirmation Modal for Tab Changes + +**IMPORTANT:** Always confirm before clearing user data when switching input methods! + +### When to Show Confirmation +- User has entered/loaded data +- User tries to switch to a different input tab +- User tries to use Create New buttons (Start Empty/Load Sample) + +### Implementation Pattern + +#### 1. Check if User Has Data +```jsx +const hasUserData = () => { + // Check if there's meaningful data + return Object.keys(editorData).length > 0; +}; + +const hasModifiedData = () => { + // Check if data has been modified from initial state + // Return false for empty or sample data + // Return true for user-entered data +}; +``` + +#### 2. Handle Tab Change with Confirmation +```jsx +const handleTabChange = (newTab) => { + if (hasModifiedData() && activeTab !== newTab) { + setPendingTabChange(newTab); + setShowInputChangeModal(true); + } else { + setActiveTab(newTab); + } +}; +``` + +#### 3. Confirmation Modal Component +```jsx +const InputChangeConfirmationModal = ({ + editorData, + currentMethod, + newMethod, + onConfirm, + onCancel +}) => { + const getMethodName = (method) => { + switch (method) { + case 'create': return 'Create New'; + case 'create_empty': return 'Start Empty'; + case 'create_sample': return 'Load Sample'; + case 'url': return 'URL Import'; + case 'paste': return 'Paste Data'; + case 'open': return 'File Upload'; + default: return method; + } + }; + + return ( +
+
+ {/* Header - Amber Warning */} +
+
+
+ +
+
+

+ Confirm Action +

+

+ {newMethod === 'create_empty' || newMethod === 'create_sample' + ? `Using ${getMethodName(newMethod)} will clear your current data.` + : `Switching from ${getMethodName(currentMethod)} to ${getMethodName(newMethod)} will clear your current data.` + } +

+
+
+
+ + {/* Body - Show Current Data Summary */} +
+
+

+ You currently have: +

+
    + {/* List current data items */} +
  • • [Data summary item 1]
    • +
  • • [Data summary item 2]
    • +
  • • [Data summary item 3]
    • +
+ + {/* Blue Tip Box */} +
+

+ Tip: Consider downloading your current data as JSON before proceeding to save your work. +

+
+
+
+ + {/* Footer - Action Buttons */} +
+ + +
+
+
+ ); +}; +``` + +#### 4. Usage in Component +```jsx +{/* Confirmation Modal */} +{showInputChangeModal && ( + { + clearAllData(); + setActiveTab(pendingTabChange); + setShowInputChangeModal(false); + setPendingTabChange(null); + }} + onCancel={() => { + setShowInputChangeModal(false); + setPendingTabChange(null); + }} + /> +)} +``` + +### Visual Design +- **Header**: Amber background with AlertTriangle icon +- **Body**: White/dark background with data summary +- **Tip Box**: Blue background with save suggestion +- **Footer**: Gray background with Cancel and Warning buttons +- **Warning Button**: Amber color with AlertTriangle icon + +### Key Points +1. **Always show** when user has meaningful data +2. **List specific data** user will lose (not generic message) +3. **Suggest saving** before proceeding (blue tip box) +4. **Clear button text** - "Switch & Clear Data" (not ambiguous) +5. **z-50** to appear above everything +6. **Amber theme** for warning (not red, not blue) + +--- + +## State Management + +### Required State Variables +```jsx +// Tab management +const [activeTab, setActiveTab] = useState('create'); +const [createNewCompleted, setCreateNewCompleted] = useState(false); + +// Input data +const [inputText, setInputText] = useState(''); +const [url, setUrl] = useState(''); +const [isLoading, setIsLoading] = useState(false); +const [error, setError] = useState(''); + +// Collapse states +const [pasteCollapsed, setPasteCollapsed] = useState(false); +const [pasteDataSummary, setPasteDataSummary] = useState(null); +const [exportExpanded, setExportExpanded] = useState(false); +const [usageTipsExpanded, setUsageTipsExpanded] = useState(false); + +// Confirmation modals +const [showInputChangeModal, setShowInputChangeModal] = useState(false); +const [pendingTabChange, setPendingTabChange] = useState(null); + +// Refs +const fileInputRef = useRef(null); + +// Your editor-specific state +const [editorData, setEditorData] = useState(null); +``` + +### Tab Change with Confirmation +```jsx +const handleTabChange = (newTab) => { + if (hasModifiedData() && activeTab !== newTab) { + setPendingTabChange(newTab); + setShowInputChangeModal(true); + } else { + setActiveTab(newTab); + } +}; + +const confirmInputChange = () => { + clearAllData(); + setActiveTab(pendingTabChange); + setShowInputChangeModal(false); + setPendingTabChange(null); +}; +``` + +--- + +## Error Handling + +### Parse Data with Error Handling +```jsx +const handleParseData = () => { + try { + const parsed = parseYourData(inputText); + + if (parsed.valid) { + setEditorData(parsed.data); + setError(''); + setCreateNewCompleted(true); + setPasteDataSummary({ + format: parsed.format, + size: inputText.length, + items: parsed.data.length + }); + setPasteCollapsed(true); + } else { + // Show error, keep input expanded + setError(parsed.error || 'Invalid data format'); + setPasteCollapsed(false); + } + } catch (err) { + setError(err.message || 'Failed to parse data'); + setPasteCollapsed(false); + } +}; +``` + +### Error Display +```jsx +{error && ( +
+
+ +

{error}

+
+
+)} +``` + +--- + +## Complete Example + +See existing editors for complete implementations: +- **Object Editor** (`/src/pages/ObjectEditor.js`) - Best for JSON/structured data +- **Table Editor** (`/src/pages/TableEditor.js`) - Best for tabular data +- **Invoice Editor** (`/src/pages/InvoiceEditor.js`) - Best for form-based editors + +--- + +## Checklist for New Editor Tools + +### Input Section +- [ ] All 4 tabs implemented (Create New, URL, Paste, Open) +- [ ] URL tab has inline button (not below) +- [ ] Open tab uses `tool-input` class +- [ ] Open tab auto-loads on file selection +- [ ] Paste tab has parse button on bottom-right +- [ ] Paste tab collapses after successful parse +- [ ] Error handling shows errors and keeps input expanded + +### Main Editor +- [ ] Only shows after data is loaded +- [ ] Has proper header with icon +- [ ] Implements your editor functionality +- [ ] Optional: Fullscreen support with proper z-index + +### Export Section +- [ ] Collapsible by default +- [ ] Header shows summary info +- [ ] Chevron icon indicates state +- [ ] Hover effect on header +- [ ] Export tabs if multiple formats + +### Usage Tips +- [ ] Collapsible by default +- [ ] 💡 emoji in header +- [ ] Comprehensive tips organized by category +- [ ] Includes Input Methods, Editing Features, Export Options, Data Privacy + +### State & Behavior +- [ ] Tab change confirmation when data exists +- [ ] Proper error handling +- [ ] Loading states for async operations +- [ ] Dark mode support + +### Styling +- [ ] Uses Tailwind CSS classes +- [ ] Consistent with other editors +- [ ] Responsive design +- [ ] Proper spacing and layout + +--- + +## Common Patterns + +### Button Styling +```jsx +// Primary action button +className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-medium px-4 py-2 rounded-md transition-colors flex-shrink-0" + +// Secondary button +className="bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-md transition-colors" +``` + +### Input Styling +```jsx +// Standard input +className="tool-input w-full" + +// Or explicit: +className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" +``` + +### Card/Section Styling +```jsx +className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden" +``` + +--- + +## Import Requirements + +### Required Icons (from lucide-react) +```jsx +import { + Plus, // Create New + Globe, // URL + FileText, // Paste + Upload, // Open + Download, // Export + Edit3, // Editor + AlertTriangle, // Errors + ChevronUp, // Collapse indicators + ChevronDown, // Collapse indicators + // Add your specific icons +} from 'lucide-react'; +``` + +### Required Components +```jsx +import ToolLayout from '../components/ToolLayout'; +import CodeMirrorEditor from '../components/CodeMirrorEditor'; +import CodeEditor from '../components/CodeEditor'; // For read-only code display +``` + +--- + +## Best Practices + +1. **Consistency First**: Always follow existing patterns before innovating +2. **User Data Safety**: Always confirm before clearing user data +3. **Error Messages**: Be specific and helpful +4. **Loading States**: Show loading indicators for async operations +5. **Accessibility**: Use semantic HTML and proper ARIA labels +6. **Dark Mode**: Test in both light and dark modes +7. **Mobile**: Ensure responsive design works on small screens +8. **Performance**: Lazy load heavy components when possible + +--- + +## Testing Your Editor + +1. **Input Methods**: Test all 4 tabs work correctly +2. **Parse Valid Data**: Ensure data loads and displays +3. **Parse Invalid Data**: Ensure errors show and input stays expanded +4. **Tab Switching**: Confirm data loss prevention works +5. **Export**: Test all export formats +6. **Collapse/Expand**: Test all collapsible sections +7. **Dark Mode**: Toggle and verify styling +8. **Mobile**: Test on small screen sizes +9. **Edge Cases**: Empty data, very large data, special characters + +--- + +## Questions or Issues? + +Refer to existing editors: +- Object Editor: JSON/PHP serialized data handling +- Table Editor: Tabular data with inline editing +- Invoice Editor: Form-based data entry + +Follow these patterns and your new editor will be consistent with the rest of the application! diff --git a/PROJECT_ROADMAP.md b/PROJECT_ROADMAP.md new file mode 100644 index 00000000..55919cb2 --- /dev/null +++ b/PROJECT_ROADMAP.md @@ -0,0 +1,481 @@ +# Developer Tools - Project Roadmap + +**Last Updated:** October 14, 2025 + +--- + +## 🎯 Vision + +Build a comprehensive suite of developer tools with a focus on: +1. **Privacy-First** - All processing in browser +2. **User-Friendly** - Intuitive UI/UX +3. **Monetization** - Ad-supported with optional ad-free experience +4. **Quality** - Consistent patterns across all tools + +--- + +## 📊 Current Status + +### ✅ Completed Tools +- **Object Editor** - JSON/PHP serialized data editor +- **Table Editor** - Tabular data editor with multi-format support +- **Invoice Editor** - Professional invoice generator + +### ✅ Completed Infrastructure +- Consistent input patterns (Create/URL/Paste/Open) +- Collapsible sections (Export, Usage Tips) +- Data loss prevention (confirmation modals) +- Dark mode support +- Responsive design +- Documentation (EDITOR_TOOL_GUIDE.md, EDITOR_CHECKLIST.md) + +--- + +## 🚀 Roadmap + +### Phase 1: Foundation & Monetization (Current - Week 1-2) + +#### Priority 1: Advanced URL Fetch ⭐ +**Status:** Planned +**Timeline:** 1-2 days +**Impact:** HIGH - Benefits all existing and future tools + +**Features:** +- Simple mode (current: just URL + GET) +- Advanced mode (toggle): + - HTTP method selector (GET, POST, PUT, DELETE, PATCH) + - Custom headers (key-value pairs) + - Request body editor (JSON/form-data) + - Query parameters builder + - Auth presets (Bearer, Basic, API Key) +- Save/load request presets +- Response headers display +- Status code display + +**Benefits:** +- Users can fetch from authenticated APIs +- Support for private company APIs +- GitHub API with auth tokens +- GraphQL endpoints +- Any REST API with custom requirements + +**Implementation Notes:** +- Add to all existing editors (Object, Table, Invoice) +- Reusable component: `AdvancedURLFetch.jsx` +- Store presets in localStorage +- Validate JSON in request body + +--- + +#### Priority 2: Ad Space Preparation 💰 +**Status:** Planned +**Timeline:** 1 day +**Impact:** HIGH - Start monetization immediately + +**Desktop Layout:** +``` +┌────────────────────────────┬─────────┐ +│ │ [Ad] │ +│ Main Content │ │ +│ (Tool Editor) │ 300px │ +│ │ │ +│ │ [Ad] │ +│ │ │ +│ │ [Ad] │ +└────────────────────────────┴─────────┘ +``` + +**Mobile Layout:** +``` +┌─────────────────────────┐ +│ │ +│ Main Content │ +│ (Scrollable) │ +│ │ +├─────────────────────────┤ +│ [Ad Banner 320x50] │ ← Sticky +└─────────────────────────┘ +``` + +**Specifications:** +- **Desktop:** + - 300px fixed width right column + - Sticky scroll (ads stay visible) + - 3 ad blocks maximum + - Ad sizes: 300x250, 300x600 + - Hide below 1200px viewport width + - Main content: `calc(100% - 320px)` + +- **Mobile:** + - 320x50 or 320x100 banner + - Sticky bottom position + - Close button for better UX + - Add padding-bottom to content + +**Implementation:** +- Create `AdColumn.jsx` component +- Create `AdBlock.jsx` component +- Create `MobileAdBanner.jsx` component +- Update `ToolLayout.jsx` to include ad spaces +- Add responsive breakpoints +- Test with placeholder ads first + +--- + +#### Priority 3: AdSense Integration 💵 +**Status:** Planned +**Timeline:** 1 day +**Impact:** HIGH - Start earning revenue + +**Steps:** +1. Apply for Google AdSense account +2. Add AdSense script to `index.html` +3. Create ad units in AdSense dashboard +4. Implement ad components with AdSense code +5. Test ad display and responsiveness +6. Monitor ad performance + +**Ad Units Needed:** +- Desktop Sidebar 1 (300x250) +- Desktop Sidebar 2 (300x250) +- Desktop Sidebar 3 (300x600) +- Mobile Bottom Banner (320x50) + +**Compliance:** +- Add Privacy Policy page +- Add Terms of Service page +- Cookie consent banner (if required) +- GDPR compliance (if applicable) + +--- + +### Phase 2: Content Expansion (Week 3-6) + +#### Markdown Editor 📝 +**Status:** Planned +**Timeline:** 1-2 weeks +**Impact:** HIGH - Major new feature, attracts new users + +**Core Features (MVP):** +- **Input Methods:** + - Create New (empty/sample) + - URL Import (fetch markdown from GitHub, Gist, etc.) + - Paste (markdown, HTML auto-convert, plain text) + - Open Files (.md, .txt, .html, .docx) + +- **Editor:** + - CodeMirror with markdown syntax highlighting + - Split view (editor + live preview) + - View modes: Split, Editor Only, Preview Only, Fullscreen + - Markdown toolbar (Bold, Italic, Headers, Links, Images, Code, Lists, Tables) + - Line numbers + - Word count & statistics + +- **Preview:** + - Live rendering (marked + DOMPurify) + - Syntax highlighting for code blocks (highlight.js) + - GitHub Flavored Markdown support + - Table of Contents auto-generation + - Mermaid diagram rendering (in preview) + +- **Export:** + - Markdown (.md) - Standard, GFM, CommonMark + - HTML (.html) - Standalone with CSS + - Plain Text (.txt) + - PDF (.pdf) - via html2pdf + - DOCX (.docx) - via docx library + +**Advanced Features (Post-MVP):** +- Tables support (GitHub-style) +- Task lists (checkboxes) +- Footnotes +- Emoji support (:smile:) +- Math equations (KaTeX) +- Templates (README, Documentation, Blog Post, etc.) +- Markdown linter +- Link checker +- Format beautifier + +**Libraries:** +- `marked` or `markdown-it` - Markdown parser +- `turndown` - HTML to Markdown +- `mammoth.js` - DOCX to HTML/Markdown +- `html2pdf.js` - HTML to PDF +- `docx` - Generate DOCX files +- `highlight.js` - Code syntax highlighting +- `mermaid` - Diagram rendering +- `katex` - Math rendering (optional) + +**Why Markdown Editor?** +- High demand from developers +- Complements existing tools +- Unique value: conversion hub +- Great for SEO +- Relatively straightforward to implement + +--- + +#### Diagram Tool 🎨 +**Status:** Planned +**Timeline:** 1-2 weeks +**Impact:** MEDIUM-HIGH - Separate tool, different audience + +**Decision: SEPARATE from Markdown Editor** + +**Why Separate:** +- Different use cases (documents vs diagrams) +- Different UX needs (text-heavy vs visual-heavy) +- Better specialization +- More SEO entry points +- Can be more powerful than mermaid alone + +**Core Features (MVP):** +- **Input Methods:** + - Create New (empty/sample diagrams) + - URL Import (fetch mermaid/PlantUML code) + - Paste (mermaid code, PlantUML, etc.) + - Open Files (.mmd, .mermaid, .txt) + +- **Editor:** + - Text-based editor (Mermaid syntax) + - Live preview + - Syntax highlighting + - Error detection + +- **Diagram Types (Mermaid-based):** + - Flowchart + - Sequence Diagram + - Class Diagram + - State Diagram + - Entity Relationship Diagram + - Gantt Chart + - Pie Chart + - Git Graph + +- **Export:** + - PNG (.png) + - SVG (.svg) + - PDF (.pdf) + - Mermaid Code (.mmd) + +**Advanced Features (Post-MVP):** +- Visual editor (drag-and-drop nodes) +- Excalidraw-style drawing +- Draw.io-style interface +- Import from PlantUML +- Custom themes +- Collaboration features + +**Libraries:** +- `mermaid` - Diagram rendering +- `html2canvas` - PNG export +- `svg-to-pdf` - PDF export + +**Why Separate Diagram Tool?** +- Mermaid is powerful but limited +- Users want visual editing +- Can compete with Lucidchart, draw.io +- Different target audience +- Can be monetized separately + +--- + +### Phase 3: Monetization Backend (Week 7+) + +#### Payment Integration 💳 +**Status:** Future +**Timeline:** 1 week +**Impact:** MEDIUM - Enables ad-free revenue + +**Prerequisites:** +- Significant traffic (>1000 daily users) +- Ad revenue validated +- User requests for ad-free option + +**Features:** +- One-time payment (no subscription) +- Multiple duration options +- Stripe/PayPal integration +- Simple checkout flow +- Email receipt + +**Pricing Strategy (Recommended):** +- 1 month: $2.99 +- 3 months: $6.99 (save 22%) +- 6 months: $11.99 (save 33%) +- 12 months: $19.99 (save 44%) + +**Implementation:** +- Backend: Node.js + Express (or serverless functions) +- Database: PostgreSQL or MongoDB +- Payment: Stripe API +- Email: SendGrid or similar + +--- + +#### User Accounts (Simple) 👤 +**Status:** Future +**Timeline:** 1 week +**Impact:** MEDIUM - Required for ad-free tracking + +**Features:** +- Email + password authentication +- OAuth (Google, GitHub) - optional +- Ad-free status tracking +- Purchase history +- Simple profile page + +**No Complex Features:** +- No social features +- No data sync (keep tools client-side) +- No collaboration +- Just auth + payment tracking + +**Implementation:** +- Auth: Firebase Auth or Auth0 +- Database: Store user ID + ad-free expiry date +- Frontend: Check ad-free status, hide ads + +--- + +#### Ad-Free Experience 🚫 +**Status:** Future +**Timeline:** 3 days +**Impact:** MEDIUM - Premium user experience + +**Features:** +- Hide all ads for paid users +- "Remove Ads" badge in UI +- Expiry reminder (7 days before) +- Easy renewal process + +**Implementation:** +```jsx +const { user, isAdFree } = useAuth(); + +return ( +
+
+ {/* Tool content */} +
+ {!isAdFree && } +
+); +``` + +--- + +## 🎯 Success Metrics + +### Phase 1 (Foundation & Monetization) +- [ ] Advanced URL Fetch used by >50% of users +- [ ] Ad impressions: >10,000/day +- [ ] Ad revenue: >$50/month +- [ ] No significant performance degradation + +### Phase 2 (Content Expansion) +- [ ] Markdown Editor: >1,000 users/week +- [ ] Diagram Tool: >500 users/week +- [ ] Total tools: 5 (Object, Table, Invoice, Markdown, Diagram) +- [ ] Ad revenue: >$200/month + +### Phase 3 (Monetization Backend) +- [ ] Ad-free purchases: >10/month +- [ ] Ad-free revenue: >$50/month +- [ ] Total revenue: >$250/month +- [ ] User satisfaction: >4.5/5 stars + +--- + +## 📈 Growth Strategy + +### SEO Optimization +- [ ] Optimize page titles and meta descriptions +- [ ] Add structured data (Schema.org) +- [ ] Create sitemap.xml +- [ ] Submit to Google Search Console +- [ ] Create blog posts about tools +- [ ] Create tutorial videos +- [ ] Build backlinks + +### Content Marketing +- [ ] Write "How to" guides +- [ ] Create comparison articles (vs competitors) +- [ ] Share on Reddit (r/webdev, r/programming) +- [ ] Share on Hacker News +- [ ] Share on Twitter/X +- [ ] Share on LinkedIn + +### Community Building +- [ ] Create Discord server (optional) +- [ ] Add feedback form +- [ ] Respond to user feedback +- [ ] Add feature request voting +- [ ] Create changelog page + +--- + +## 🛠️ Technical Debt & Improvements + +### Performance +- [ ] Implement code splitting +- [ ] Lazy load heavy components +- [ ] Optimize bundle size +- [ ] Add service worker (PWA) +- [ ] Implement caching strategies + +### Testing +- [ ] Add unit tests (Jest) +- [ ] Add integration tests (React Testing Library) +- [ ] Add E2E tests (Playwright) +- [ ] Set up CI/CD pipeline + +### Accessibility +- [ ] Add ARIA labels +- [ ] Test with screen readers +- [ ] Ensure keyboard navigation +- [ ] Add focus indicators +- [ ] Test color contrast + +### Documentation +- [ ] Create API documentation (if applicable) +- [ ] Create user guides +- [ ] Create video tutorials +- [ ] Create FAQ page + +--- + +## 📝 Notes + +### Decision Log +- **2025-10-14**: Decided to separate Diagram Tool from Markdown Editor for better specialization +- **2025-10-14**: Prioritized Advanced URL Fetch over Markdown Editor for immediate impact +- **2025-10-14**: Chose ad-first monetization strategy with optional ad-free experience +- **2025-10-14**: Decided on one-time payment (no subscription) for ad-free + +### Risks & Mitigation +- **Risk**: Ad revenue too low + - **Mitigation**: Focus on traffic growth, optimize ad placement +- **Risk**: Users use ad blockers + - **Mitigation**: Polite message asking to whitelist, offer ad-free option +- **Risk**: Competition from existing tools + - **Mitigation**: Focus on unique features (conversion hub, privacy-first) +- **Risk**: Backend costs too high + - **Mitigation**: Start with serverless, scale as needed + +### Future Ideas (Backlog) +- Code Formatter (Prettier-based) +- JSON Diff Tool +- Base64 Encoder/Decoder +- URL Encoder/Decoder +- Hash Generator (MD5, SHA256, etc.) +- QR Code Generator +- Color Picker & Converter +- Regex Tester +- Cron Expression Generator +- JWT Decoder +- API Testing Tool (Postman-like) + +--- + +**End of Roadmap** diff --git a/TODO.md b/TODO.md new file mode 100644 index 00000000..c1f5f424 --- /dev/null +++ b/TODO.md @@ -0,0 +1,889 @@ +# Developer Tools - To-Do List + +**Last Updated:** October 14, 2025 + +--- + +## 📋 Phase 1: Foundation & Monetization + +### ⭐ Priority 1: Advanced URL Fetch (1-2 days) + +#### Design & Planning +- [ ] Design UI mockup for simple mode +- [ ] Design UI mockup for advanced mode +- [ ] Design toggle between modes +- [ ] Plan state management structure +- [ ] Plan localStorage schema for presets + +#### Component Development +- [ ] Create `AdvancedURLFetch.jsx` component +- [ ] Create `HTTPMethodSelector.jsx` component +- [ ] Create `HeadersEditor.jsx` component (key-value pairs) +- [ ] Create `RequestBodyEditor.jsx` component (CodeMirror) +- [ ] Create `QueryParamsBuilder.jsx` component +- [ ] Create `AuthPresets.jsx` component +- [ ] Create `RequestPresetManager.jsx` component + +#### Simple Mode +- [ ] Implement URL input field +- [ ] Implement GET request button +- [ ] Implement loading state +- [ ] Implement error handling +- [ ] Add helper text + +#### Advanced Mode +- [ ] Implement mode toggle button +- [ ] Implement HTTP method selector (GET, POST, PUT, DELETE, PATCH) +- [ ] Implement custom headers input + - [ ] Add header button + - [ ] Remove header button + - [ ] Key-value pair inputs + - [ ] Validation +- [ ] Implement request body editor + - [ ] CodeMirror integration + - [ ] JSON syntax highlighting + - [ ] JSON validation + - [ ] Format button +- [ ] Implement query parameters builder + - [ ] Add param button + - [ ] Remove param button + - [ ] Key-value pair inputs + - [ ] Auto-append to URL +- [ ] Implement auth presets + - [ ] Bearer Token preset + - [ ] Basic Auth preset + - [ ] API Key preset + - [ ] Custom preset + +#### Response Display +- [ ] Create response tabs (Body, Headers, Status) +- [ ] Implement response body display (formatted JSON) +- [ ] Implement response headers display +- [ ] Implement status code display with color coding +- [ ] Add response time display +- [ ] Add response size display + +#### Presets Management +- [ ] Implement save preset functionality +- [ ] Implement load preset functionality +- [ ] Implement delete preset functionality +- [ ] Implement preset list UI +- [ ] Store presets in localStorage +- [ ] Add preset name input +- [ ] Add preset description (optional) + +#### Integration +- [ ] Integrate into Object Editor + - [ ] Replace simple URL input + - [ ] Test with various APIs + - [ ] Update Usage Tips +- [ ] Integrate into Table Editor + - [ ] Replace simple URL input + - [ ] Test with various APIs + - [ ] Update Usage Tips +- [ ] Integrate into Invoice Editor + - [ ] Replace simple URL input + - [ ] Test with various APIs + - [ ] Update Usage Tips + +#### Testing +- [ ] Test with GitHub API (requires auth) +- [ ] Test with JSONPlaceholder (public API) +- [ ] Test with Telegram Bot API +- [ ] Test with GraphQL endpoint +- [ ] Test with POST request + body +- [ ] Test with custom headers +- [ ] Test with query parameters +- [ ] Test error scenarios (404, 500, timeout) +- [ ] Test loading states +- [ ] Test preset save/load +- [ ] Test on mobile devices +- [ ] Test dark mode + +#### Documentation +- [ ] Update EDITOR_TOOL_GUIDE.md with advanced URL pattern +- [ ] Add code examples +- [ ] Add screenshots +- [ ] Update EDITOR_CHECKLIST.md + +--- + +### 💰 Priority 2: Ad Space Preparation (1 day) + +#### Design +- [ ] Finalize desktop ad column layout +- [ ] Finalize mobile ad banner layout +- [ ] Design placeholder ads for testing +- [ ] Plan responsive breakpoints + +#### Desktop Ad Column +- [ ] Create `AdColumn.jsx` component + - [ ] 300px fixed width + - [ ] Sticky scroll behavior + - [ ] Space for 3 ad blocks + - [ ] Proper spacing between ads +- [ ] Create `AdBlock.jsx` component + - [ ] Support 300x250 size + - [ ] Support 300x600 size + - [ ] Placeholder content for testing + - [ ] Loading state + - [ ] Error state (if ad fails to load) +- [ ] Implement responsive behavior + - [ ] Show on screens >= 1200px + - [ ] Hide on screens < 1200px + - [ ] Smooth transition + +#### Mobile Ad Banner +- [ ] Create `MobileAdBanner.jsx` component + - [ ] 320x50 or 320x100 size + - [ ] Sticky bottom position + - [ ] Close button + - [ ] Slide-in animation (optional) +- [ ] Implement close functionality + - [ ] Hide banner on close + - [ ] Store preference in localStorage (optional) + - [ ] Respect user choice +- [ ] Add padding-bottom to content + - [ ] Ensure content not hidden behind banner + - [ ] Dynamic padding based on banner height + +#### Layout Integration +- [ ] Update `ToolLayout.jsx` to include ad spaces + - [ ] Add ad column container + - [ ] Add mobile banner container + - [ ] Maintain proper spacing +- [ ] Update main content width + - [ ] Desktop: `calc(100% - 320px)` + - [ ] Mobile: `100%` +- [ ] Test layout on all tool pages + - [ ] Object Editor + - [ ] Table Editor + - [ ] Invoice Editor + +#### Testing +- [ ] Test desktop layout (1200px+) +- [ ] Test tablet layout (768px - 1199px) +- [ ] Test mobile layout (<768px) +- [ ] Test sticky scroll behavior +- [ ] Test sticky bottom banner +- [ ] Test close button functionality +- [ ] Test with placeholder ads +- [ ] Test dark mode compatibility +- [ ] Test on various screen sizes +- [ ] Test on actual devices (iOS, Android) + +#### Performance +- [ ] Ensure no layout shift +- [ ] Optimize rendering performance +- [ ] Test scroll performance +- [ ] Measure impact on page load time + +--- + +### 💵 Priority 3: AdSense Integration (1 day) + +#### AdSense Setup +- [ ] Apply for Google AdSense account +- [ ] Provide website URL +- [ ] Provide contact information +- [ ] Wait for approval (can take 1-3 days) +- [ ] Verify site ownership (add verification code) + +#### Ad Units Creation +- [ ] Log in to AdSense dashboard +- [ ] Create ad unit: Desktop Sidebar 1 (300x250) +- [ ] Create ad unit: Desktop Sidebar 2 (300x250) +- [ ] Create ad unit: Desktop Sidebar 3 (300x600) +- [ ] Create ad unit: Mobile Bottom Banner (320x50) +- [ ] Copy ad unit codes + +#### Implementation +- [ ] Add AdSense script to `public/index.html` + ```html + + ``` +- [ ] Update `AdBlock.jsx` with AdSense code + ```jsx + + ``` +- [ ] Update `MobileAdBanner.jsx` with AdSense code +- [ ] Initialize ads: `(adsbygoogle = window.adsbygoogle || []).push({});` + +#### Testing +- [ ] Test ad display on desktop +- [ ] Test ad display on mobile +- [ ] Verify ads load correctly +- [ ] Check for console errors +- [ ] Test with ad blocker (should show message) +- [ ] Test on different browsers (Chrome, Firefox, Safari) +- [ ] Test on different devices + +#### Monitoring +- [ ] Set up AdSense reporting +- [ ] Monitor ad impressions +- [ ] Monitor ad clicks +- [ ] Monitor ad revenue +- [ ] Track CTR (Click-Through Rate) +- [ ] Identify best-performing ad units + +#### Compliance +- [ ] Create Privacy Policy page + - [ ] Data collection disclosure + - [ ] Cookie usage disclosure + - [ ] Third-party services (AdSense) + - [ ] User rights (GDPR) +- [ ] Create Terms of Service page + - [ ] Acceptable use policy + - [ ] Disclaimer + - [ ] Limitation of liability +- [ ] Add cookie consent banner (if required) + - [ ] Show on first visit + - [ ] Allow accept/decline + - [ ] Store preference +- [ ] Add "About Ads" link in footer +- [ ] Add "Privacy Policy" link in footer +- [ ] Add "Terms of Service" link in footer + +#### Optimization +- [ ] Test different ad placements +- [ ] Test different ad sizes +- [ ] Monitor ad viewability +- [ ] Optimize for higher CTR +- [ ] A/B test ad positions (optional) + +--- + +## 📋 Phase 2: Content Expansion + +### 📝 Markdown Editor - MVP (1-2 weeks) + +#### Planning +- [ ] Finalize feature list for MVP +- [ ] Design UI mockup (split view) +- [ ] Plan component structure +- [ ] Choose markdown parser (marked vs markdown-it) +- [ ] Plan export formats + +#### Project Setup +- [ ] Create `MarkdownEditor.jsx` page +- [ ] Set up routing (`/markdown-editor`) +- [ ] Add to navigation menu +- [ ] Add to homepage tools list + +#### Input Section +- [ ] Implement Create New tab + - [ ] Start Empty button + - [ ] Load Sample button (with example markdown) + - [ ] Tip box +- [ ] Implement URL tab + - [ ] Use AdvancedURLFetch component + - [ ] Support GitHub raw URLs + - [ ] Support Gist URLs + - [ ] Test with various markdown sources +- [ ] Implement Paste tab + - [ ] CodeMirror editor + - [ ] Markdown syntax highlighting + - [ ] Auto-detect markdown + - [ ] Parse button + - [ ] Collapse after parse +- [ ] Implement Open tab + - [ ] Support .md files + - [ ] Support .txt files + - [ ] Support .html files (convert to markdown) + - [ ] Support .docx files (convert to markdown) + - [ ] Auto-load on file selection + +#### Editor Section +- [ ] Set up CodeMirror for markdown + - [ ] Install @codemirror/lang-markdown + - [ ] Configure markdown mode + - [ ] Add syntax highlighting + - [ ] Add line numbers + - [ ] Add line wrapping +- [ ] Implement split view layout + - [ ] Editor pane (left) + - [ ] Preview pane (right) + - [ ] Resizable divider (optional) +- [ ] Implement view mode toggle + - [ ] Split view (default) + - [ ] Editor only + - [ ] Preview only + - [ ] Fullscreen mode +- [ ] Add markdown toolbar + - [ ] Bold button (Ctrl+B) + - [ ] Italic button (Ctrl+I) + - [ ] H1 button + - [ ] H2 button + - [ ] H3 button + - [ ] Link button (Ctrl+K) + - [ ] Image button + - [ ] Code button (Ctrl+`) + - [ ] Quote button + - [ ] Unordered list button + - [ ] Ordered list button + - [ ] Table button +- [ ] Add editor features + - [ ] Word count + - [ ] Character count + - [ ] Line count + - [ ] Reading time estimate + +#### Preview Section +- [ ] Set up markdown parser (marked) + - [ ] Install marked + - [ ] Install DOMPurify + - [ ] Configure marked options +- [ ] Implement live preview + - [ ] Real-time rendering + - [ ] Debounce for performance + - [ ] Scroll sync (optional) +- [ ] Add syntax highlighting for code blocks + - [ ] Install highlight.js + - [ ] Configure languages + - [ ] Apply highlighting +- [ ] Add GitHub Flavored Markdown support + - [ ] Tables + - [ ] Strikethrough + - [ ] Task lists + - [ ] Autolinks +- [ ] Implement Table of Contents + - [ ] Auto-generate from headers + - [ ] Clickable links + - [ ] Collapsible (optional) +- [ ] Add mermaid diagram rendering + - [ ] Install mermaid + - [ ] Detect mermaid code blocks + - [ ] Render diagrams + - [ ] Error handling + +#### Export Section +- [ ] Create collapsible export section +- [ ] Implement Markdown export + - [ ] Standard Markdown + - [ ] GitHub Flavored Markdown + - [ ] CommonMark + - [ ] Copy to clipboard + - [ ] Download as .md file +- [ ] Implement HTML export + - [ ] Standalone HTML with CSS + - [ ] Inline styles + - [ ] Include syntax highlighting CSS + - [ ] Copy to clipboard + - [ ] Download as .html file +- [ ] Implement Plain Text export + - [ ] Strip all formatting + - [ ] Copy to clipboard + - [ ] Download as .txt file +- [ ] Implement PDF export + - [ ] Install html2pdf.js + - [ ] Convert HTML to PDF + - [ ] Maintain formatting + - [ ] Download as .pdf file +- [ ] Implement DOCX export + - [ ] Install docx library + - [ ] Convert markdown to DOCX + - [ ] Maintain formatting + - [ ] Download as .docx file + +#### Conversion Features +- [ ] HTML to Markdown conversion + - [ ] Install turndown + - [ ] Convert on paste (if HTML detected) + - [ ] Convert on file open (.html) +- [ ] DOCX to Markdown conversion + - [ ] Install mammoth.js + - [ ] Convert on file open (.docx) + - [ ] Extract text and formatting + +#### Usage Tips +- [ ] Create collapsible Usage Tips section +- [ ] Add Input Methods tips +- [ ] Add Editor Features tips +- [ ] Add Markdown Syntax tips +- [ ] Add Export Options tips +- [ ] Add Data Privacy tips + +#### Data Loss Prevention +- [ ] Implement hasUserData() function +- [ ] Implement hasModifiedData() function +- [ ] Add confirmation modal for tab changes +- [ ] Add confirmation for Create New buttons + +#### Testing +- [ ] Test all input methods +- [ ] Test markdown rendering +- [ ] Test all export formats +- [ ] Test HTML to Markdown conversion +- [ ] Test DOCX import +- [ ] Test mermaid diagrams +- [ ] Test code syntax highlighting +- [ ] Test Table of Contents +- [ ] Test view mode toggle +- [ ] Test toolbar buttons +- [ ] Test keyboard shortcuts +- [ ] Test responsive design +- [ ] Test dark mode +- [ ] Test on mobile devices + +#### Documentation +- [ ] Add to EDITOR_TOOL_GUIDE.md +- [ ] Create user guide +- [ ] Add screenshots +- [ ] Create tutorial video (optional) + +--- + +### 📝 Markdown Editor - Post-MVP (Future) + +#### Advanced Markdown Features +- [ ] Add table support (GitHub-style) +- [ ] Add task lists (checkboxes) +- [ ] Add footnotes support +- [ ] Add emoji support (:smile:) +- [ ] Add math equations (KaTeX) + - [ ] Install katex + - [ ] Detect math blocks + - [ ] Render equations + +#### Templates +- [ ] Create README.md template +- [ ] Create Documentation template +- [ ] Create Blog post template +- [ ] Create Meeting notes template +- [ ] Create Project proposal template +- [ ] Add template selector UI +- [ ] Allow custom templates + +#### Utilities +- [ ] Add markdown linter + - [ ] Check for common issues + - [ ] Suggest improvements + - [ ] Show warnings +- [ ] Add link checker + - [ ] Validate URLs + - [ ] Check for broken links + - [ ] Show status +- [ ] Add format beautifier + - [ ] Clean up markdown + - [ ] Consistent formatting + - [ ] Fix indentation +- [ ] Add image optimizer + - [ ] Compress images + - [ ] Convert to base64 + - [ ] Optimize for web + +#### Enhanced Features +- [ ] Add keyboard shortcuts +- [ ] Add auto-save (localStorage) +- [ ] Add export history +- [ ] Add version history +- [ ] Add collaborative editing (future) + +--- + +### 🎨 Diagram Tool - MVP (1-2 weeks) + +#### Planning +- [ ] Finalize feature list for MVP +- [ ] Design UI mockup +- [ ] Plan component structure +- [ ] Research mermaid.js capabilities + +#### Project Setup +- [ ] Create `DiagramEditor.jsx` page +- [ ] Set up routing (`/diagram-editor`) +- [ ] Add to navigation menu +- [ ] Add to homepage tools list + +#### Input Section +- [ ] Implement Create New tab + - [ ] Start Empty button + - [ ] Load Sample button (with example diagrams) + - [ ] Diagram type selector +- [ ] Implement URL tab + - [ ] Use AdvancedURLFetch component + - [ ] Support mermaid code URLs + - [ ] Support PlantUML URLs (future) +- [ ] Implement Paste tab + - [ ] CodeMirror editor + - [ ] Mermaid syntax highlighting + - [ ] Parse button + - [ ] Collapse after parse +- [ ] Implement Open tab + - [ ] Support .mmd files + - [ ] Support .mermaid files + - [ ] Support .txt files + - [ ] Auto-load on file selection + +#### Editor Section +- [ ] Set up CodeMirror for mermaid + - [ ] Configure mermaid mode + - [ ] Add syntax highlighting + - [ ] Add line numbers +- [ ] Implement diagram type selector + - [ ] Flowchart + - [ ] Sequence Diagram + - [ ] Class Diagram + - [ ] State Diagram + - [ ] Entity Relationship Diagram + - [ ] Gantt Chart + - [ ] Pie Chart + - [ ] Git Graph +- [ ] Add code templates for each diagram type +- [ ] Add error detection + - [ ] Syntax errors + - [ ] Invalid diagram type + - [ ] Show error messages + +#### Preview Section +- [ ] Set up mermaid.js + - [ ] Install mermaid + - [ ] Configure mermaid + - [ ] Initialize mermaid +- [ ] Implement live preview + - [ ] Real-time rendering + - [ ] Debounce for performance + - [ ] Error handling +- [ ] Add zoom controls + - [ ] Zoom in button + - [ ] Zoom out button + - [ ] Reset zoom button + - [ ] Fit to screen button +- [ ] Add pan controls + - [ ] Drag to pan + - [ ] Pan with mouse wheel +- [ ] Add fullscreen mode + +#### Export Section +- [ ] Create collapsible export section +- [ ] Implement PNG export + - [ ] Install html2canvas + - [ ] Convert SVG to PNG + - [ ] Download as .png file +- [ ] Implement SVG export + - [ ] Extract SVG from preview + - [ ] Download as .svg file +- [ ] Implement PDF export + - [ ] Convert SVG to PDF + - [ ] Download as .pdf file +- [ ] Implement Mermaid Code export + - [ ] Copy to clipboard + - [ ] Download as .mmd file + +#### Usage Tips +- [ ] Create collapsible Usage Tips section +- [ ] Add Input Methods tips +- [ ] Add Diagram Types tips +- [ ] Add Mermaid Syntax tips +- [ ] Add Export Options tips +- [ ] Add Data Privacy tips + +#### Data Loss Prevention +- [ ] Implement hasUserData() function +- [ ] Implement hasModifiedData() function +- [ ] Add confirmation modal for tab changes +- [ ] Add confirmation for Create New buttons + +#### Testing +- [ ] Test all input methods +- [ ] Test all diagram types +- [ ] Test diagram rendering +- [ ] Test all export formats +- [ ] Test zoom controls +- [ ] Test pan controls +- [ ] Test fullscreen mode +- [ ] Test error handling +- [ ] Test responsive design +- [ ] Test dark mode +- [ ] Test on mobile devices + +#### Documentation +- [ ] Add to EDITOR_TOOL_GUIDE.md +- [ ] Create user guide +- [ ] Add screenshots +- [ ] Create tutorial video (optional) + +--- + +### 🎨 Diagram Tool - Post-MVP (Future) + +#### Visual Editor +- [ ] Design drag-and-drop interface +- [ ] Implement node library (shapes, icons) +- [ ] Implement connection tools +- [ ] Implement styling options (colors, fonts, borders) +- [ ] Add Excalidraw-style drawing +- [ ] Add auto-layout options + +#### Advanced Features +- [ ] Add PlantUML import +- [ ] Add custom themes +- [ ] Add diagram templates +- [ ] Add collaboration features (future) +- [ ] Add version history + +--- + +## 📋 Phase 3: Monetization Backend + +### 💳 Payment Integration (1 week) + +#### Planning +- [ ] Choose payment provider (Stripe recommended) +- [ ] Plan payment flow +- [ ] Plan database schema +- [ ] Plan backend architecture + +#### Stripe Setup +- [ ] Create Stripe account +- [ ] Verify business information +- [ ] Set up pricing plans in Stripe + - [ ] 1 month: $2.99 + - [ ] 3 months: $6.99 + - [ ] 6 months: $11.99 + - [ ] 12 months: $19.99 +- [ ] Get API keys (test and live) + +#### Backend Setup +- [ ] Choose backend (Node.js + Express or serverless) +- [ ] Set up backend project +- [ ] Set up database (PostgreSQL or MongoDB) +- [ ] Create database schema + - [ ] Users table + - [ ] Purchases table + - [ ] Ad-free status table +- [ ] Set up environment variables + +#### API Development +- [ ] Create payment intent endpoint +- [ ] Create payment confirmation endpoint +- [ ] Create purchase history endpoint +- [ ] Create ad-free status endpoint +- [ ] Add error handling +- [ ] Add logging + +#### Frontend Integration +- [ ] Design payment flow UI +- [ ] Create checkout page +- [ ] Integrate Stripe Elements +- [ ] Implement payment form +- [ ] Implement payment success handling +- [ ] Implement payment failure handling +- [ ] Add loading states +- [ ] Add error messages + +#### Email Integration +- [ ] Choose email service (SendGrid recommended) +- [ ] Set up email service account +- [ ] Create email templates + - [ ] Purchase confirmation + - [ ] Receipt + - [ ] Expiry reminder +- [ ] Implement email sending + +#### Testing +- [ ] Test payment flow (test mode) +- [ ] Test with test cards +- [ ] Test payment success +- [ ] Test payment failure +- [ ] Test email sending +- [ ] Test with real payment (small amount) +- [ ] Test on different browsers +- [ ] Test on mobile devices + +#### Deployment +- [ ] Deploy backend +- [ ] Set up production database +- [ ] Configure environment variables +- [ ] Test in production +- [ ] Monitor transactions + +#### Legal & Compliance +- [ ] Add refund policy +- [ ] Add customer support email +- [ ] Update Terms of Service +- [ ] Update Privacy Policy + +--- + +### 👤 User Accounts (1 week) + +#### Planning +- [ ] Choose auth provider (Firebase Auth or Auth0) +- [ ] Plan auth flow +- [ ] Plan user data structure + +#### Auth Setup +- [ ] Create auth provider account +- [ ] Configure auth provider +- [ ] Get API keys +- [ ] Set up authentication methods + - [ ] Email + password + - [ ] Google OAuth (optional) + - [ ] GitHub OAuth (optional) + +#### UI Development +- [ ] Design login page +- [ ] Design signup page +- [ ] Design profile page +- [ ] Create login form +- [ ] Create signup form +- [ ] Create profile page +- [ ] Add form validation + +#### Auth Implementation +- [ ] Implement email + password auth +- [ ] Implement OAuth (optional) +- [ ] Implement logout functionality +- [ ] Implement password reset flow +- [ ] Implement email verification +- [ ] Add session management + +#### User Profile +- [ ] Display user information +- [ ] Display ad-free status +- [ ] Display purchase history +- [ ] Add edit profile functionality +- [ ] Add change password functionality + +#### Integration +- [ ] Connect auth to payment system +- [ ] Store user ID with purchases +- [ ] Track ad-free status +- [ ] Update UI based on auth state + +#### Testing +- [ ] Test signup flow +- [ ] Test login flow +- [ ] Test logout flow +- [ ] Test password reset +- [ ] Test email verification +- [ ] Test on different browsers +- [ ] Test on mobile devices + +#### Security +- [ ] Add rate limiting +- [ ] Add CSRF protection +- [ ] Add XSS protection +- [ ] Add SQL injection protection +- [ ] Implement secure session handling + +--- + +### 🚫 Ad-Free Experience (3 days) + +#### UI Development +- [ ] Design ad-free badge +- [ ] Design expiry reminder +- [ ] Design renewal flow +- [ ] Create ad-free badge component +- [ ] Create expiry reminder component + +#### Implementation +- [ ] Check ad-free status on page load +- [ ] Hide ads for ad-free users +- [ ] Show ad-free badge in UI +- [ ] Implement expiry reminder (7 days before) +- [ ] Implement grace period (3 days after expiry) +- [ ] Add renewal flow + +#### Testing +- [ ] Test ad-free status check +- [ ] Test ad hiding +- [ ] Test ad-free badge display +- [ ] Test expiry reminder +- [ ] Test grace period +- [ ] Test renewal flow +- [ ] Test on different browsers +- [ ] Test on mobile devices + +#### Monitoring +- [ ] Track ad-free user count +- [ ] Monitor expiry dates +- [ ] Send expiry reminders +- [ ] Collect feedback from ad-free users + +--- + +## 🎯 Quick Wins (Can Do Anytime) + +### SEO & Marketing +- [ ] Optimize page titles +- [ ] Optimize meta descriptions +- [ ] Add Open Graph tags +- [ ] Add Twitter Card tags +- [ ] Create sitemap.xml +- [ ] Submit to Google Search Console +- [ ] Create robots.txt + +### Content +- [ ] Write blog post: "How to use Object Editor" +- [ ] Write blog post: "How to use Table Editor" +- [ ] Write blog post: "How to use Invoice Editor" +- [ ] Create tutorial videos +- [ ] Share on Reddit +- [ ] Share on Hacker News +- [ ] Share on Twitter/X + +### UX Improvements +- [ ] Add loading skeletons +- [ ] Add empty states +- [ ] Add success messages +- [ ] Add error messages +- [ ] Improve error handling +- [ ] Add tooltips +- [ ] Add keyboard shortcuts + +### Performance +- [ ] Implement code splitting +- [ ] Lazy load components +- [ ] Optimize images +- [ ] Minify CSS/JS +- [ ] Add caching headers +- [ ] Implement service worker (PWA) + +--- + +## 📊 Metrics to Track + +### User Metrics +- [ ] Daily active users (DAU) +- [ ] Weekly active users (WAU) +- [ ] Monthly active users (MAU) +- [ ] New users per day +- [ ] Returning users +- [ ] User retention rate + +### Tool Usage +- [ ] Object Editor usage +- [ ] Table Editor usage +- [ ] Invoice Editor usage +- [ ] Markdown Editor usage (when launched) +- [ ] Diagram Tool usage (when launched) +- [ ] Most popular features + +### Monetization +- [ ] Ad impressions per day +- [ ] Ad clicks per day +- [ ] Ad CTR (Click-Through Rate) +- [ ] Ad revenue per day +- [ ] Ad-free purchases per month +- [ ] Ad-free revenue per month +- [ ] Total revenue per month + +### Performance +- [ ] Page load time +- [ ] Time to interactive +- [ ] First contentful paint +- [ ] Largest contentful paint +- [ ] Cumulative layout shift + +--- + +**End of To-Do List** diff --git a/public/data/commits.json b/public/data/commits.json index e4d447e5..0d91c398 100644 --- a/public/data/commits.json +++ b/public/data/commits.json @@ -1,5 +1,52 @@ { "changelog": [ + { + "date": "2025-10-14", + "changes": [ + { + "datetime": "2025-10-14T23:59:00+07:00", + "type": "enhancement", + "title": "Editor UX Refinement - Collapsible Sections & Usage Tips", + "description": "Enhanced all editor tools (Object, Table, Invoice) with collapsible export sections and comprehensive usage tips. Export sections now start collapsed to reduce page height, and usage tips are collapsible with eye-catching design. Added detailed documentation guides (EDITOR_TOOL_GUIDE.md, EDITOR_CHECKLIST.md) for consistent future development." + }, + { + "datetime": "2025-10-14T22:30:00+07:00", + "type": "enhancement", + "title": "Consistent Input Methods Across All Editors", + "description": "Standardized file input and URL fetch UI across Object, Table, and Invoice editors. File inputs now use consistent 'tool-input' class and auto-load content immediately. URL inputs feature inline fetch buttons (not below) for better UX. Paste sections now collapse after successful parsing with data summaries." + }, + { + "datetime": "2025-10-14T21:00:00+07:00", + "type": "enhancement", + "title": "Data Loss Prevention System", + "description": "Implemented comprehensive confirmation modals across all editors to prevent accidental data loss. When switching input methods or tabs with existing data, users now see a detailed warning with specific data summary and option to save before proceeding. Features amber-themed warning design with clear action buttons." + }, + { + "datetime": "2025-10-14T20:00:00+07:00", + "type": "fix", + "title": "Table Editor Cell Overflow Fix", + "description": "Fixed text overflow issues in Table Editor cells. Long text now properly truncates with ellipsis instead of breaking layout. Added proper overflow handling with 'truncate' class and block-level spans for consistent cell rendering." + }, + { + "datetime": "2025-10-14T19:30:00+07:00", + "type": "enhancement", + "title": "Object Editor Output Section Improvements", + "description": "Made Object Editor's output/export section collapsible to reduce page height when working with long data. Export section now starts collapsed with a clickable header showing data summary, matching the pattern used in other editors." + }, + { + "datetime": "2025-10-14T19:00:00+07:00", + "type": "fix", + "title": "Object Editor File Input Improvements", + "description": "Fixed Object Editor's 'Open File' tab to auto-load content immediately upon file selection, matching Table and Invoice editor behavior. Removed unnecessary 'Parse Object' button and irrelevant CSV checkbox for cleaner, more intuitive UX." + }, + { + "datetime": "2025-10-14T18:30:00+07:00", + "type": "enhancement", + "title": "Invoice Editor Export & URL Consistency", + "description": "Made Invoice Editor's export section collapsible to match other editors. Fixed URL form layout to use inline fetch button instead of below-input placement. Improved overall consistency across all editor input methods." + } + ] + }, { "date": "2025-09-28", "changes": [ diff --git a/src/components/CodeMirrorEditor.js b/src/components/CodeMirrorEditor.js index 5ceba77c..40c51b1a 100644 --- a/src/components/CodeMirrorEditor.js +++ b/src/components/CodeMirrorEditor.js @@ -123,7 +123,7 @@ const CodeMirrorEditor = ({
diff --git a/src/components/MindmapView.js b/src/components/MindmapView.js index af1a736e..6cf37532 100644 --- a/src/components/MindmapView.js +++ b/src/components/MindmapView.js @@ -454,7 +454,7 @@ const MindmapView = React.memo(({ data }) => { return (
{ const [data, setData] = useState(initialData); const [expandedNodes, setExpandedNodes] = useState(new Set(['root'])); const [fieldTypes, setFieldTypes] = useState({}); // Track intended types for fields const isInternalUpdate = useRef(false); + const [nestedEditModal, setNestedEditModal] = useState(null); // { path, value, type: 'json' | 'serialized' } + const [nestedData, setNestedData] = useState(null); // Update internal data when initialData prop changes (but not from internal updates) useEffect(() => { @@ -28,6 +30,173 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => { onDataChange(newData); }; + // PHP serialize/unserialize functions + const phpSerialize = (data) => { + if (data === null) return 'N;'; + if (typeof data === 'boolean') return data ? 'b:1;' : 'b:0;'; + if (typeof data === 'number') { + return Number.isInteger(data) ? `i:${data};` : `d:${data};`; + } + if (typeof data === 'string') { + const escapedData = data.replace(/\\/g, '\\\\').replace(/"/g, '\\"'); + const byteLength = new TextEncoder().encode(escapedData).length; + return `s:${byteLength}:"${escapedData}";`; + } + if (Array.isArray(data)) { + let result = `a:${data.length}:{`; + data.forEach((item, index) => { + result += phpSerialize(index) + phpSerialize(item); + }); + result += '}'; + return result; + } + if (typeof data === 'object') { + const keys = Object.keys(data); + let result = `a:${keys.length}:{`; + keys.forEach(key => { + result += phpSerialize(key) + phpSerialize(data[key]); + }); + result += '}'; + return result; + } + return 'N;'; + }; + + const phpUnserialize = (str) => { + let index = 0; + const parseValue = () => { + if (index >= str.length) throw new Error('Unexpected end of string'); + const type = str[index]; + if (type === 'N') { + index += 2; + return null; + } + if (str[index + 1] !== ':') throw new Error(`Expected ':' after type '${type}'`); + index += 2; + switch (type) { + case 'b': + const boolVal = str[index] === '1'; + index += 2; + return boolVal; + case 'i': + let intStr = ''; + while (index < str.length && str[index] !== ';') intStr += str[index++]; + index++; + return parseInt(intStr); + case 'd': + let floatStr = ''; + while (index < str.length && str[index] !== ';') floatStr += str[index++]; + index++; + return parseFloat(floatStr); + case 's': + let lenStr = ''; + while (index < str.length && str[index] !== ':') lenStr += str[index++]; + index++; + if (str[index] !== '"') throw new Error('Expected opening quote'); + index++; + const byteLength = parseInt(lenStr); + if (byteLength === 0) { + index += 2; + return ''; + } + let endQuotePos = -1; + for (let i = index; i < str.length - 1; i++) { + if (str[i] === '"' && str[i + 1] === ';') { + endQuotePos = i; + break; + } + } + if (endQuotePos === -1) throw new Error('Could not find closing quote'); + const strValue = str.substring(index, endQuotePos); + index = endQuotePos + 2; + return strValue.replace(/\\"/g, '"').replace(/\\\\/g, '\\'); + case 'a': + let countStr = ''; + while (index < str.length && str[index] !== ':') countStr += str[index++]; + const count = parseInt(countStr); + index += 2; + const result = {}; + let isArray = true; + for (let i = 0; i < count; i++) { + const key = parseValue(); + const value = parseValue(); + result[key] = value; + if (key !== i) isArray = false; + } + index++; + return isArray ? Object.values(result) : result; + default: + throw new Error(`Unknown type: ${type}`); + } + }; + return parseValue(); + }; + + // Detect if a string contains JSON or serialized data + const detectNestedData = (value) => { + if (typeof value !== 'string' || value.length < 5) return null; + + // Try JSON first + try { + const parsed = JSON.parse(value); + if (typeof parsed === 'object' && parsed !== null) { + return { type: 'json', data: parsed }; + } + } catch (e) { + // Not JSON, continue + } + + // Try PHP serialized + try { + // Check if it looks like PHP serialized format + if (/^[abidsNO]:[^;]*;/.test(value) || /^a:\d+:\{/.test(value)) { + const parsed = phpUnserialize(value); + if (typeof parsed === 'object' && parsed !== null) { + return { type: 'serialized', data: parsed }; + } + } + } catch (e) { + // Not serialized + } + + return null; + }; + + // Open nested editor modal + const openNestedEditor = (value, path) => { + const detected = detectNestedData(value); + if (detected) { + setNestedEditModal({ path, value, type: detected.type }); + setNestedData(detected.data); + } + }; + + // Save nested editor changes + const saveNestedEdit = () => { + if (!nestedEditModal || !nestedData) return; + + // Convert back to string based on type + let stringValue; + if (nestedEditModal.type === 'json') { + stringValue = JSON.stringify(nestedData); + } else if (nestedEditModal.type === 'serialized') { + stringValue = phpSerialize(nestedData); + } + + // Update the value in the main data + updateValue(stringValue, nestedEditModal.path); + + // Close modal + setNestedEditModal(null); + setNestedData(null); + }; + + // Close nested editor modal + const closeNestedEditor = () => { + setNestedEditModal(null); + setNestedData(null); + }; + const toggleNode = (path) => { const newExpanded = new Set(expandedNodes); if (newExpanded.has(path)) { @@ -431,23 +600,34 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
) : ( - (fieldTypes[path] === 'longtext' || (typeof value === 'string' && value.includes('\n'))) ? ( -