ObsiViewer/docs/MARKDOWN/README.md

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 - Démarrage rapide en 3 étapes
  • Installation
  • Exemples simples
  • Premiers tests

📖 Documentation complète

• Guide complet - Documentation détaillée
  • Architecture
  • API Reference
  • Exemples avancés
  • Optimisations
  • Dépannage

📝 Mise à jour

• README Markdown Update - 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	Exemple 1
Afficher un fichier Excalidraw	Quick Start	Exemple 2
Détection automatique du type	Quick Start	Exemple 3
Comprendre l'architecture	Guide complet	Architecture
API des composants	Guide complet	Utilisation
Résoudre un problème	Guide complet	Dépannage

Par composant

Composant	Documentation	Tests
MarkdownViewerComponent	Guide	Spec
SmartFileViewerComponent	Guide	Spec
FileTypeDetectorService	Guide	Spec

---

🌟 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

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

2. Utiliser

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

3. Tester

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

npm test

Tests spécifiques

# 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

@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

@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

@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
• Guide Excalidraw
• Guide des bookmarks

Documentation externe

• Markdown-it
• Highlight.js
• Mermaid
• Excalidraw

---

💡 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
Excalidraw ne charge pas	Vérifier extension .excalidraw.md	Dépannage
Images ne chargent pas	Vérifier chemins et CORS	Dépannage
Erreurs TypeScript	Nettoyer et rebuilder	Dépannage

Obtenir de l'aide

• 📖 Guide complet
• 🚀 Quick Start
• 📝 Résumé des changements

---

📊 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
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