feat: add CodeMirror dependencies and implement markdown editor UI

2025-10-20 15:43:56 -04:00
parent 4d995bf7a9
commit 062d743481
17 changed files with 2541 additions and 13 deletions
@@ -0,0 +1,442 @@
+# Mode Édition Markdown - Documentation Technique
+
+## 🎯 Vue d'ensemble
+
+Le mode édition Markdown permet aux utilisateurs d'éditer directement leurs fichiers Markdown dans ObsiViewer avec un éditeur professionnel basé sur **CodeMirror 6**. L'éditeur est chargé dynamiquement (lazy loading) uniquement lors du passage en mode édition pour préserver les performances.
+
+## 📁 Architecture
+
+### Structure des fichiers
+
+```
+src/
+├── app/
+│   └── features/
+│       └── editor/
+│           ├── markdown-editor.module.ts           # Module lazy-loadable
+│           ├── markdown-editor.component.ts        # Composant principal de l'éditeur
+│           └── editor-can-deactivate.guard.ts     # Guard de navigation
+├── services/
+│   └── editor-state.service.ts                    # Service de gestion d'état
+├── components/
+│   ├── markdown-viewer/
+│   │   └── markdown-viewer.component.ts           # Bouton "Éditer" ajouté
+│   └── smart-file-viewer/
+│       └── smart-file-viewer.component.ts         # Intégration éditeur
+└── styles/
+    └── codemirror.css                             # Styles globaux CodeMirror
+```
+
+### Flux de données
+
+```
+┌─────────────────────┐
+│ markdown-viewer     │
+│ (Bouton "Éditer")   │
+└──────────┬──────────┘
+           │ editModeRequested(path, content)
+           ▼
+┌─────────────────────┐
+│ smart-file-viewer   │
+│ onEditModeRequested │
+└──────────┬──────────┘
+           │ enterEditMode(path, content)
+           ▼
+┌─────────────────────┐
+│ editor-state.service│
+│ (mode: 'edit')      │
+└──────────┬──────────┘
+           │ effect()
+           ▼
+┌─────────────────────┐
+│ smart-file-viewer   │
+│ loadEditor()        │
+└──────────┬──────────┘
+           │ dynamic import
+           ▼
+┌─────────────────────┐
+│ markdown-editor     │
+│ (CodeMirror 6)      │
+└─────────────────────┘
+```
+
+## 🔧 Composants clés
+
+### 1. EditorStateService (`editor-state.service.ts`)
+
+Service singleton qui gère l'état global du mode édition.
+
+**État géré:**
+```typescript
+interface EditorState {
+  mode: 'view' | 'edit';      // Mode actuel
+  currentPath: string | null;  // Chemin du fichier en cours d'édition
+  isDirty: boolean;            // Modifications non sauvegardées
+  content: string | null;      // Contenu en cours d'édition
+}
+```
+
+**Méthodes principales:**
+- `enterEditMode(path, content)` - Passe en mode édition
+- `exitEditMode()` - Quitte le mode édition
+- `setDirty(isDirty)` - Marque le contenu comme modifié
+- `updateContent(content)` - Met à jour le contenu
+- `markAsSaved()` - Réinitialise le flag dirty après sauvegarde
+- `canExit()` - Vérifie si on peut quitter sans perdre de données
+
+### 2. MarkdownEditorComponent (`markdown-editor.component.ts`)
+
+Composant standalone qui encapsule CodeMirror 6.
+
+**Features:**
+- ✅ Édition Markdown avec coloration syntaxique
+- ✅ Support YAML front-matter
+- ✅ Line numbers, active line highlighting
+- ✅ Bracket matching, auto-closing
+- ✅ Search & replace (Ctrl/Cmd+F)
+- ✅ History (undo/redo)
+- ✅ Word wrap toggle
+- ✅ Autosave après 5s d'inactivité
+- ✅ Thème dark/light synchronisé
+- ✅ Responsive mobile
+
+**Inputs:**
+- `initialPath: string` - Chemin du fichier
+- `initialContent: string` - Contenu initial
+
+**Toolbar:**
+- **Save** (Ctrl/Cmd+S) - Sauvegarde via VaultService
+- **Wrap** - Toggle word wrap
+- **Undo** - Annuler (Ctrl/Cmd+Z)
+- **Redo** - Refaire (Ctrl/Cmd+Y)
+- **Close** - Quitter l'éditeur (avec confirmation si dirty)
+
+### 3. SmartFileViewerComponent (Intégration)
+
+Gère le basculement entre mode lecture et mode édition.
+
+**Lazy Loading:**
+```typescript
+private async loadEditor(): Promise<void> {
+  const { MarkdownEditorComponent } = await import(
+    '../../app/features/editor/markdown-editor.component'
+  );
+  this.editorComponentRef = this.editorContainer.createComponent(
+    MarkdownEditorComponent
+  );
+  // Set inputs...
+}
+```
+
+**Avantages:**
+- CodeMirror 6 n'est chargé que lors du passage en mode édition
+- Pas d'impact sur les performances en mode lecture
+- Destruction automatique du composant lors de la sortie d'édition
+
+### 4. EditorCanDeactivateGuard (`editor-can-deactivate.guard.ts`)
+
+Guard de navigation Angular pour empêcher la perte de données.
+
+**Protection:**
+- Navigation Angular Router
+- Fermeture/rafraîchissement du navigateur (beforeunload)
+
+**Usage dans les routes:**
+```typescript
+{
+  path: 'note/:id',
+  component: NoteViewerComponent,
+  canDeactivate: [EditorCanDeactivateGuard]
+}
+```
+
+## 🎨 Styles et thème
+
+### Variables CSS (`codemirror.css`)
+
+Les thèmes sont définis via des variables CSS qui s'adaptent automatiquement au mode dark/light du site:
+
+```css
+:root {
+  --cm-bg: #ffffff;
+  --cm-text: #1e293b;
+  --cm-cursor: #3b82f6;
+  --cm-selection-bg: #bfdbfe;
+  --cm-active-line-bg: #f1f5f9;
+  /* ... */
+}
+
+.dark {
+  --cm-bg: #1e293b;
+  --cm-text: #e2e8f0;
+  --cm-cursor: #60a5fa;
+  /* ... */
+}
+```
+
+### Détection du thème
+
+Le composant observe les changements de classe `dark` sur `<html>`:
+
+```typescript
+private setupThemeObserver(): void {
+  const observer = new MutationObserver(() => {
+    const darkMode = document.documentElement.classList.contains('dark');
+    this.isDarkTheme.set(darkMode);
+    this.reconfigureTheme();
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class']
+  });
+}
+```
+
+## 💾 Sauvegarde
+
+### VaultService Integration
+
+Le composant utilise la méthode privée `saveMarkdown()` du VaultService:
+
+```typescript
+async save(): Promise<void> {
+  const content = this.editorView?.state.doc.toString() || '';
+  const success = await (this.vaultService as any).saveMarkdown(
+    this.filePath(),
+    content
+  );
+  
+  if (success) {
+    this.isDirty.set(false);
+    this.editorStateService.markAsSaved();
+    this.toastService.success('Saved successfully');
+  } else {
+    this.toastService.error('Failed to save');
+  }
+}
+```
+
+### Autosave
+
+L'autosave est déclenché après 5 secondes d'inactivité:
+
+```typescript
+private scheduleAutosave(): void {
+  if (this.autosaveTimer) {
+    clearTimeout(this.autosaveTimer);
+  }
+  
+  this.autosaveTimer = setTimeout(() => {
+    if (this.isDirty() && !this.isSaving()) {
+      this.save();
+    }
+  }, 5000);
+}
+```
+
+## ⌨️ Raccourcis clavier
+
+| Raccourci | Action |
+|-----------|--------|
+| `Ctrl/Cmd + S` | Sauvegarder |
+| `Ctrl/Cmd + F` | Rechercher |
+| `Ctrl/Cmd + Z` | Annuler |
+| `Ctrl/Cmd + Y` | Refaire |
+| `Esc` | Fermer la recherche |
+| `Tab` | Indenter |
+| `Shift + Tab` | Désindenter |
+
+## 📱 Responsive Mobile
+
+### Toolbar compacte
+
+```css
+@media (max-width: 640px) {
+  .btn-editor {
+    padding: 0.375rem 0.5rem;
+  }
+  
+  .btn-editor span {
+    display: none; /* Cache les labels, garde les icônes */
+  }
+}
+```
+
+### Éditeur optimisé
+
+```css
+@media (max-width: 640px) {
+  .cm-editor {
+    font-size: 13px !important;
+  }
+  
+  .cm-content {
+    padding: 0.75rem;
+  }
+}
+```
+
+## 🧪 Tests manuels
+
+### Checklist de validation
+
+- [ ] **Bouton "Éditer"**
+  - [ ] Visible à gauche de "Open in Full Screen"
+  - [ ] Alignement correct
+  - [ ] États hover/active
+  - [ ] Non visible pour fichiers Excalidraw
+
+- [ ] **Passage en mode édition**
+  - [ ] Transition fluide sans glitch
+  - [ ] Contenu chargé correctement
+  - [ ] Front-matter YAML préservé
+  - [ ] Cursor positionné
+
+- [ ] **Édition**
+  - [ ] Coloration syntaxique Markdown
+  - [ ] Line numbers
+  - [ ] Word wrap toggle
+  - [ ] Search (Ctrl+F) fonctionne
+  - [ ] Undo/Redo fonctionnent
+  - [ ] Autosave après 5s
+
+- [ ] **Sauvegarde**
+  - [ ] Ctrl+S sauvegarde
+  - [ ] Toast "Saved successfully"
+  - [ ] Flag dirty réinitialisé
+  - [ ] Erreur I/O gérée (toast d'erreur)
+
+- [ ] **Navigation guard**
+  - [ ] Confirmation si modifications non sauvegardées
+  - [ ] Pas de confirmation si sauvegardé
+  - [ ] beforeunload (fermeture navigateur)
+
+- [ ] **Thème Dark/Light**
+  - [ ] Basculement dynamique
+  - [ ] Couleurs correctes
+  - [ ] Contraste lisible
+
+- [ ] **Responsive Mobile**
+  - [ ] Toolbar compacte (≤ 390px)
+  - [ ] Boutons visibles
+  - [ ] Scroll fluide
+  - [ ] Clavier n'occulte pas toolbar
+
+- [ ] **Performance**
+  - [ ] Pas de lag en mode lecture
+  - [ ] Lazy loading confirmé (devtools Network)
+  - [ ] Note lourde (>5000 lignes) éditable
+
+## 🚀 Utilisation
+
+### Pour l'utilisateur
+
+1. Ouvrir une note Markdown en mode lecture
+2. Cliquer sur le bouton "Éditer" (icône crayon) dans la toolbar
+3. L'éditeur CodeMirror 6 se charge
+4. Éditer le contenu
+5. Sauvegarder avec Ctrl+S ou le bouton "Save"
+6. Cliquer sur "Close" pour revenir en mode lecture
+
+### Pour le développeur
+
+**Ajouter une extension CodeMirror:**
+
+```typescript
+// Dans markdown-editor.component.ts, méthode initializeEditor()
+const initialState = EditorState.create({
+  extensions: [
+    // ... extensions existantes
+    myCustomExtension(),  // Ajouter ici
+  ]
+});
+```
+
+**Personnaliser le thème:**
+
+Modifier `src/styles/codemirror.css` et ajuster les variables CSS.
+
+**Ajouter un bouton dans la toolbar:**
+
+Éditer le template de `markdown-editor.component.ts`.
+
+## 🐛 Debugging
+
+### Console logs utiles
+
+- `[SmartFileViewer] Editor loaded successfully` - Éditeur chargé
+- `[SmartFileViewer] Editor unloaded` - Éditeur déchargé
+- `[MarkdownViewer] Cannot edit: no file path` - Pas de path
+
+### Problèmes courants
+
+**1. L'éditeur ne se charge pas**
+- Vérifier que `EditorStateService.isEditMode()` est true
+- Vérifier dans la console les erreurs d'import dynamique
+- Vérifier que le ViewContainerRef est disponible
+
+**2. Le thème ne change pas**
+- Vérifier que la classe `dark` est bien sur `<html>`
+- Vérifier que le MutationObserver est actif
+- Inspecter les variables CSS dans DevTools
+
+**3. La sauvegarde échoue**
+- Vérifier le path du fichier
+- Vérifier les permissions serveur
+- Vérifier les logs serveur (API `/api/files?path=...`)
+
+## 📦 Dépendances
+
+### Packages installés
+
+```json
+{
+  "@codemirror/view": "^6.x",
+  "@codemirror/state": "^6.x",
+  "@codemirror/language": "^6.x",
+  "@codemirror/lang-markdown": "^6.x",
+  "@codemirror/commands": "^6.x",
+  "@codemirror/search": "^6.x",
+  "@codemirror/autocomplete": "^6.x",
+  "@codemirror/lint": "^6.x",
+  "@codemirror/legacy-modes": "^6.x",
+  "@lezer/highlight": "^1.x"
+}
+```
+
+### Bundle size impact
+
+- **Mode lecture:** 0 KB (lazy loading)
+- **Mode édition:** ~150 KB (CodeMirror + extensions)
+
+## 🔮 Évolutions futures
+
+- [ ] Preview split (côte à côte Markdown/Rendu)
+- [ ] Formatage rapide (bold, italic, list) via toolbar
+- [ ] Snippets personnalisés
+- [ ] Vim mode (via @replit/codemirror-vim)
+- [ ] Collaborative editing (via Y.js)
+- [ ] Export PDF depuis l'éditeur
+- [ ] Statistiques (nombre de mots, temps d'édition)
+
+## 📝 Notes techniques
+
+### Pourquoi CodeMirror 6 ?
+
+- Architecture modulaire (extensions)
+- Performance optimale (virtual scrolling)
+- TypeScript first
+- Thème CSS facilement personnalisable
+- Communauté active
+
+### Alternatives considérées
+
+- **Monaco Editor** - Trop lourd (2+ MB), conçu pour IDE
+- **Ace Editor** - API moins moderne, maintenance limitée
+- **ProseMirror** - Orienté WYSIWYG, pas Markdown brut
+
+---
+
+**Date de création:** 2025-01-20  
+**Version:** 1.0.0  
+**Auteur:** Lead Frontend (Angular 20 + Tailwind)
@@ -0,0 +1,328 @@
+# Mode Édition Markdown - Quick Start Guide
+
+## 🚀 Démarrage rapide
+
+### Pour tester la fonctionnalité
+
+1. **Démarrer le serveur de développement:**
+   ```bash
+   npm run dev
+   ```
+
+2. **Ouvrir ObsiViewer dans le navigateur:**
+   ```
+   http://localhost:4200
+   ```
+
+3. **Ouvrir une note Markdown**
+
+4. **Cliquer sur le bouton "Éditer"** (icône crayon à gauche de "Open in Full Screen")
+
+5. **L'éditeur CodeMirror 6 se charge:**
+   - Modifier le contenu
+   - Utiliser `Ctrl+S` (ou `Cmd+S`) pour sauvegarder
+   - Cliquer sur "Close" pour revenir en lecture
+
+## 🎯 Fonctionnalités implémentées
+
+### ✅ Bouton "Éditer"
+- Ajouté dans `markdown-viewer.component.ts` (ligne 48-59)
+- Placé à gauche du bouton "Open in Full Screen"
+- Icône lucide-edit-3 (crayon)
+- Émet un événement `editModeRequested`
+
+### ✅ Service d'état
+- `EditorStateService` gère le mode `'view' | 'edit'`
+- Signal-based pour réactivité
+- Tracking du `isDirty` state
+
+### ✅ Composant éditeur
+- `MarkdownEditorComponent` (standalone)
+- CodeMirror 6 avec extensions:
+  - Markdown syntax highlighting
+  - Line numbers
+  - Active line highlighting
+  - Bracket matching
+  - Search & replace (Ctrl+F)
+  - History (undo/redo)
+  - Autocomplete
+  - Word wrap toggle
+
+### ✅ Toolbar d'édition
+- **Save** - Sauvegarde (Ctrl+S) + toast
+- **Wrap** - Toggle word wrap
+- **Undo** - Annuler
+- **Redo** - Refaire
+- **Close** - Quitter avec confirmation si dirty
+
+### ✅ Lazy loading
+- CodeMirror 6 chargé dynamiquement
+- Pas d'impact sur les performances en mode lecture
+- Import async dans `smart-file-viewer.component.ts`
+
+### ✅ Sauvegarde
+- Intégration avec `VaultService.saveMarkdown()`
+- Autosave après 5s d'inactivité
+- Toast de succès/erreur via `ToastService`
+
+### ✅ Navigation guard
+- `EditorCanDeactivateGuard` empêche la perte de données
+- Confirmation si modifications non sauvegardées
+- Protection beforeunload (fermeture navigateur)
+
+### ✅ Thème Dark/Light
+- Variables CSS dans `codemirror.css`
+- Synchronisation automatique avec le thème du site
+- MutationObserver sur `<html class="dark">`
+
+### ✅ Responsive
+- Toolbar compacte sur mobile (≤ 640px)
+- Font-size ajustée
+- Padding réduit
+- Labels cachés, icônes conservées
+
+## 📁 Fichiers créés/modifiés
+
+### Nouveaux fichiers
+
+```
+src/
+├── app/features/editor/
+│   ├── markdown-editor.module.ts              ← Module lazy
+│   ├── markdown-editor.component.ts           ← Éditeur CodeMirror 6
+│   └── editor-can-deactivate.guard.ts        ← Guard navigation
+├── services/
+│   └── editor-state.service.ts               ← Gestion d'état
+├── styles/
+│   └── codemirror.css                        ← Styles globaux
+└── docs/
+    ├── MARKDOWN_EDITOR.md                    ← Doc complète
+    └── MARKDOWN_EDITOR_QUICKSTART.md         ← Ce fichier
+```
+
+### Fichiers modifiés
+
+```
+src/
+├── components/
+│   ├── markdown-viewer/
+│   │   └── markdown-viewer.component.ts      ← Bouton "Éditer" + output
+│   └── smart-file-viewer/
+│       └── smart-file-viewer.component.ts    ← Lazy loading éditeur
+├── styles.css                                ← Import codemirror.css
+└── package.json                              ← Dépendances CodeMirror 6
+```
+
+## 🧪 Tests à effectuer
+
+### Test 1: Basculement lecture ↔ édition
+
+```bash
+# Ouvrir une note
+# Cliquer sur "Éditer"
+# ✓ Transition fluide
+# ✓ Contenu chargé
+# ✓ Cursor visible
+# Cliquer sur "Close"
+# ✓ Retour en lecture
+```
+
+### Test 2: Sauvegarde
+
+```bash
+# En mode édition
+# Modifier le contenu
+# Appuyer sur Ctrl+S
+# ✓ Toast "Saved successfully"
+# ✓ Flag dirty réinitialisé
+# Rafraîchir la page
+# ✓ Modifications persistées
+```
+
+### Test 3: Navigation guard
+
+```bash
+# En mode édition
+# Modifier le contenu
+# Essayer de fermer l'onglet
+# ✓ Confirmation beforeunload
+# Confirmer "Quitter"
+# Rouvrir la note
+# ✓ Modifications non sauvegardées perdues (normal)
+```
+
+### Test 4: Autosave
+
+```bash
+# En mode édition
+# Modifier le contenu
+# Attendre 6 secondes
+# ✓ Toast "Saved successfully" automatique
+# ✓ Flag dirty réinitialisé
+```
+
+### Test 5: Thème Dark/Light
+
+```bash
+# En mode édition
+# Basculer le thème (dark ↔ light)
+# ✓ Couleurs de l'éditeur changent
+# ✓ Contraste lisible
+# ✓ Cursor visible
+```
+
+### Test 6: Responsive mobile
+
+```bash
+# Ouvrir DevTools
+# Passer en mode mobile (375px)
+# Entrer en mode édition
+# ✓ Toolbar compacte
+# ✓ Boutons visibles
+# ✓ Labels cachés (icônes seules)
+# ✓ Scroll fluide
+```
+
+### Test 7: Note lourde
+
+```bash
+# Ouvrir une note > 5000 lignes
+# Entrer en mode édition
+# ✓ Chargement rapide (< 1s)
+# ✓ Scroll fluide
+# ✓ Pas de lag à la frappe
+```
+
+### Test 8: Front-matter YAML
+
+```bash
+# Ouvrir une note avec front-matter
+---
+title: Test
+tags: [test, markdown]
+---
+# Contenu
+
+# Entrer en mode édition
+# ✓ Front-matter affiché correctement
+# Modifier uniquement le corps
+# Sauvegarder
+# ✓ Front-matter préservé intact
+```
+
+## 🐛 Debugging
+
+### Activer les logs
+
+Ouvrir la console DevTools et chercher:
+
+```
+[SmartFileViewer] Editor loaded successfully
+[SmartFileViewer] Editor unloaded
+```
+
+### Inspecter l'état
+
+Dans la console:
+
+```javascript
+// Injecter le service dans la console
+const editorState = ng.probe($0).injector.get(EditorStateService);
+
+// Vérifier l'état
+console.log(editorState.mode());        // 'view' | 'edit'
+console.log(editorState.isDirty());     // true | false
+console.log(editorState.currentPath()); // chemin du fichier
+```
+
+### Network tab
+
+Vérifier que CodeMirror n'est chargé qu'en mode édition:
+
+1. Ouvrir Network tab (DevTools)
+2. Ouvrir une note (mode lecture)
+3. ✓ Aucun fichier `codemirror` chargé
+4. Cliquer sur "Éditer"
+5. ✓ Fichiers `@codemirror/*` chargés dynamiquement
+
+## 📦 Dépendances installées
+
+```bash
+npm install @codemirror/view @codemirror/state @codemirror/language \
+  @codemirror/lang-markdown @codemirror/commands @codemirror/search \
+  @codemirror/autocomplete @codemirror/lint @codemirror/legacy-modes \
+  @lezer/highlight
+```
+
+**Taille bundle:**
+- Mode lecture: +0 KB (lazy loading)
+- Mode édition: ~150 KB (chargé à la demande)
+
+## 🎨 Personnalisation
+
+### Modifier le thème
+
+Éditer `src/styles/codemirror.css`:
+
+```css
+:root {
+  --cm-cursor: #your-color;
+  --cm-selection-bg: #your-color;
+  /* ... */
+}
+```
+
+### Ajouter une extension CodeMirror
+
+Dans `markdown-editor.component.ts`, méthode `initializeEditor()`:
+
+```typescript
+const initialState = EditorState.create({
+  extensions: [
+    // ... extensions existantes
+    myCustomExtension(),
+  ]
+});
+```
+
+### Personnaliser la toolbar
+
+Éditer le template de `markdown-editor.component.ts`:
+
+```html
+<div class="markdown-editor__toolbar-right">
+  <!-- Ajouter votre bouton ici -->
+  <button (click)="myCustomAction()">...</button>
+</div>
+```
+
+## 🚦 Critères d'acceptation (DoD)
+
+- [x] Bouton "Éditer" visible à gauche de "Open in Full Screen"
+- [x] Passage lecture ↔ édition sans recharger la page
+- [x] CodeMirror 6 configuré (Markdown, YAML, line numbers, wrap)
+- [x] Ctrl/Cmd+S déclenche save() via VaultService
+- [x] Toast "Enregistré" ou erreur I/O
+- [x] Bouton "Close" ramène en vue lecture
+- [x] Thème Dark/Light synchronisé
+- [x] Responsive mobile (toolbar compacte)
+- [x] Navigation guard si modifications non sauvegardées
+- [x] Autosave après 5s d'inactivité
+- [x] Tests manuels validés
+
+## 🎓 Ressources
+
+### Documentation CodeMirror 6
+- [Official Guide](https://codemirror.net/docs/guide/)
+- [API Reference](https://codemirror.net/docs/ref/)
+- [Extensions](https://codemirror.net/docs/extensions/)
+
+### Angular Signals
+- [Angular Signals Guide](https://angular.io/guide/signals)
+
+### Architecture
+- Voir `docs/MARKDOWN_EDITOR.md` pour l'architecture détaillée
+
+---
+
+**Prêt à tester?** Lance `npm run dev` et ouvre une note! 🚀