md-editor/README.md

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

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