Rendre votre contenu Markdown avec React via l'AST

Si vous avez déjà utilisé Contentful, un head-less CMS, vous avez probablement, comme moi écrit du code pour transformer vos blocs Contentful vers vos composants React.

J'ai trouvé ça très propre, mais pour mon blog politique, je ne voulais pas utiliser Contentful mais simplement commiter mon contenu sur le dépôt idoine en Markdown.

Du Markdown vers l'arbre AST 🔗

J'ai donc commencé à chercher un module qui me permettrait d'obtenir, à partir de mon Markdown, le même genre d'arbre qui sort de l'éditeur de contenu de Contentful.

J'ai trouvé que la combinaison unified et remark donnait quelque chose de très similaire à ce que propose Contentful.

Gestion du HTML 🔗

La partie complexe a été de gérer les balises HTML présentes dans le markdown. En effet, ce n'était pas parsé en prenant en compte les balises entrantes/fermantes. J'ai dû créer un petit algorithme récursif pour gérer cette problématique. Je dois toujours y gérer les attributs HTML.

Faire la correspondance avec les composants 🔗

Au final, la fonction qui rend le contenu est quasiment identique à celle de Contentful. Plus question d'utiliser dangerouslySetInnerHTML ;).

Petits plus 🔗

En sus, j'ai pris le soin de transformer tous les titres de type <h2+> pour créer des ancres automatiquement et pouvoir lier une section en particulier (comme ici avec le titre "Une fuite en avant sans vision politique").

J'ai simplement dû créer une fonction pour récupérer le texte d'un titre quel que soit son contenu et la profondeur de ses sous-éléments imbriqués et ajouter mon composant d'ancrage au mapper de composant.

J'espère que le code vous a plût, n'hésitez pas à le réutiliser. J'en ferais une librairie quand cela deviendra un peu plus stable et facilement réutilisable.

Published at mercredi 1 décembre 2021 à 23:00:00.