Bruno Charest
5e8cddf92e
docs: remove outdated implementation documentation files - Deleted AI_TOOLS_IMPLEMENTATION.md (296 lines) - outdated AI tools integration guide - Deleted ALIGN_INDENT_COLUMNS_FIX.md (557 lines) - obsolete column alignment fix documentation - Deleted BLOCK_COMMENTS_IMPLEMENTATION.md (400 lines) - superseded block comments implementation notes - Deleted DRAG_DROP_COLUMNS_IMPLEMENTATION.md (500 lines) - outdated drag-and-drop columns guide - Deleted INLINE_TOOLBAR_IMPLEMENTATION.md (350 lines) - obsol
8.3 KiB
8.3 KiB
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
- Créer
toc-panel.component.ts - Service pour extraire les headings (H1, H2, H3)
- Panel flottant sur la droite
- Bouton toggle (icône ≡) en haut à droite
- Hiérarchie visuelle des titres (indentation)
- Clic sur item scroll vers le heading
- Auto-collapse/expand des sections
1.2 Condition d'affichage
- Bouton TOC visible seulement si au moins 1 heading (H1, H2, ou H3) existe
- Icône:
≡(menu hamburger à 3 lignes) - Position: en haut à droite du document
- Animation smooth pour l'ouverture/fermeture
1.3 Visuels du panel TOC
- Background:
dark:bg-gray-800 - Border left:
border-l border-gray-700 - Width:
280px - Padding:
p-4 - Items avec hover effect
- Indentation: H1 (0px), H2 (16px), H3 (32px)
- 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"
- Étendre interface
QuotePropsaveclineColor?: string - Ajouter palette de couleurs dans menu contextuel
- Appliquer la couleur à
border-left - Mise à jour du modèle de données
2.2 Menu contextuel Quote
- "Background color" (existant)
- "Line color" (nouveau) - sous Background color
- Même palette de 20 couleurs que Background
- Preview en temps réel
Référence: Image 4
2.3 Format final
- Ligne verticale gauche =
line color - 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
- Étendre interface
HintPropsavec:borderColor?: stringlineColor?: string
- "Border color" dans menu contextuel
- "Line color" dans menu contextuel
- Appliquer les couleurs au CSS
3.2 Menu contextuel Hint
- "Background color" (existant)
- "Border color" (nouveau)
- "Line color" (nouveau)
- Palette de 20 couleurs pour chaque option
Référence: Image 3
3.3 Format final + Icon Picker
- Ligne verticale gauche =
line color - Bordures haut/droite/bas =
border color - Fond du bloc =
background color - Forme rectangulaire
- 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
- Créer service
CodeThemeService - Liste des thèmes:
- Darcula
- Default
- MBO
- MDN
- Monokai
- Neat
- NEO
- Nord ✓ (actif dans image)
- Yeti
- Yonce
- Zenburn
4.2 Menu contextuel Code enrichi
- "Language" - submenu avec langages
- "Theme" - submenu avec thèmes (Image 6)
- "Copy to clipboard" - copie le code
- "Enable wrap" - toggle word wrap
- "Hide line numbers" - toggle numéros de ligne
4.3 Visuels du bloc Code
- Ligne de sélection language en haut (petit select)
- Appliquer le thème sélectionné
- Line numbers optionnels
- Word wrap optionnel
Référence: Images 5, 6
5. Bloc Table - Menu Complet 📊 Priority: HIGH ✅ COMPLÉTÉ
5.1 Options du menu Table
- Comment (existant)
- Add block (existant)
- Add caption (nouveau)
- Background color (existant)
- Table layout - submenu avec layouts
- Duplicate (existant)
- Copy table (nouveau) - copie markdown/CSV
- Lock block (existant)
- Filter (nouveau) - filtre les lignes
- Copy Link (existant)
- Import from CSV (nouveau)
- Delete (existant)
- Help (nouveau) - ouvre doc
5.2 Contrôles de colonnes
- Dropdown "All: 2" pour largeur colonnes (Image 7)
- Icônes en haut:
- Insert column left
- Insert column center
- Insert column right
5.3 Caption
- Ajouter
caption?: stringdansTableProps - Input pour éditer le caption
- Position: sous le tableau
Référence: Images 7, 8
6. Bloc Image - Resize & Menu Étendu 🖼️ Priority: HIGH
6.1 Resize handles
- 8 points de contrôle (4 coins + 4 milieux)
- Hover sur image affiche les handles
- 3 points en haut droite pour actions rapides:
- Aspect ratio
- Crop
- Settings
- Point central en bas pour stretch vertical
- Resize fluide avec preview
6.2 Menu contextuel Image enrichi
- Icônes en haut:
- Aspect ratio presets (4 icônes)
- Comment (existant)
- Add block (existant)
- Add caption (nouveau)
- Convert to (existant)
- Replace (nouveau) - remplace l'image
- Rotate (nouveau) - rotation 90°
- Set as preview (nouveau) - image de couverture
- Get text from image (nouveau) - OCR
- Download (nouveau)
- View full size (nouveau)
- Open in new tab (nouveau)
- Image info (nouveau) - dimensions, poids
- Layout - submenu alignements
- Background color (existant)
- Duplicate (existant)
- Copy block (existant)
- Lock block (existant)
- Copy Link (existant)
- Delete (existant)
6.3 Visuels resize
- Handles: cercles blancs avec border gris
- Hover effect: scale 1.2
- Lignes de connexion bleu clair
- 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)
- Add block: sous-menu positions (Above, Below, Left, Right)
7.2 Options spécifiques par bloc
- Quote: Line color
- Hint: Border color + Line color
- Code: Language + Theme + options
- Table: Caption + Layout + Filter + Import CSV + Help
- Image: Menu complet (15+ options)
8. UX Improvements 🎯 Priority: MEDIUM
8.1 Navigation fluide
- TOC scroll smooth vers sections
- Highlight du heading actif dans TOC
- Auto-update TOC quand headings changent
8.2 Feedback visuel
- Preview couleurs en temps réel
- Animation d'ouverture/fermeture TOC
- Hover states cohérents
- Transitions smooth (200-300ms)
8.3 Accessibility
- Keyboard shortcuts pour TOC (Ctrl+)
- Focus management
- ARIA labels
- 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é
-
Phase 1 - Fondations (2-3h)
- TOC Component & Service
- Étendre interfaces des blocs
- Menu contextuel: nouvelles options
-
Phase 2 - Blocs simples (2-3h)
- Quote: Line color
- Hint: Border + Line color
- Code: Thèmes + menu
-
Phase 3 - Blocs complexes (3-4h)
- Table: Caption + options avancées
- Image: Resize handles + menu complet
-
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
- TOC fonctionnel avec auto-update
- Menus contextuels enrichis et fonctionnels
- Resize d'images fluide
- Tests passés (visuels + fonctionnels)
- 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