Bruno Charest
ee3085ce38
- Integrated Unsplash API for image search functionality with environment configuration - Added new Nimbus Editor page component with navigation from sidebar and mobile drawer - Enhanced TOC with highlight animation for editor heading navigation - Improved CDK overlay z-index hierarchy for proper menu layering - Removed obsolete logging validation script
300 lines
8.3 KiB
Markdown
300 lines
8.3 KiB
Markdown
# 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
|