# Documentation Markdown Viewer - ObsiViewer Nimbus

Bienvenue dans la documentation du système de visualisation Markdown d'ObsiViewer.

---

## 📚 Table des matières

### 🚀 Pour commencer

- **[Quick Start](./QUICK_START_MARKDOWN.md)** - Démarrage rapide en 3 étapes
  - Installation
  - Exemples simples
  - Premiers tests

### 📖 Documentation complète

- **[Guide complet](./MARKDOWN_VIEWER_GUIDE.md)** - Documentation détaillée
  - Architecture
  - API Reference
  - Exemples avancés
  - Optimisations
  - Dépannage

### 📝 Mise à jour

- **[README Markdown Update](../../README_MARKDOWN_UPDATE.md)** - Résumé des changements
  - Objectifs réalisés
  - Nouveaux composants
  - Tests et métriques
  - Instructions de test

---

## 🎯 Navigation rapide

### Par cas d'usage

| Besoin | Document | Section |
|--------|----------|---------|
| Afficher du Markdown simple | [Quick Start](./QUICK_START_MARKDOWN.md) | Exemple 1 |
| Afficher un fichier Excalidraw | [Quick Start](./QUICK_START_MARKDOWN.md) | Exemple 2 |
| Détection automatique du type | [Quick Start](./QUICK_START_MARKDOWN.md) | Exemple 3 |
| Comprendre l'architecture | [Guide complet](./MARKDOWN_VIEWER_GUIDE.md) | Architecture |
| API des composants | [Guide complet](./MARKDOWN_VIEWER_GUIDE.md) | Utilisation |
| Résoudre un problème | [Guide complet](./MARKDOWN_VIEWER_GUIDE.md) | Dépannage |

### Par composant

| Composant | Documentation | Tests |
|-----------|---------------|-------|
| `MarkdownViewerComponent` | [Guide](./MARKDOWN_VIEWER_GUIDE.md#1-markdownviewercomponent) | [Spec](../../src/components/markdown-viewer/markdown-viewer.component.spec.ts) |
| `SmartFileViewerComponent` | [Guide](./MARKDOWN_VIEWER_GUIDE.md#2-smartfileviewercomponent) | [Spec](../../src/components/smart-file-viewer/smart-file-viewer.component.spec.ts) |
| `FileTypeDetectorService` | [Guide](./MARKDOWN_VIEWER_GUIDE.md#3-filetypedetectorservice) | [Spec](../../src/services/file-type-detector.service.spec.ts) |

---

## 🌟 Fonctionnalités principales

### Markdown
- ✅ GitHub Flavored Markdown (GFM)
- ✅ Callouts Obsidian
- ✅ Math LaTeX (inline et block)
- ✅ Diagrammes Mermaid
- ✅ Syntax highlighting (180+ langages)
- ✅ WikiLinks et navigation interne
- ✅ Tags inline avec coloration
- ✅ Task lists interactives
- ✅ Tables avancées
- ✅ Footnotes

### Excalidraw
- ✅ Détection automatique des `.excalidraw.md`
- ✅ Éditeur intégré complet
- ✅ Sauvegarde manuelle (Ctrl+S)
- ✅ Export PNG/SVG
- ✅ Mode plein écran (F11)
- ✅ Support thème clair/sombre

### Optimisations
- ✅ Lazy loading des images
- ✅ Cache du syntax highlighting
- ✅ Fast path pour documents simples
- ✅ Debouncing des événements

---

## 🚀 Démarrage ultra-rapide

### 1. Importer

```typescript
import { MarkdownViewerComponent } from './components/markdown-viewer/markdown-viewer.component';
```

### 2. Utiliser

```html
<app-markdown-viewer [content]="'# Hello World'"></app-markdown-viewer>
```

### 3. Tester

```bash
npm run dev
# Ouvrir http://localhost:4200/markdown-playground
```

---

## 📦 Structure des fichiers

```
ObsiViewer/
├── src/
│   ├── components/
│   │   ├── markdown-viewer/           # Viewer Markdown
│   │   └── smart-file-viewer/         # Viewer intelligent
│   ├── services/
│   │   ├── markdown.service.ts        # Service de rendu
│   │   └── file-type-detector.service.ts  # Détection de type
│   └── app/features/
│       ├── drawings/                  # Éditeur Excalidraw
│       └── tests/markdown-playground/ # Page de test
└── docs/
    └── MARKDOWN/
        ├── README.md                  # Ce fichier
        ├── QUICK_START_MARKDOWN.md   # Démarrage rapide
        └── MARKDOWN_VIEWER_GUIDE.md  # Guide complet
```

---

## 🧪 Tests

### Exécuter tous les tests

```bash
npm test
```

### Tests spécifiques

```bash
# MarkdownViewerComponent
npm test -- --include='**/markdown-viewer.component.spec.ts'

# SmartFileViewerComponent
npm test -- --include='**/smart-file-viewer.component.spec.ts'

# FileTypeDetectorService
npm test -- --include='**/file-type-detector.service.spec.ts'
```

### Coverage

- `MarkdownViewerComponent` - 95%+
- `SmartFileViewerComponent` - 90%+
- `FileTypeDetectorService` - 100%

---

## 🎨 Exemples de code

### Exemple 1 : Viewer simple

```typescript
@Component({
  template: `<app-markdown-viewer [content]="content"></app-markdown-viewer>`
})
export class MyComponent {
  content = '# Hello World\n\nCeci est un **test**.';
}
```

### Exemple 2 : Avec Excalidraw

```typescript
@Component({
  template: `
    <app-markdown-viewer
      [content]="content"
      [filePath]="'drawing.excalidraw.md'">
    </app-markdown-viewer>
  `
})
export class ExcalidrawComponent {
  content = ''; // Chargé depuis le fichier
}
```

### Exemple 3 : Smart Viewer

```typescript
@Component({
  imports: [SmartFileViewerComponent],
  template: `
    <app-smart-file-viewer
      [filePath]="file.path"
      [content]="file.content">
    </app-smart-file-viewer>
  `
})
export class AutoComponent {
  file = { path: 'document.md', content: '# Auto' };
}
```

---

## 🔗 Liens utiles

### Documentation interne
- [Architecture générale](../ARCHITECTURE/)
- [Guide Excalidraw](../EXCALIDRAW/)
- [Guide des bookmarks](../BOOKMARKS/)

### Documentation externe
- [Markdown-it](https://github.com/markdown-it/markdown-it)
- [Highlight.js](https://highlightjs.org/)
- [Mermaid](https://mermaid.js.org/)
- [Excalidraw](https://excalidraw.com/)

---

## 💡 Conseils

### Pour les développeurs

1. **Toujours tester** avec le playground avant d'intégrer
2. **Utiliser SmartFileViewer** pour la détection automatique
3. **Lazy load** les images pour de meilleures performances
4. **Consulter les tests** pour des exemples d'utilisation

### Pour les utilisateurs

1. **Markdown Playground** accessible via `/markdown-playground`
2. **Raccourcis clavier** : Ctrl+S (save), F11 (fullscreen)
3. **Thème** s'adapte automatiquement (clair/sombre)

---

## 🐛 Support

### Problèmes courants

| Problème | Solution | Documentation |
|----------|----------|---------------|
| Markdown ne s'affiche pas | Vérifier `content` et console | [Dépannage](./MARKDOWN_VIEWER_GUIDE.md#dépannage) |
| Excalidraw ne charge pas | Vérifier extension `.excalidraw.md` | [Dépannage](./MARKDOWN_VIEWER_GUIDE.md#excalidraw-ne-saffiche-pas) |
| Images ne chargent pas | Vérifier chemins et CORS | [Dépannage](./MARKDOWN_VIEWER_GUIDE.md#les-images-ne-se-chargent-pas) |
| Erreurs TypeScript | Nettoyer et rebuilder | [Dépannage](./MARKDOWN_VIEWER_GUIDE.md#erreurs-typescript) |

### Obtenir de l'aide

- 📖 [Guide complet](./MARKDOWN_VIEWER_GUIDE.md)
- 🚀 [Quick Start](./QUICK_START_MARKDOWN.md)
- 📝 [Résumé des changements](../../README_MARKDOWN_UPDATE.md)

---

## 📊 Métriques du projet

- **Composants créés :** 2
- **Services créés :** 1
- **Tests unitaires :** 38 test cases
- **Documentation :** 3 guides complets
- **Lignes de code :** ~2000 lignes
- **Coverage :** > 90%

---

## 🎯 Roadmap

### Version actuelle (2.0.0)
- ✅ Markdown Viewer optimisé
- ✅ Support Excalidraw
- ✅ Tests complets
- ✅ Documentation complète

### Prochaines versions
- [ ] Support embeds audio/vidéo
- [ ] Éditeur WYSIWYG
- [ ] Export PDF
- [ ] Collaboration temps réel
- [ ] Plugins personnalisés
- [ ] Diagrammes PlantUML
- [ ] Mode présentation

---

## 📄 Licence

Ce projet fait partie d'ObsiViewer et suit la même licence.

---

## 👥 Contribution

Pour contribuer au système Markdown :

1. Lire l'[architecture](./MARKDOWN_VIEWER_GUIDE.md#architecture)
2. Ajouter des tests pour toute nouvelle fonctionnalité
3. Suivre les conventions de code existantes
4. Mettre à jour cette documentation

---

**Dernière mise à jour :** 2025-01-15  
**Version :** 2.0.0  
**Statut :** ✅ Production Ready