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 Contenful mais simplement commiter mon contenu sur le dépôt idoïne en Markdown.

Du Markdown vers l'arbre AST

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

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

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écusif pour gérer cette problématique. Je dois toujours gérer les attributs HTML.

Faire la correspondance avec les composants

Au final, la fonction qui rend le contenu est quasiment identique à celle de Contenful. 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.