# Markdown Editor Mini-App Implementation

## Overview

Create a new Markdown Editor mini-app at `/markdown-editor` with a split-pane editor/preview interface, sticky control bar with layout buttons and Prettier formatting (via Web Worker), and live markdown rendering.

## Files to Create

1. **`markdown-editor.html`** - Root HTML entrypoint (similar to `calculator.html`)
2. **`src/markdown-editor/main.tsx`** - React entrypoint with BrowserRouter basename logic
3. **`src/markdown-editor/App.tsx`** - Main component with editor, preview, and control bar
4. **`src/markdown-editor/prettier.worker.ts`** - Web Worker for Prettier formatting
5. **`docs/prompts/markdown-editor/initial-prompt.md`** - Store the original user prompt
6. **`docs/prompts/markdown-editor/initial-build-plan.md`** - Store this build plan

## Files to Modify

1. **`vite.config.ts`** - Add proxy rewrite and build input entry
2. **`index.html`** - Add link to Markdown Editor in the apps list

## Implementation Details

### App Structure

- **Sticky Control Bar**: Fixed at top with buttons:

  - `7/3`: Sets editor width to 70%, preview to 30%
  - `5/5`: Sets editor width to 50%, preview to 50%
  - `3/7`: Sets editor width to 30%, preview to 70%
  - `Format`: Triggers Prettier formatting in Web Worker

- **Split View**:
  - Left: Scrollable `<textarea>` for markdown input
  - Right: Scrollable `<div>` with rendered markdown HTML (using `marked` library)
  - Both sections use flexbox with dynamic width percentages

### Prettier Integration

- Use Prettier standalone 3.7.4 from `https://unpkg.com/prettier@3.7.4/standalone.mjs`
- Load required plugins:
  - `prettier/plugins/markdown.mjs` (for markdown formatting)
  - `prettier/plugins/estree.mjs` (required for embedded code)
- Web Worker receives markdown text, formats it, and posts formatted result back
- Main thread updates editor content with formatted result

### Markdown Rendering

- Use existing `marked` library (v12.0.0) already in dependencies
- Parse markdown on editor content change
- Render HTML in preview pane with appropriate styling

### Styling

- Use Tailwind CSS utilities
- Control bar: `fixed top-0 left-0 right-0` with `z-10`
- Split view: `flex` container with dynamic width classes
- Editor: `textarea` with `resize-none`, `overflow-auto`, monospace font
- Preview: `div` with `overflow-auto`, proper markdown styling (prose classes if available, or custom styles)
- Footer: Add documentation links section (similar to `clipboard-mgr/App.tsx` lines 456-480) with links to prompt and plan files

## Technical Notes

- Follow the basename pattern from `src/calculator/main.tsx`
- Web Worker file should be placed in `src/markdown-editor/` and imported using Vite's worker syntax
- Handle Prettier errors gracefully (show toast notification on failure)
- Ensure both editor and preview are independently scrollable