dewedev/MARKDOWN_EDITOR_REWRITE_PLAN.md

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.