312 lines
7.8 KiB
Markdown
312 lines
7.8 KiB
Markdown
# 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
|