chore: update TODO.md to mark Markdown Editor MVP tasks as completed
This commit is contained in:
Dwindi Ramadhana
368
TODO.md
368
TODO.md
@@ -179,310 +179,168 @@
|
||||
|
||||
---
|
||||
|
||||
### 💵 Priority 3: AdSense Integration (1 day) - ⏳ IN PROGRESS
|
||||
### 💵 Priority 3: Adsterra Integration (1 day) - ✅ COMPLETED
|
||||
|
||||
#### 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)
|
||||
#### Adsterra Setup
|
||||
- [x] Apply for Adsterra publisher account
|
||||
- [x] Add website URL
|
||||
- [x] Receive approval
|
||||
|
||||
#### 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 (300x250)
|
||||
- [ ] Create ad unit: Mobile Bottom Banner (320x50)
|
||||
- [ ] Copy ad unit codes
|
||||
- [x] Create ad unit: Desktop Sidebar 1 (300x250)
|
||||
- [x] Create ad unit: Desktop Sidebar 2 (300x250)
|
||||
- [x] Create ad unit: Mobile Bottom Banner (320x50)
|
||||
- [x] Copy ad unit codes
|
||||
- [x] Request Anti-Adblock custom domain
|
||||
|
||||
#### Implementation
|
||||
- [ ] Add AdSense script to `public/index.html`
|
||||
```html
|
||||
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXX"
|
||||
crossorigin="anonymous"></script>
|
||||
```
|
||||
- [ ] Update `AdBlock.jsx` with AdSense code
|
||||
```jsx
|
||||
<ins className="adsbygoogle"
|
||||
style={{ display: 'block' }}
|
||||
data-ad-client="ca-pub-XXXXXXXX"
|
||||
data-ad-slot="XXXXXXXXXX"
|
||||
data-ad-format="auto"
|
||||
data-full-width-responsive="true"></ins>
|
||||
```
|
||||
- [ ] Update `MobileAdBanner.jsx` with AdSense code
|
||||
- [ ] Initialize ads: `(adsbygoogle = window.adsbygoogle || []).push({});`
|
||||
- [x] Update `AdBlock.jsx` with Adsterra iframe code
|
||||
- [x] Update `MobileAdBanner.jsx` with Adsterra iframe code
|
||||
- [x] Update custom Anti-Adblock domain (`downconvenientmagnetic.com`)
|
||||
|
||||
#### 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
|
||||
- [x] Test ad display on desktop
|
||||
- [x] Test ad display on mobile
|
||||
- [x] Verify ads load correctly
|
||||
- [x] Check for console errors
|
||||
- [x] 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
|
||||
- [x] Monitor ad impressions
|
||||
- [x] Monitor ad clicks
|
||||
- [x] Track CTR (Click-Through Rate)
|
||||
|
||||
#### 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)
|
||||
- [x] Create Privacy Policy page
|
||||
- [x] Data collection disclosure
|
||||
- [x] Cookie usage disclosure
|
||||
- [x] Third-party services (Adsterra)
|
||||
- [x] User rights (GDPR)
|
||||
- [x] Create Terms of Service page
|
||||
- [x] Acceptable use policy
|
||||
- [x] Disclaimer
|
||||
- [x] Limitation of liability
|
||||
- [x] Add cookie consent banner
|
||||
- [x] Add "Privacy Policy" link in footer
|
||||
- [x] Add "Terms of Service" link in footer
|
||||
|
||||
---
|
||||
|
||||
## 📋 Phase 2: Content Expansion
|
||||
|
||||
### 📝 Markdown Editor - MVP (1-2 weeks) - ✅ COMPLETED (Oct 22, 2025)
|
||||
### 📝 Markdown Editor - MVP (1-2 weeks) - ✅ COMPLETED
|
||||
|
||||
#### Planning
|
||||
- [ ] Finalize feature list for MVP
|
||||
- [ ] Design UI mockup (split view)
|
||||
- [ ] Plan component structure
|
||||
- [ ] Choose markdown parser (marked vs markdown-it)
|
||||
- [ ] Plan export formats
|
||||
- [x] Finalize feature list for MVP
|
||||
- [x] Design UI mockup (WYSIWYG layout)
|
||||
- [x] Plan component structure
|
||||
- [x] Implement Tiptap integration
|
||||
- [x] Plan export formats
|
||||
|
||||
#### Project Setup
|
||||
- [ ] Create `MarkdownEditor.jsx` page
|
||||
- [ ] Set up routing (`/markdown-editor`)
|
||||
- [ ] Add to navigation menu
|
||||
- [ ] Add to homepage tools list
|
||||
- [x] Create `MarkdownEditor.jsx` page
|
||||
- [x] Create `RichMarkdownEditor.js` component
|
||||
- [x] Set up routing (`/markdown-editor`)
|
||||
- [x] Add to navigation menu
|
||||
- [x] 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
|
||||
- [x] Implement Create New tab
|
||||
- [x] Start Empty button
|
||||
- [x] Load Sample button (with example markdown)
|
||||
- [x] Tip box
|
||||
- [x] Implement URL tab
|
||||
- [x] Use AdvancedURLFetch component
|
||||
- [x] Support GitHub raw URLs
|
||||
- [x] Support Gist URLs
|
||||
- [x] Test with various markdown sources
|
||||
- [x] Implement Paste tab
|
||||
- [x] CodeMirror editor
|
||||
- [x] Markdown syntax highlighting
|
||||
- [x] Parse button
|
||||
- [x] Implement Open tab
|
||||
- [x] Support .md files
|
||||
- [x] Support .txt files
|
||||
- [x] 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
|
||||
- [x] Implement WYSIWYG Editor (Tiptap)
|
||||
- [x] Install `@tiptap/react` and `tiptap-markdown`
|
||||
- [x] Add standard text formatting (bold, italic, strike)
|
||||
- [x] Add block formatting (headers, quotes, lists)
|
||||
- [x] Add inline code and code block extensions
|
||||
- [x] Set up Lowlight syntax highlighting
|
||||
- [x] Implement view mode toggle
|
||||
- [x] Read mode (Clean preview default)
|
||||
- [x] Edit mode (WYSIWYG Tiptap)
|
||||
- [x] Markdown mode (Raw CodeMirror)
|
||||
- [x] Fullscreen mode
|
||||
- [x] Add editor features
|
||||
- [x] Word count
|
||||
- [x] Character count
|
||||
- [x] Line count
|
||||
- [x] 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
|
||||
- [x] Build robust HTML to Markdown / Markdown to HTML sync
|
||||
- [x] Set up markdown fallback parser (marked)
|
||||
- [x] GitHub Flavored Markdown support (Tables, task lists)
|
||||
- [x] Custom code block rendering with Copy button in Read mode
|
||||
|
||||
#### 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
|
||||
- [x] Create collapsible export section
|
||||
- [x] Implement Markdown export
|
||||
- [x] Copy to clipboard
|
||||
- [x] Download as .md file
|
||||
- [x] Implement HTML export
|
||||
- [x] Standalone HTML with CSS
|
||||
- [x] Download as .html file
|
||||
- [x] Implement HTML Content export
|
||||
- [x] Strip React/Tailwind wrapper classes
|
||||
- [x] Download body HTML only
|
||||
- [x] Implement Plain Text export
|
||||
- [x] Strip markdown syntax via regex
|
||||
- [x] Download as .txt file
|
||||
- [x] Implement PDF export
|
||||
- [x] Install html2pdf.js
|
||||
- [x] Inject CSS print media rules to prevent pre overflow
|
||||
- [x] Download as .pdf file
|
||||
|
||||
#### Data Loss Prevention
|
||||
- [ ] Implement hasUserData() function
|
||||
- [ ] Implement hasModifiedData() function
|
||||
- [ ] Add confirmation modal for tab changes
|
||||
- [ ] Add confirmation for Create New buttons
|
||||
- [x] Implement `hasUserData()` function
|
||||
- [x] Implement `hasModifiedData()` function
|
||||
- [x] Add confirmation modal for tab changes
|
||||
- [x] 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)
|
||||
- [x] Test all input methods
|
||||
- [x] Test Tiptap to Markdown serialization
|
||||
- [x] Test all export formats
|
||||
- [x] Test code syntax highlighting
|
||||
- [x] Test view mode toggle
|
||||
- [x] Test toolbar buttons
|
||||
- [x] Test responsive design
|
||||
- [x] Test dark mode
|
||||
|
||||
---
|
||||
|
||||
### 📝 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 emoji support (WYSIWYG picker)
|
||||
- [ ] 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
|
||||
- [ ] Add mermaid diagram rendering
|
||||
- [ ] Implement Table of Contents auto-generation
|
||||
|
||||
#### 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)
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user