Page builder

Qu’est-ce que le page builder ?

Le page builder de Fatplant est un éditeur visuel intégré à l’administration. Il permet de composer des mises en page complexes sans écrire de code HTML ou CSS, en assemblant des blocs structurés appelés modules.

Il est utilisé pour composer :

• Le contenu principal d’un article (corps de l’article)
• Les pages statiques (page d’accueil, À propos…)
• Les layouts de thèmes

Structure hiérarchique

Le contenu d’une page est représenté par un document JSON organisé en quatre niveaux :

Page
└── Section (fond, espacement)
    └── Rangée / Row (disposition horizontale)
        └── Colonne / Column (largeur, responsive)
            └── Module (bloc de contenu)

Section

Une section est le niveau le plus haut. Elle définit l’arrière-plan (couleur, image), le padding vertical et la largeur maximale du contenu. On peut avoir plusieurs sections sur une même page pour créer des alternances visuelles.

Rangée (Row)

À l’intérieur d’une section, les rangées définissent la disposition horizontale des colonnes. Chaque rangée peut avoir un nombre variable de colonnes.

Colonne (Column)

Les colonnes se répartissent horizontalement dans une rangée. Leur largeur est définie en fractions (ex : 1/2, 1/3, 2/3). Sur mobile, les colonnes se replient automatiquement en pleine largeur.

Module

Un module est le bloc de contenu terminal. Il peut afficher du texte, une image, un bouton, un lecteur vidéo, etc. Chaque module a son propre schéma de propriétés.

Catalogue de modules

Module	Description
text	Contenu riche (WYSIWYG/Markdown)
image	Image avec variantes responsive
video	Lecteur vidéo (URL ou embed)
quote	Citation mise en forme
separator	Ligne de séparation
cta	Bouton d’appel à l’action
card	Carte avec image, titre, lien
grid	Grille d’éléments répétés
raw-html	HTML brut (réservé aux développeurs)

Les plugins peuvent enregistrer de nouveaux modules via le système de hooks.

Le document de layout (JSON)

Le contenu d’une page est sérialisé en JSON et stocké dans le champ content de l’entité. Voici un exemple simplifié :

{
  "sections": [
    {
      "id": "sec-1",
      "background": "#ffffff",
      "rows": [
        {
          "id": "row-1",
          "columns": [
            {
              "id": "col-1",
              "width": "1/2",
              "modules": [
                {
                  "id": "mod-1",
                  "type": "text",
                  "props": {
                    "content": "<p>Bienvenue sur notre site.</p>"
                  }
                }
              ]
            },
            {
              "id": "col-2",
              "width": "1/2",
              "modules": [
                {
                  "id": "mod-2",
                  "type": "image",
                  "props": {
                    "mediaId": 42,
                    "alt": "Photo d'illustration"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Responsive et états

Le page builder gère nativement les points de rupture responsive. Pour chaque colonne, vous pouvez définir :

• La largeur sur desktop (width)
• La largeur sur tablette (widthMd)
• La largeur sur mobile (widthSm, par défaut 1/1)

Les modules image utilisent automatiquement les variantes générées par la médiathèque (voir Médias).

Collaboration en temps réel

Le page builder est intégré au système de collaboration Yjs. Plusieurs éditeurs peuvent travailler simultanément sur le même document. Les modifications de chacun sont synchronisées en temps réel sans conflit grâce à l’algorithme CRDT.

La présence des collaborateurs est visible dans l’interface : un indicateur de couleur montre qui est en train d’éditer quel module.

Rendu côté serveur

Le frontend SSR de Fatplant interprète le document JSON pour rendre le HTML final. Chaque type de module a un composant Svelte dédié dans le thème actif. Cela permet une personnalisation complète du rendu sans modifier le core.

// Exemple de rendu d'un module dans le frontend SSR
switch (module.type) {
  case 'text':
    return TextModule;
  case 'image':
    return ImageModule;
  default:
    return UnknownModule;
}