From e4ccff4bbf6d7006b7cbde61aec940c45e71f2ae Mon Sep 17 00:00:00 2001 From: Dwindi Ramadhana Date: Sun, 14 Jun 2026 13:30:37 +0700 Subject: [PATCH] chore: update TODO.md to mark Markdown Editor MVP tasks as completed --- MARKDOWN_EDITOR_REWRITE_PLAN.md | 46 ---- MARKDOWN_EDITOR_UX_FINDINGS.md | 21 -- PROJECT_ROADMAP.md | 55 +++-- TODO.md | 368 ++++++++++---------------------- test.html | 1 - 5 files changed, 138 insertions(+), 353 deletions(-) delete mode 100755 MARKDOWN_EDITOR_REWRITE_PLAN.md delete mode 100755 MARKDOWN_EDITOR_UX_FINDINGS.md delete mode 100755 test.html diff --git a/MARKDOWN_EDITOR_REWRITE_PLAN.md b/MARKDOWN_EDITOR_REWRITE_PLAN.md deleted file mode 100755 index 4201446b..00000000 --- a/MARKDOWN_EDITOR_REWRITE_PLAN.md +++ /dev/null @@ -1,46 +0,0 @@ -# Markdown Editor - Architecture Rewrite Plan - -## Context & Motivation -The current Markdown Editor violates the core UX philosophy of the Dewe.Dev suite: `[input] program -> [process/edit] human -> [output] program`. - -Currently, users input Markdown and edit raw Markdown in a CodeMirror instance. To align with the rest of the suite (Object Editor, Table Editor, Invoice Editor), the tool must provide a **WYSIWYG (What You See Is What You Get) Rich Text Editor**. The user should interact with human-readable text visually, while the system seamlessly translates it back to raw Markdown/HTML for export. - -## Phase 1: Dependency Updates & Tiptap Integration -To achieve a robust WYSIWYG experience that translates perfectly to/from Markdown, we will use **Tiptap** (a headless wrapper around ProseMirror). - -**Dependencies to Install:** -* `@tiptap/react` -* `@tiptap/starter-kit` (Core formatting) -* `@tiptap/extension-link` (Hyperlinks) -* `@tiptap/extension-image` (Image support) -* `@tiptap/extension-table` (Table support) -* `@tiptap/extension-task-list` & `@tiptap/extension-task-item` -* `tiptap-markdown` (Crucial: Handles native parsing/serializing of markdown to the Tiptap state) - -**Dependencies to Remove:** -* `marked` (Tiptap handles parsing now) -* `dompurify` (Tiptap handles sanitization) -* Custom CodeMirror Markdown implementations inside `MarkdownEditor.js` (We will keep CodeMirror only for the final "Export Code" view, if needed). - -## Phase 2: Component Restructuring -Create a new component: `RichMarkdownEditor.js`. -This component will replace the split-view CodeMirror setup. - -**Features of `RichMarkdownEditor.js`:** -1. **Floating/Sticky Toolbar:** Similar to Google Docs or Notion. Bold, Italic, H1-H3, Lists, Blockquotes, Code Blocks. -2. **Interactive Editor Content:** The actual prose area where users type naturally. -3. **Two-way Binding:** When the Tiptap state updates, it immediately serializes the state to a hidden Markdown string, which is saved to `localStorage` (for data-loss prevention) and readied for export. - -## Phase 3: UX Flow Adjustments (Addressing Previous Findings) -* **Input Flow:** User pastes Markdown -> Tiptap parses it via `tiptap-markdown` -> User sees rendered Rich Text immediately (Fixes UX Gap #3 from previous findings). -* **View Modes:** Remove the complex "Split View" vs "Editor Only" logic. The primary view is *always* the Rich Text Editor. -* **File Uploads:** Restrict the `` to only accept `.md` and `.txt` files. Remove UI mentions of `.html` or `.docx` until a dedicated parser (like mammoth.js) is explicitly implemented (Fixes UX Gap #2). - -## Phase 4: Export Engine -The Export card will now feature: -1. **Raw Markdown:** A read-only CodeMirror block displaying the exact Markdown output generated by Tiptap, with "Copy" and "Download" buttons. -2. **HTML:** Tiptap's `editor.getHTML()` output. -3. **PDF Export:** Retain `html2pdf.js`, but explicitly inject CSS print rules (`break-inside: avoid`, `white-space: pre-wrap`) targeting Tiptap's code block classes to prevent page overflow (Fixes UX Gap #4). - -## Summary -By executing this rewrite, the Markdown Editor will transition from a basic code validator into a premium document translation hub, perfectly aligning with the product's overarching vision. diff --git a/MARKDOWN_EDITOR_UX_FINDINGS.md b/MARKDOWN_EDITOR_UX_FINDINGS.md deleted file mode 100755 index d928799e..00000000 --- a/MARKDOWN_EDITOR_UX_FINDINGS.md +++ /dev/null @@ -1,21 +0,0 @@ -# Markdown Editor UX Findings & Proposed Improvements - -## 1. Core Goal Misalignment (The Primary UX Defect) -**Current State:** The user inputs markdown (via paste, URL, file, or typing), and the primary editing experience happens in a raw text editor (CodeMirror) where they edit markdown syntax. The "rendered" version is read-only (Preview). -**The Gap:** As a developer tool, the goal is often to translate system language (markdown) into human language (rich text) *and vice-versa*. Humans expect a WYSIWYG (What You See Is What You Get) document editor experience. -**The Proposed Fix:** The "Preview" should actually be an interactive, editable Rich Text interface. A user should be able to input raw markdown, see the rich text, *edit the rich text visually like a Word document*, and then export the result back to raw markdown. - -## 2. File Import Format Limitations -**Current State:** The UI implies users can open files. -**The Gap:** `.html` and `.docx` imports require external libraries (`turndown`, `mammoth.js`) which are not yet fully implemented according to the Phase 2 roadmap. -**The Proposed Fix:** Restrict the `` to `.md` and `.txt` until the conversion logic is built, preventing users from loading raw binary/HTML into the text editor. - -## 3. View Mode Toggles & Workflow -**Current State:** Defaults to 'split' on desktop and 'editor' on mobile. After importing data, it jumps to the raw editor. -**The Gap:** Similar to the Object Editor, jumping straight to raw code isn't ideal. -**The Proposed Fix:** After data is provided, default to the (newly proposed) Rich Text / Preview mode first. - -## 4. PDF Export Styling -**Current State:** Uses `html2pdf.js` for export. -**The Gap:** Long code blocks in markdown often overflow the page boundaries when converted to PDF because CSS print media rules for `white-space: pre-wrap` or `break-inside` are missing. -**The Proposed Fix:** Inject print-specific CSS rules before triggering the PDF export to ensure code blocks wrap gracefully. diff --git a/PROJECT_ROADMAP.md b/PROJECT_ROADMAP.md index dd873534..f0038494 100755 --- a/PROJECT_ROADMAP.md +++ b/PROJECT_ROADMAP.md @@ -131,37 +131,36 @@ Build a comprehensive suite of developer tools with a focus on: --- -#### Priority 3: AdSense Integration 💵 -**Status:** ⏳ In Progress (Awaiting approval) +#### Priority 3: Adsterra Integration 💵 +**Status:** ✅ Completed **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 +1. ✅ Apply for Adsterra account +2. ✅ Add Adsterra anti-adblock script to `index.html` and components +3. ✅ Create ad units in Adsterra dashboard +4. ✅ Implement ad components with Adsterra code +5. ✅ Test ad display and responsiveness **Ad Units Needed:** -- Desktop Sidebar 1 (300x250) -- Desktop Sidebar 2 (300x250) -- Desktop Sidebar 3 (300x250) -- Mobile Bottom Banner (320x50) +- ✅ Desktop Sidebar 1 (300x250) +- ✅ Desktop Sidebar 2 (300x250) +- ✅ Desktop Sidebar 3 (300x250) +- ✅ Mobile Bottom Banner (320x50) **Compliance:** -- Add Privacy Policy page -- Add Terms of Service page -- Cookie consent banner (if required) -- GDPR compliance (if applicable) +- ✅ Add Privacy Policy page +- ✅ Add Terms of Service page +- ✅ Cookie consent banner +- ✅ GDPR compliance --- ### Phase 2: Content Expansion (Week 3-6) #### Markdown Editor 📝 -**Status:** ✅ Completed (October 22, 2025) +**Status:** ✅ Completed (June 14, 2026) **Timeline:** 1-2 weeks **Impact:** HIGH - Major new feature, attracts new users @@ -170,29 +169,25 @@ Build a comprehensive suite of developer tools with a focus on: - 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) + - Open Files (.md, .txt) - **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 + - Tiptap-powered WYSIWYG Rich Text Editor + - Fallback Raw Markdown CodeMirror Editor + - View modes: Read, Edit, Markdown + - Toolbar (Bold, Italic, Headers, Links, Images, Code, Lists, Tables) - Word count & statistics - **Preview:** - - Live rendering (marked + DOMPurify) + - Auto-generated HTML parsing - 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 + - Markdown (.md) + - HTML (.html) + - HTML Content Body - Plain Text (.txt) - PDF (.pdf) - via html2pdf - - DOCX (.docx) - via docx library **Advanced Features (Post-MVP):** - Tables support (GitHub-style) diff --git a/TODO.md b/TODO.md index 783483a3..598d5d9f 100755 --- a/TODO.md +++ b/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 - - ``` -- [ ] Update `AdBlock.jsx` with AdSense code - ```jsx - - ``` -- [ ] 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) --- diff --git a/test.html b/test.html deleted file mode 100755 index aadab66d..00000000 --- a/test.html +++ /dev/null @@ -1 +0,0 @@ -Test Page

Test Heading

Test paragraph

Test div