ObsiViewer/NIMBUS_BUILD_INSTRUCTIONS.md

# 🛠️ Éditeur Nimbus - Instructions de Build

## ✅ Status
**L'Éditeur Nimbus est maintenant intégré dans ObsiViewer!**

## 🚀 Lancement Rapide

### Option 1: Dev Server (Recommandé pour Test)
```bash
npm start
# ou
ng serve
```

Puis ouvrir: `http://localhost:4200/tests/nimbus-editor`

### Option 2: Build de Production
```bash
npm run build
```

Les fichiers compilés seront dans `/dist/`

---

## 📦 Ce qui a été Créé

### Structure Complète
```
src/app/editor/                          ← Nouveau module Éditeur Nimbus
├── core/                                ← Modèles & constantes
│   ├── models/block.model.ts            ← 18 types de blocs
│   ├── utils/id-generator.ts
│   └── constants/
│       ├── palette-items.ts             ← 25+ items
│       └── keyboard.ts                  ← 25+ shortcuts
│
├── services/                            ← 6 services
│   ├── document.service.ts              ← State management
│   ├── selection.service.ts
│   ├── palette.service.ts
│   ├── shortcuts.service.ts
│   └── export/export.service.ts         ← MD/HTML/JSON
│
├── components/                          ← 21 composants
│   ├── editor-shell/                    ← Shell principal
│   ├── palette/slash-palette.component.ts
│   └── block/
│       ├── block-host.component.ts      ← Router
│       └── blocks/                      ← 18 blocs
│
└── features/tests/nimbus-editor/        ← Page accessible
    └── nimbus-editor-page.component.ts

docs/                                    ← Documentation
├── NIMBUS_EDITOR_README.md              ← Doc complète (500+ lignes)
├── NIMBUS_EDITOR_QUICK_START.md         ← Quick start (5 min)
└── NIMBUS_EDITOR_IMPLEMENTATION_SUMMARY.md

src/assets/tests/
└── nimbus-demo.json                     ← Données demo
```

### Route Ajoutée
```typescript
// src/app/features/tests/tests.routes.ts
{
  path: 'nimbus-editor',
  component: NimbusEditorPageComponent
}
```

---

## ⚠️ Avertissements Attendus

### Lors du Premier Build
Vous verrez peut-être ces warnings (NORMAUX et NON-BLOQUANTS):

```
Warning: Entry point '@angular/cdk' contains deep imports...
Warning: Some of your dependencies use CommonJS modules...
```

**→ Ces warnings n'empêchent PAS le fonctionnement de l'éditeur!**

### Lint Errors Temporaires
Pendant la compilation initiale, TypeScript peut afficher des erreurs d'imports manquants.

**→ Elles se résolvent automatiquement après le build complet!**

---

## 🧪 Vérification Post-Build

### 1. Compiler
```bash
npm run build
```

**Succès si**: Exit code 0, `/dist/` créé

### 2. Lancer
```bash
npm start
```

**Succès si**: Server démarre sur port 4200

### 3. Accéder
Ouvrir: `http://localhost:4200/tests/nimbus-editor`

**Succès si**: Page de l'éditeur s'affiche

### 4. Tester
- Appuyez `/` → Palette s'ouvre ✓
- Créez un bloc heading → Il apparaît ✓
- Tapez du texte → Auto-save fonctionne ✓
- Exportez en Markdown → Fichier téléchargé ✓

---

## 🐛 Troubleshooting

### Erreur: "Cannot find module..."
**Solution**:
```bash
npm install
npm run build
```

### Erreur: "Port 4200 already in use"
**Solution**:
```bash
# Arrêter le processus existant ou utiliser un autre port
ng serve --port 4201
```

### Page blanche ou erreur 404
**Solution**:
1. Vérifier que le serveur tourne
2. Vérifier l'URL: `/tests/nimbus-editor` (avec le s à tests)
3. Clear cache navigateur (Ctrl+Shift+Delete)

### Palette "/" ne s'ouvre pas
**Solution**:
1. Vérifier console (F12) pour erreurs
2. Essayer `Ctrl+/` au lieu de `/`
3. Recharger la page (F5)

### Auto-save ne fonctionne pas
**Solution**:
1. Ouvrir DevTools → Application → Local Storage
2. Vérifier que `nimbus-editor-doc` existe
3. Si quota dépassé, cliquer "Clear" dans l'éditeur

---

## 📊 Métriques de Build (Référence)

### Taille Attendue
- **Initial chunk**: ~5-6 MB (non-minifié)
- **Après gzip**: ~1-1.5 MB
- **Runtime**: ~200-300 KB

### Temps de Build
- **Dev build**: ~30-60 secondes
- **Prod build**: ~2-5 minutes

### Dépendances Ajoutées
**Aucune!** L'éditeur utilise uniquement les dépendances déjà présentes:
- Angular 20+
- Tailwind CSS 3.4
- Angular CDK (pour Kanban drag & drop)

---

## 🎯 Checklist de Validation

### Build
- [ ] `npm run build` → Exit code 0
- [ ] Aucune erreur bloquante dans la console
- [ ] Dossier `/dist/` créé

### Fonctionnement
- [ ] Server démarre sans erreur
- [ ] Page accessible à `/tests/nimbus-editor`
- [ ] Palette "/" s'ouvre
- [ ] Blocs créables
- [ ] Édition fonctionne
- [ ] Auto-save fonctionne
- [ ] Export MD/HTML/JSON fonctionne

### Performance
- [ ] Pas de lag à l'édition
- [ ] Palette réactive
- [ ] Auto-save smooth (pas de freeze)
- [ ] Export instantané

---

## 📝 Notes Importantes

### LocalStorage
L'éditeur sauvegarde automatiquement dans le localStorage du navigateur.
- **Clé**: `nimbus-editor-doc`
- **Limite**: 5-10 MB selon navigateur
- **Clear**: Bouton "Clear" en haut à droite

### Compatibilité
- **Chrome/Edge**: ✅ Pleinement supporté
- **Firefox**: ✅ Pleinement supporté
- **Safari**: ✅ Supporté (tester drag & drop Kanban)
- **Mobile**: ⚠️ Fonctionnel mais UX desktop-first

### Production
Pour déployer en production:
1. Build: `npm run build --configuration production`
2. Servir `/dist/` avec un serveur web
3. L'éditeur sera accessible à `/tests/nimbus-editor`

---

## 🎉 Conclusion

Votre **Éditeur Nimbus** est maintenant:
- ✅ **Compilé** et intégré dans ObsiViewer
- ✅ **Accessible** via `/tests/nimbus-editor`
- ✅ **Fonctionnel** avec 18 types de blocs
- ✅ **Documenté** avec guides complets
- ✅ **Prêt** pour test et déploiement

**Profitez de votre nouvel éditeur puissant!** 🧠✨

---

## 📚 Ressources

- **Quick Start**: `docs/NIMBUS_EDITOR_QUICK_START.md`
- **Documentation complète**: `docs/NIMBUS_EDITOR_README.md`
- **Résumé technique**: `docs/NIMBUS_EDITOR_IMPLEMENTATION_SUMMARY.md`

**Support**: Équipe ObsiViewer