# Nimbus Editor - Refactoring TODO List

**Objectif**: Mettre à jour l'éditeur Nimbus pour correspondre exactement aux visuels de référence (Images 1-10)

---

## 1. Table of Contents (TOC) ✨ Priority: HIGH ✅ COMPLÉTÉ

### 1.1 Créer le composant TOC
- [x] Créer `toc-panel.component.ts`
- [x] Service pour extraire les headings (H1, H2, H3)
- [x] Panel flottant sur la droite
- [x] Bouton toggle (icône ≡) en haut à droite
- [x] Hiérarchie visuelle des titres (indentation)
- [x] Clic sur item scroll vers le heading
- [x] Auto-collapse/expand des sections

### 1.2 Condition d'affichage
- [x] Bouton TOC visible seulement si au moins 1 heading (H1, H2, ou H3) existe
- [x] Icône: `≡` (menu hamburger à 3 lignes)
- [x] Position: en haut à droite du document
- [x] Animation smooth pour l'ouverture/fermeture

### 1.3 Visuels du panel TOC
- [x] Background: `dark:bg-gray-800`
- [x] Border left: `border-l border-gray-700`
- [x] Width: `280px`
- [x] Padding: `p-4`
- [x] Items avec hover effect
- [x] Indentation: H1 (0px), H2 (16px), H3 (32px)
- [x] Positionné sous l'entête (ne recouvre pas le header)

**Référence**: Images 1, 2, 5

---

## 2. Bloc Quote - Enrichissement 🎨 Priority: MEDIUM ✅ COMPLÉTÉ

### 2.1 Ajouter option "Line color"
- [x] Étendre interface `QuoteProps` avec `lineColor?: string`
- [x] Ajouter palette de couleurs dans menu contextuel
- [x] Appliquer la couleur à `border-left`
- [x] Mise à jour du modèle de données

### 2.2 Menu contextuel Quote
- [x] "Background color" (existant)
- [x] **"Line color"** (nouveau) - sous Background color
- [x] Même palette de 20 couleurs que Background
- [x] Preview en temps réel

**Référence**: Image 4

### 2.3 Format final
- [x] Ligne verticale gauche = `line color`
- [x] Fond du bloc = `background color` (reste du bloc à droite de la ligne)

---

## 3. Bloc Hint - Enrichissement 🎨 Priority: MEDIUM ✅ COMPLÉTÉ

### 3.1 Ajouter options couleur
- [x] Étendre interface `HintProps` avec:
  - `borderColor?: string`
  - `lineColor?: string`
- [x] "Border color" dans menu contextuel
- [x] "Line color" dans menu contextuel
- [x] Appliquer les couleurs au CSS

### 3.2 Menu contextuel Hint
- [x] "Background color" (existant)
- [x] **"Border color"** (nouveau)
- [x] **"Line color"** (nouveau)
- [x] Palette de 20 couleurs pour chaque option

**Référence**: Image 3

### 3.3 Format final + Icon Picker
- [x] Ligne verticale gauche = `line color`
- [x] Bordures haut/droite/bas = `border color`
- [x] Fond du bloc = `background color`
- [x] Forme rectangulaire
- [x] Composant réutilisable `Icon Picker` + intégration sur clic de l'icône

---

## 4. Bloc Code - Thèmes Multiples 💻 Priority: HIGH ✅ COMPLÉTÉ

### 4.1 Système de thèmes
- [x] Créer service `CodeThemeService`
- [x] Liste des thèmes:
  - Darcula
  - Default
  - MBO
  - MDN
  - Monokai
  - Neat
  - NEO
  - Nord ✓ (actif dans image)
  - Yeti
  - Yonce
  - Zenburn

### 4.2 Menu contextuel Code enrichi
- [x] **"Language"** - submenu avec langages
- [x] **"Theme"** - submenu avec thèmes (Image 6)
- [x] **"Copy to clipboard"** - copie le code
- [x] **"Enable wrap"** - toggle word wrap
- [x] **"Hide line numbers"** - toggle numéros de ligne

### 4.3 Visuels du bloc Code
- [x] Ligne de sélection language en haut (petit select)
- [x] Appliquer le thème sélectionné
- [x] Line numbers optionnels
- [x] Word wrap optionnel

**Référence**: Images 5, 6

---

## 5. Bloc Table - Menu Complet 📊 Priority: HIGH ✅ COMPLÉTÉ

### 5.1 Options du menu Table
- [x] **Comment** (existant)
- [x] **Add block** (existant)
- [x] **Add caption** (nouveau)
- [x] **Background color** (existant)
- [x] **Table layout** - submenu avec layouts
- [x] **Duplicate** (existant)
- [x] **Copy table** (nouveau) - copie markdown/CSV
- [x] **Lock block** (existant)
- [x] **Filter** (nouveau) - filtre les lignes
- [x] **Copy Link** (existant)
- [x] **Import from CSV** (nouveau)
- [x] **Delete** (existant)
- [x] **Help** (nouveau) - ouvre doc

### 5.2 Contrôles de colonnes
- [x] Dropdown "All: 2" pour largeur colonnes (Image 7)
- [x] Icônes en haut: 
  - Insert column left
  - Insert column center
  - Insert column right

### 5.3 Caption
- [x] Ajouter `caption?: string` dans `TableProps`
- [x] Input pour éditer le caption
- [x] Position: sous le tableau

**Référence**: Images 7, 8

---

## 6. Bloc Image - Resize & Menu Étendu 🖼️ Priority: HIGH

### 6.1 Resize handles
- [x] 8 points de contrôle (4 coins + 4 milieux)
- [x] Hover sur image affiche les handles
- [x] 3 points en haut droite pour actions rapides:
  - Aspect ratio
  - Crop
  - Settings
- [x] Point central en bas pour stretch vertical
- [x] Resize fluide avec preview

### 6.2 Menu contextuel Image enrichi
- [x] Icônes en haut:
  - Aspect ratio presets (4 icônes)
- [x] **Comment** (existant)
- [x] **Add block** (existant)
- [x] **Add caption** (nouveau)
- [x] **Convert to** (existant)
- [x] **Replace** (nouveau) - remplace l'image
- [x] **Rotate** (nouveau) - rotation 90°
- [x] **Set as preview** (nouveau) - image de couverture
- [ ] **Get text from image** (nouveau) - OCR
- [x] **Download** (nouveau)
- [x] **View full size** (nouveau)
- [x] **Open in new tab** (nouveau)
- [x] **Image info** (nouveau) - dimensions, poids
- [x] **Layout** - submenu alignements
- [x] **Background color** (existant)
- [x] **Duplicate** (existant)
- [x] **Copy block** (existant)
- [x] **Lock block** (existant)
- [x] **Copy Link** (existant)
- [x] **Delete** (existant)

### 6.3 Visuels resize
- [x] Handles: cercles blancs avec border gris
- [x] Hover effect: scale 1.2
- [x] Lignes de connexion bleu clair
- [x] Grid overlay pendant resize

**Référence**: Images 9, 10

---

## 7. Menu Contextuel Global 🎛️ Priority: MEDIUM

### 7.1 Améliorer structure générale
- [ ] Réorganiser l'ordre des items
- [ ] Ajouter icônes manquantes
- [ ] Améliorer les submenus (position, animation)
- [x] Add block: sous-menu positions (Above, Below, Left, Right)

### 7.2 Options spécifiques par bloc
- [x] Quote: Line color
- [x] Hint: Border color + Line color
- [x] Code: Language + Theme + options
- [x] Table: Caption + Layout + Filter + Import CSV + Help
- [x] Image: Menu complet (15+ options)

---

## 8. UX Improvements 🎯 Priority: MEDIUM

### 8.1 Navigation fluide
- [x] TOC scroll smooth vers sections
- [x] Highlight du heading actif dans TOC
- [x] Auto-update TOC quand headings changent

### 8.2 Feedback visuel
- [x] Preview couleurs en temps réel
- [x] Animation d'ouverture/fermeture TOC
- [ ] Hover states cohérents
- [ ] Transitions smooth (200-300ms)

### 8.3 Accessibility
- [x] Keyboard shortcuts pour TOC (Ctrl+\)
- [x] Focus management
- [x] ARIA labels
- [x] Tab navigation

---

## 9. Tests & Validation ✅ Priority: HIGH

### 9.1 Tests visuels
- [ ] Comparer chaque bloc avec images de référence
- [ ] Vérifier responsive (mobile/tablet/desktop)
- [ ] Tester mode clair/sombre

### 9.2 Tests fonctionnels
- [ ] TOC: création, navigation, update auto
- [ ] Quote: changement Line color
- [ ] Hint: changement Border + Line color
- [ ] Code: changement thème, language, options
- [ ] Table: caption, layout, filter, import CSV
- [ ] Image: resize, replace, rotate, OCR, etc.

### 9.3 Tests d'intégration
- [ ] Menu contextuel: toutes les options fonctionnent
- [ ] Sauvegarde/chargement: nouvelles props persistées
- [ ] Undo/Redo: historique correct
- [ ] Export: Markdown, PDF, JSON

---

## Ordre d'Implémentation Recommandé

1. **Phase 1** - Fondations (2-3h)
   - TOC Component & Service
   - Étendre interfaces des blocs
   - Menu contextuel: nouvelles options

2. **Phase 2** - Blocs simples (2-3h)
   - Quote: Line color
   - Hint: Border + Line color
   - Code: Thèmes + menu

3. **Phase 3** - Blocs complexes (3-4h)
   - Table: Caption + options avancées
   - Image: Resize handles + menu complet

4. **Phase 4** - Polish & Tests (2h)
   - UX improvements
   - Tests visuels/fonctionnels
   - Documentation

**Temps total estimé**: 9-12 heures

---

## Checklist de Livraison

- [ ] Tous les blocs correspondent aux visuels de référence
- [x] TOC fonctionnel avec auto-update
- [ ] Menus contextuels enrichis et fonctionnels
- [x] Resize d'images fluide
- [ ] Tests passés (visuels + fonctionnels)
- [x] Documentation mise à jour
- [ ] Code review complété
- [ ] Déploiement en staging

---

**Date de création**: 2024-11-09  
**Dernière mise à jour**: 2024-11-09  
**Status global**: 🚧 En cours