chore: update TODO.md to mark Markdown Editor MVP tasks as completed
This commit is contained in:
Dwindi Ramadhana
@@ -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 `<input type="file">` 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.
|
||||
@@ -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 `<input type="file">` 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.
|
||||
@@ -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)
|
||||
|
||||
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