# MD Editor

Éditeur markdown en temps réel avec prévisualisation instantanée, coloration syntaxique, persistance locale et thème clair/sombre.

## Fonctionnalités

- **Split view** : zone de texte à gauche, prévisualisation à droite
- **Rendu markdown temps réel** à chaque frappe
- **Coloration syntaxique** des blocs de code (highlight.js), fond sombre type VSCode
- **HTML sanitisé** avant injection (DOMPurify)
- **Sauvegarde automatique** dans le localStorage (restaurée au rechargement)
- **Bouton copier** le markdown ou le HTML (feedback visuel vert)
- **Bouton télécharger** le contenu en `download.md`
- **Bouton effacer** tout le contenu
- **Thème clair/sombre** persistable, transition douce 350ms
- **Responsive** jusqu'au mobile (panneaux empilés sous 768px)

## Stack technique

| Couche | Technologie |
|--------|-------------|
| Framework | React 19 + Vite 8 |
| Langage | TypeScript ~6.0 (ESM) |
| Styling | Tailwind CSS 4 (plugin `@tailwindcss/vite`) |
| Markdown | marked 18 + marked-highlight 2 |
| Coloration | highlight.js 11 |
| Sanitisation | DOMPurify 3 |
| Linter | oxlint |
| Package manager | pnpm |

## Prérequis

- Node.js ≥ 20
- pnpm ≥ 9 (ou utiliser npx si absent)

## Installation

```bash
# 1. Cloner et entrer dans le projet
git clone <url-du-repo> md-poc
cd md-poc

# 2. Installer les dépendances
pnpm install

# 3. Lancer le serveur de développement
pnpm dev
```

Ouvrir http://localhost:5173.

## Scripts

| Commande | Description |
|----------|-------------|
| `pnpm dev` | Serveur de développement (HMR) |
| `pnpm build` | Typecheck + build de production dans `dist/` |
| `pnpm lint` | Lint oxlint |
| `pnpm preview` | Prévisualise le build de production |

## Structure du projet

```
src/
  App.tsx                 # Orchestrateur : état markdown, parsing, handlers
  main.tsx                # Entry point React
  index.css               # Tailwind + variables de thème + styles markdown/hljs
  types/types.ts          # Types et interfaces partagés
  hooks/
    useTheme.ts           # Thème + persistance + data-theme
  components/
    Header.tsx            # Barre supérieure (titre, actions, toggle thème)
    CopyButton.tsx        # Bouton copie avec feedback "Copié !"
    EditorInput.tsx       # Textarea markdown
    Preview.tsx           # Prévisualisation HTML sanitisé
    ThemeToggle.tsx       # Bouton lune/soleil
  utils/
    download.ts           # Téléchargement download.md
```

## Détails techniques

### Rendu markdown
- `marked.use(markedHighlight(...))` configuré une fois en haut de `App.tsx`
- Bloc de code avec langage inconnu → fallback `plaintext`
- Le HTML généré passe **toujours** par `DOMPurify.sanitize` avant injection
- Mémorisation du parse avec `useMemo` (pas de recalcul au changement de thème)

### Thème
- Variables CSS (+ surcharge `[data-theme="dark"]`), pas de classes `dark:`
- `useTheme` persiste le choix sous la clé `md-theme` et pose `data-theme` sur `<html>`
- Les blocs de code restent sombres quel que soit le thème
- Transition 350ms avec support `prefers-reduced-motion`

### Persistance
- Contenu markdown : clé `md-content` (écrite à chaque frappe)

## Licence

MIT — voir le fichier [LICENSE](./LICENSE).