Gestion de l'aperçu du contenu : Le parcours d'une idée lauréate du budget participatif, menée "côte à côte"

L'idée du contenu prévisualisé côte à côte m'a toujours hantée. Je savais que d'autres plateformes CMS offraient ce type d'affichage, et c'était frustrant de voir TYPO3 l'ignorer. Pendant longtemps, je me suis dit : « Ce serait formidable d'avoir quelque chose comme ça dans TYPO3. »

Au départ, j'imaginais quelque chose de simple, comme un bouton d'édition directement sur le front-end. Puis, lors d'un événement Developer Days, j'ai discuté avec des membres de l'équipe UX. Quelqu'un m'a parlé de Sulu CMS et de sa solution.

L'équipe UX de TYPO3 travaillait depuis longtemps sur des concepts — croquis, parcours utilisateur et chartes d'interface — et était véritablement impatiente de trouver un développeur prêt à concrétiser cette vision. Voir ces idées passer du stade de brouillon à une implémentation fonctionnelle était exactement le partenariat qu'elle espérait.

Cette amélioration significative de l'expérience d'édition de pages dans le backend TYPO3 était proposée pour la feuille de route v14, mais les ressources de développement nécessaires à sa mise en œuvre manquaient. L'idée était claire et validée ; il manquait simplement du temps d'ingénierie dédié à sa mise en œuvre.

C'est à ce moment-là que je me suis dit que ce serait peut-être plus qu'un simple bouton sur le front-end, et que je pourrais mettre en œuvre une solution similaire à d'autres solutions du marché. J'ai soumis une idée de budget communautaire pour le troisième trimestre de cette année : aperçu en direct côte à côte et édition du contenu des pages , qui a été approuvée.

J'ai donc commencé mes expérimentations. Ma toute première idée a été de créer un module TYPO3 entièrement nouveau, distinct du module Page. À l'intérieur de ce module, j'ai placé deux iframes côte à côte :

• Iframe gauche — le module de page standard
• Iframe de droite — la page frontale rendue

Le mécanisme était simple : à partir de TYPO3, j'ai obtenu l'ID de la page actuelle, j'ai construit l'URL frontale correspondante, j'ai envoyé la requête et j'ai injecté le HTML résultant directement dans l'iframe.

Quand j'ai vu la page ainsi présentée pour la première fois, je me suis dit que ça fonctionnait vraiment. Ce n'est peut-être pas si compliqué !

Ajout de boutons d'édition

L'étape suivante consistait à rendre l'aperçu interactif. Je souhaitais des boutons « Modifier » cliquables dans l'aperçu du frontend. Pour les intégrer, j'ai essayé plusieurs approches :

• Paramètre personnalisé — le plus rapide et le plus simple, également extensible pour de futures améliorations d'aperçu (choisi)
• En-tête personnalisé — pas toujours pris en charge, plus limité
• Approche basée sur les cookies — possible, mais avec des limites

En ajoutant un paramètre personnalisé à la requête frontend, j'ai pu ajouter du balisage supplémentaire : de petites icônes d'édition directement liées à l'édition d'enregistrements de TYPO3. L'aperçu frontend est alors devenu utilisable.

Mise en évidence des éléments modifiés

Une fois les boutons d'édition activés, j'ai rencontré le problème de surlignage de l'élément de contenu en cours de modification . Cela nécessitait de détecter les chemins d'accès aux enregistrements et de marquer visuellement l'élément frontal correspondant.

Là, j'ai rencontré un obstacle : j'avais besoin d' une communication inter-iframe . La seule option semblait être d'utiliser postMessage, mais ça a vite dégénéré.

• J'avais deux iframes qui devaient communiquer entre elles
• Les méthodes de surbrillance étaient différentes selon la page
• Il n'était pas clair où placer la configuration

J'ai ensuite parlé avec Marcin Sągol et son conseil a tout changé : « Au lieu de construire un nouveau module avec deux iframes, pourquoi ne pas étendre le module Page existant et simplement placer un div à l'intérieur ? »

C'était une avancée majeure. L'intégration de l'aperçu directement dans le module Page :

• Je n'avais besoin que d'un iframe
• Pas de navigation en double
• La communication était beaucoup plus simple
• La gestion des langues a fonctionné presque immédiatement (presque !)
• Je n'ai pas eu besoin de remplacer le docheader

Encore mieux : j'ai réalisé que je n'avais plus besoin de récupérer le code HTML du front-end séparément. Je pouvais simplement effectuer une requête avec un paramètre spécial, l'intercepter dans le middleware TYPO3 et modifier le résultat à la volée en injectant des boutons et des scripts. Cette approche était claire et efficace.

À ce stade, j'ai travaillé en étroite collaboration avec le développeur front-end, Paweł Zieliński . Nous avons discuté de la manière de présenter les options de configuration aux éditeurs. Deux idées ont émergé :

• Une barre supérieure à l'intérieur de l'aperçu
• Un menu de hamburgers flottants

Le menu hamburger a été retenu. Il semblait plus moderne, plus léger et évitait de dupliquer la navigation existante de TYPO3.

Le menu stocke désormais des options telles que :

• Faut-il mettre en évidence ou non les éléments de contenu ?
• Quelle méthode de surbrillance utiliser
• Autres configurations d'aperçu

Un autre problème majeur concernait la communication iframe . Nous avions besoin de messages pour :

• Mettre en surbrillance l'élément en cours d'édition
• Modifier le code HTML dans l'iframe dans certains cas
• Gardez les vues backend et frontend synchronisées

Cependant, s'appuyer sur postMessage posait problème, car il ne fonctionne pas sur plusieurs domaines. Cela signifie qu'avec plusieurs pages racines (domaines différents), vous rencontriez des problèmes de reconnexion.

La solution est venue de notre expérience avec les guides interactifs étape par étape. Au lieu de publier des messages, nous avons injecté du JavaScript personnalisé via un intergiciel. Cela a permis une communication bidirectionnelle sécurisée entre TYPO3 et l'aperçu du frontend.

Cette approche fonctionne à la fois dans les configurations HTML standard et headless, mais présente d'autres inconvénients :

• Ce n'est pas si simple de travailler avec les survols sur l'iframe, ce n'est pas précis à 100 %
• Pour l'instant, nous ne disposons pas de toutes les fonctionnalités de l'approche originale, car elle nécessite une réécriture.

Nouvelle approche :

L'une des fonctionnalités expérimentales les plus intéressantes est la possibilité de naviguer dans TYPO3 directement depuis l'aperçu, sans utiliser l'arborescence des pages. Cette fonctionnalité est activée par défaut, mais vous pouvez la désactiver via les Paramètres.