Vue d'ensemble de l'éditeur

Flexweg CMS utilise un éditeur basé sur les blocs — chaque paragraphe, titre, image, liste, embed ou primitive de mise en page est son propre bloc que vous pouvez insérer, réordonner, éditer et supprimer indépendamment. L'éditeur est construit sur Tiptap (un wrapper ProseMirror) mais l'UX est largement inspirée de Gutenberg de WordPress.

Le même éditeur est utilisé pour les posts et les pages.

Anatomie

┌────────────────────────────────────────────────┬──────────────────┐
│                                                │                  │
│  Zone d'édition (le document)                  │  Sidebar droite  │
│                                                │                  │
│  ┌──────────────────────────────────┐          │  ┌─────────────┐ │
│  │  Bloc 1                          │          │  │  Document   │ │
│  └──────────────────────────────────┘          │  │  Bloc       │ │
│  ┌──────────────────────────────────┐          │  │             │ │
│  │  Bloc 2 ↑ ↓ ⎘ 🗑                │  ← barre │  │  (l'onglet  │ │
│  │  ──────────────────────────────  │   bloc   │  │  actif      │ │
│  │                                  │          │  │  remplit    │ │
│  └──────────────────────────────────┘          │  │  cette zone)│ │
│                                                │  └─────────────┘ │
└────────────────────────────────────────────────┴──────────────────┘

Comment insérer un bloc

Trois moyens :

L'inserter / — tapez / sur une ligne vide pour ouvrir un menu popover qui liste les blocs par catégorie (Texte, Média, Mise en page, Embed, et la catégorie spécifique au thème actif si présente). Tapez un mot-clé pour filtrer.
Le bouton + flottant — apparaît sur les lignes vides. Même menu que /.
Le typing markdown — # produit un titre H1, - une liste à puces, > une citation, ``` un bloc de code. Voir Raccourcis.

La barre de bloc (block toolbar)

Quand vous cliquez dans un bloc, une barre flottante apparaît en haut à droite avec :

↑ Déplacer vers le haut
↓ Déplacer vers le bas
⎘ Dupliquer
🗑 Supprimer

Ces actions opèrent sur le bloc top-level (le bloc racine sous le curseur). Si vous êtes dans une liste à puces, déplacer vers le haut déplace toute la liste, pas une seule puce.

L'inspecteur (sidebar droite)

Deux onglets :

Document : réglages du post / de la page entier (catégorie, tags, extrait, image hero, SEO)
Bloc : réglages du bloc actif. Vide quand le curseur est dans du markdown texte simple. Pour les blocs avec inspecteur (image, embed, custom HTML, columns, blocs de thème), affiche les contrôles spécifiques.

L'inspecteur bascule automatiquement vers Bloc quand le bloc actif a un inspecteur — sans jamais quitter Bloc (pour que vous gardiez le contrôle de l'onglet).

Sélection et bubble menu

Sélectionner du texte (drag, double-clic, sélection au clavier) ouvre un bubble menu flottant avec les marques inline : gras, italique, souligné, code inline, lien. Les raccourcis clavier (Cmd/Ctrl + B, etc.) fonctionnent en parallèle.

Sauvegarde et publication

Aucune sauvegarde automatique. Les boutons Sauvegarder et Publier dans la topbar sticky de la page d'édition sont la seule façon de persister vos changements.

Sauvegarder : écrit en base, garde le statut actuel. Si le post était En ligne, le contenu en base est mis à jour mais le HTML public n'est PAS re-rendu.
Publier : sauvegarde, passe le statut à En ligne, rend le HTML, upload sur Flexweg.

Architecture

L'éditeur est src/components/editor/MarkdownEditor.tsx. Il accepte une chaîne markdown en entrée et la sort à chaque modification. Les blocs sont des nœuds Tiptap (extensions ProseMirror) avec :

Un nom de nœud (ex. magazineHeroSplit)
Un schéma d'attributs
Une fonction parseHTML / renderHTML pour le round-trip markdown
Optionnellement un composant React pour la prévisualisation en édition

Voir Blocs de cœur et Blocs de thème.