Rédac

Éditeur WYSIWYG par blocs — Vanilla JS, aucune dépendance

POC

Rédac fait partie d'Alluvia. Le code est dans public/js/redac/ et la démo à /demo/redac.

Philosophie

Rédac est un éditeur de texte riche inspiré d'Editor.js. L'idée de base : au lieu de stocker du HTML libre (fragile, difficile à transformer), on stocke un document structuré en JSON.

Chaque paragraphe, chaque titre, chaque image est un bloc indépendant avec un type et des données. Ce format rend le contenu facile à réafficher, transformer, migrer, ou indexer.

Approche innerHTML

Stocker le HTML brut de la zone éditable. Simple à démarrer mais :

Difficile à transformer (titre → h2 quelque part dans du HTML)
Risque XSS à l'affichage
Impossible d'adapter le rendu (ex: lazy-load images)

Approche JSON structuré

Chaque bloc a un type et des données précises. Avantages :

Rendu côté serveur contrôlé (PHP Redac_renderer)
Facile à transformer ou migrer
Chaque bloc est testable indépendamment

Architecture globale

Rédac est composé de 5 couches qui communiquent via des callbacks (pas d'événements globaux) :

Redac                     ← orchestrateur, point d'entrée
 ├── Block_manager         ← tableau ordonné de blocs
 ├── Inline_menu           ← barre flottante B/I à la sélection
 └── [blocs]
      ├── Block            ← classe de base (id, type, _wrapper DOM)
      ├── Paragraph        ← bloc concret (hérite de Block)
      └── Tune             ← composant dropdown ⋮ (+ et ⋮)

Format de sortie

redac.save() retourne une Promise<string> — le JSON sérialisé :

{
    "time": 1740000000000,
    "blocks": [
        {
            "type": "paragraph",
            "data": { "text": "Bonjour <strong>monde</strong> !" }
        },
        {
            "type": "paragraph",
            "data": { "text": "Deuxième bloc", "classes": "lead mt-3" },
            "id_attr": "intro"
        }
    ]
}

data.text — innerHTML du bloc (peut contenir <strong>, <em>)
id_attr — présent si l'utilisateur a défini un id custom via le dropdown Tune
data.classes — classes Bootstrap/custom définies via le dropdown Tune
Les blocs vides sont ignorés

UX — ce que voit l'utilisateur

Bouton `+`

Apparaît au hover à gauche du bloc. Ajoute un nouveau bloc vide après.

Bouton `⋮`

Ouvre le dropdown Tune : déplacer, supprimer, définir id/class.

Menu inline

Sélectionner du texte → barre flottante au-dessus : gras, italique, lien (à venir).