# 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.