47 lines
3.2 KiB
Markdown
Executable File
47 lines
3.2 KiB
Markdown
Executable File
# 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.
|