100 lines
3.2 KiB
Markdown
100 lines
3.2 KiB
Markdown
# 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). |