Prisme — éditeur de présentations web

Un « PowerPoint » dans le navigateur : créez des diapositives par glisser‑déposer (blocs de texte, images, formes), puis exportez en PDF et en HTML autonome pour présenter hors ligne. Interface moderne, sombre et soignée.

L'application fonctionne de deux façons :

1. En application web via Docker (avec un service d'export PDF haute qualité).
2. Sans aucun serveur, en ouvrant directement le fichier index.html dans Firefox (file://). Tout l'éditeur, l'export HTML/JSON et l'export PDF (via l'impression du navigateur) fonctionnent hors ligne.

---

⬇️ Télécharger (version prête à l'emploi)

Un fichier unique autonome (toute l'app dans un seul .html, hors ligne) est fourni dans le dépôt : build/prisme.html.

• Téléchargez‑le (lien « raw ») : https://git.lequen.fr/jlequen/Prisme/raw/branch/main/build/prisme.html
• Ouvrez‑le directement dans Firefox / Chrome (double‑clic, file://). Aucun serveur, aucune installation, aucune connexion requise.
• Vos présentations sont enregistrées dans le navigateur ; l'export HTML et PNG/JSON fonctionne hors ligne ; l'export PDF passe par l'impression du navigateur (« Enregistrer au format PDF »).

Ce fichier est régénérable à tout moment avec cd frontend && npm run build (le résultat est frontend/dist/index.html, copié ici en build/prisme.html).

✨ Fonctionnalités

• Bibliothèque multi‑présentations : un écran d'accueil pour créer, ouvrir, renommer, dupliquer, importer et supprimer vos présentations. Tout est stocké dans le navigateur (IndexedDB) — plusieurs présentations avec images, sans limite de quota.
• Import PowerPoint (.pptx) : convertit un .pptx en présentation éditable (titres, textes, puces, images, formes simples, positions et couleurs). Conversion « best‑effort » — voir les limites plus bas.
• Éditeur graphique façon PowerPoint : déplacez et redimensionnez les éléments à la souris.
• Éléments : blocs de texte, titres, images (glisser‑déposer, coller ou importer), formes (rectangle, cercle, ligne, flèche avec pointe au début / à la fin / aux deux bouts), icônes / pictogrammes (1000+ icônes recherchables) et tableaux (lignes/colonnes, en‑tête, bordures & couleurs, édition des cellules par double‑clic).
• Groupes : sélectionnez plusieurs objets et groupez‑les (Ctrl+G) pour les déplacer/sélectionner ensemble (Ctrl+Maj+G pour dégrouper).
• Sélecteur de couleur avec palette de teintes et couleurs récemment utilisées (+ pipette système et saisie hexadécimale).
• Masquer des diapositives : une diapo masquée reste éditable mais est exclue de la présentation, du HTML et du PDF (icône œil dans le panneau des diapos).
• Sélection multiple : sélection au lasso, déplacement groupé, alignement (relatif à la sélection) et répartition horizontale/verticale.
• Modèle personnalisé : ajoutez logo, pied de page, texte ou images affichés sur toutes les diapositives (bouton « Modifier le modèle »), rendus derrière le contenu partout (éditeur, présentation, HTML, PDF).
• Numéros de diapositive : option activable pour toute la présentation (visible à l'écran, en présentation et dans les exports).
• Guides d'alignement magnétiques, ordre des calques (avant/arrière), verrouillage, opacité, rotation, ombre portée.
• Texte riche (styles au sein d'un même bloc) : sélectionnez une portion de texte pour lui appliquer gras, italique, souligné, couleur, surlignage ou liste à puces — via une barre flottante. Les styles de base (police, taille, graisse, couleur, alignement, interligne…) restent réglables dans l'inspecteur.
• Design : fonds unis / dégradés / image, thèmes prêts à l'emploi et modèles de mise en page (couverture, section, deux colonnes, citation…).
• Diapositives : ajout, duplication, suppression, réordonnancement par glisser‑déposer, miniatures en direct, notes de présentateur.
• Transitions modernes paramétrables : fondu, fondu montant, glisse (4 directions), zoom avant/arrière, bascule 3D, rotation, balayage, flou net — durée réglable et « appliquer à toutes les diapositives ».
• Transitions spatiales « dézoom » (haut / bas / gauche / droite, façon Prezi) : la vue dézoome, se déplace vers la diapositive suivante puis re-zoome. Les diapos sont disposées selon un chemin logique — chaque diapo est placée dans la direction de sa transition par rapport à la précédente (par défaut : à droite) — donc pendant le dézoom on voit les vraies diapos voisines à leur place. Pour éviter les chevauchements, l'éditeur analyse le chemin complet et désactive toute direction qui ferait revenir le parcours sur une diapositive déjà placée (le chemin reste « auto‑évitant », y compris sur des boucles comme bas → bas → droite → haut → gauche). Fonctionne dans l'éditeur et dans le HTML exporté.
• Confort : annuler/rétablir, copier/coller/dupliquer, zoom & ajustement, raccourcis clavier, enregistrement automatique (localStorage).
• Mode présentation plein écran : navigation clavier, transitions, compteur, volet de notes.
• Vue présentateur double écran (web et HTML exporté) : une fenêtre public (diapositive plein écran) et une console présentateur avec diapo actuelle, diapo suivante, notes, heure et chronomètre. Les deux fenêtres sont synchronisées.
• 100 % hors ligne : polices auto‑hébergées et intégrées (aucun CDN), images en base64, icônes en SVG inline. L'éditeur et les exports ne font aucune requête externe.
• Export : PDF, HTML autonome (hors ligne, un seul fichier), PNG (diapo courante), JSON (sauvegarde/rechargement).

---

🚀 Démarrage rapide (Docker)

Prérequis : Docker + Docker Compose.

docker compose up --build

Puis ouvrez http://localhost:8123.

• Le service frontend (nginx) sert l'application.
• Le service backend (Node + Chromium) génère les PDF en un clic.

Le port hôte est 8123 par défaut. S'il est occupé, changez‑le : SLIDES_PORT=9000 docker compose up --build (puis http://localhost:9000).

Arrêter : docker compose down.

---

💻 Utilisation sans serveur (Firefox, file://)

Générez le fichier unique autonome, puis ouvrez‑le dans Firefox :

cd frontend
npm install
npm run build
# => frontend/dist/index.html  (tout est intégré dans ce seul fichier)

Double‑cliquez sur frontend/dist/index.html (ou ouvrez‑le dans Firefox). Vous pouvez copier ce fichier n'importe où : c'est un éditeur complet et hors ligne.

En mode file://, l'export PDF utilise la boîte d'impression de Firefox : choisissez « Enregistrer au format PDF », orientation paysage, marges aucune. Les exports HTML / PNG / JSON se téléchargent directement.

---

🧑‍💻 Développement

Frontend (Vite, rechargement à chaud) :

cd frontend
npm install
npm run dev          # http://localhost:5173

Backend d'export PDF (optionnel en dev) :

cd backend
npm install
# Chromium/Chrome requis localement :
PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium npm start   # http://localhost:3001

Le serveur de dev Vite proxifie /api vers http://localhost:3001.

---

⌨️ Raccourcis clavier

Action	Raccourci
Annuler / Rétablir	Ctrl/Cmd + Z / Ctrl/Cmd + Maj + Z
Dupliquer la sélection	Ctrl/Cmd + D
Grouper / Dégrouper	Ctrl/Cmd + G / Ctrl/Cmd + Maj + G
Copier / Coller	Ctrl/Cmd + C / Ctrl/Cmd + V
Coller une image	Ctrl/Cmd + V (depuis le presse‑papiers)
Supprimer	Suppr / Retour arrière
Déplacer (1 px / 10 px)	Flèches / Maj + Flèches
Éditer un texte	Double‑clic
Sélection multiple	Ctrl / Cmd / Maj + clic (ou lasso)
Désélectionner	Échap
Présentation : suivant / précédent	→ Espace / ←
Présentation : notes / plein écran / quitter	N / F / Échap
Vue présentateur (double écran)	bouton ▦ / touche P

---

🖥️ Double écran (vue présentateur)

1. Lancez Présenter, puis cliquez sur l'icône ▦ (ou touche P).
2. Une seconde fenêtre s'ouvre : glissez‑la sur le vidéoprojecteur / second écran et mettez‑la en plein écran (F). C'est la vue public.
3. La fenêtre d'origine devient la console présentateur (diapo actuelle, suivante, notes, heure, chrono). Naviguez avec ← / → : les deux écrans restent synchronisés.

Cela fonctionne aussi dans le fichier HTML exporté : ouvrez‑le, cliquez sur ▦ dans la barre du bas (ou P).

🏗️ Architecture

Slides/
├── docker-compose.yml
├── frontend/            # React + Vite + Tailwind (build => 1 seul index.html)
│   ├── Dockerfile       # build puis nginx
│   ├── nginx.conf       # sert le bundle + proxy /api -> backend
│   └── src/
│       ├── store/       # état (zustand) + historique undo/redo + autosave
│       ├── fonts.ts     # polices auto‑hébergées (woff2 intégrés)
│       ├── lib/         # modèles, thèmes, transitions, rendu, export, library (IndexedDB), import pptx
│       └── components/  # Gallery, éditeur, canvas, inspecteur, Present, PresenterConsole…
└── backend/             # Express + Puppeteer (Chromium) -> export PDF
    ├── Dockerfile
    └── server.js

• Une présentation est un document JSON (diapositives + éléments positionnés dans un repère fixe de 1280×720). Le même moteur de rendu produit le canvas, les miniatures, le mode présentation et les exports, garantissant leur cohérence.
• L'export PDF envoie un HTML « une page 1280×720 par diapo » au backend, qui l'imprime avec Chromium (preferCSSPageSize) → PDF vectoriel net. En file://, bascule automatique vers l'impression du navigateur.

---

📥 Import PowerPoint (.pptx)

Depuis l'écran d'accueil (Importer) ou dans l'éditeur (Fichier → Importer), choisissez un fichier .pptx. Le contenu est converti côté navigateur (aucun envoi sur un serveur) :

• ✅ Ordre et taille des diapos, titres / textes, puces, alignement, taille de police, gras/italique/souligné, couleur.
• ✅ Images (intégrées), formes simples (rectangle, arrondi, ellipse) avec remplissage, groupes (positionnement conservé), fond de couleur.
• ⚠️ Non converti (ignoré proprement) : tableaux, graphiques, SmartArt, dégradés/motifs, animations/transitions PowerPoint, polices exactes. Le texte multi‑styles d'un même bloc est ramené à un seul style.

C'est une base à peaufiner dans l'éditeur, pas une conversion pixel‑perfect.

📝 Notes

• Polices : Inter, Poppins, Montserrat, Playfair Display, Space Grotesk, Lora et JetBrains Mono sont auto‑hébergées (fichiers woff2 intégrés au build). Elles fonctionnent donc hors ligne, et les exports HTML n'intègrent que les polices réellement utilisées (fichiers légers).
• Zéro dépendance externe : ni CDN, ni Google Fonts, ni requête réseau — vérifié à la construction. Un export .html est un unique fichier autonome.
• Sauvegarde : toutes vos présentations sont enregistrées automatiquement dans le navigateur via IndexedDB (aucune limite de quota gênante, images comprises), et listées sur l'écran d'accueil. Les données restent locales à votre navigateur.
  • Menu « Sauvegarde » (écran d'accueil) : Tout sauvegarder (.json) exporte l'ensemble de vos présentations dans un seul fichier, et Restaurer (.json) les réimporte (utile avant de renommer/déplacer un fichier file://, ou pour changer de navigateur/machine).
  • Sauvegarde automatique dans un fichier (Chrome/Edge, y compris file://) : choisissez un fichier une fois, l'app y réécrit à chaque modification (silencieux). Non disponible dans Firefox (API absente) — utilisez alors la sauvegarde complète.
  • Un fichier .json unique (présentation ou bibliothèque complète) se recharge n'importe où, indépendamment du nom du fichier .html, de l'emplacement et du navigateur.
  • Avertissement à la fermeture : si des modifications n'ont pas encore été exportées dans un fichier (et qu'aucune sauvegarde auto n'est active), le navigateur affiche un message de confirmation avant de fermer/recharger l'onglet — utile en Firefox file:// pour ne pas perdre son travail.