@clepit/react

Le paquet @clepit/react fournit des composants React pour l'éditeur Clepit : ClepitContent, qui émet du HTML fini sur le serveur, et ClepitEditor, un composant côté client uniquement qui possède le cycle de vie Editor.create.

npm: @clepit/react · npm: @clepit/core

Installation

bun add @clepit/core @clepit/react

ClepitContent

ClepitContent dessine un document en HTML fini via renderBlocks : il fonctionne dans les Server Components, pendant le SSR et dans le navigateur. Le balisage est dans la première réponse : les robots le lisent, et rien ne se redessine au montage. La feuille de style du cœur accompagne le rendu sous forme de balise dédupliquée par React.

import { ClepitContent } from '@clepit/react';

export const Article = ({ document }) => <ClepitContent data={document} />;

Les blocs interactifs s'animent après le montage via activateBlocks de @clepit/core : les onglets de variantes de code, la synchronisation de langage et le bouton copier, les onglets de réponses openapi et le téléchargement CSV des tableaux fonctionnent tous sur le balisage dessiné côté serveur ; seules les données des blocs interactifs passent au navigateur.

Props facultatives :

ClepitEditor

ClepitEditor est côté client uniquement et vit sur son propre sous-chemin : importer le composant d'affichage n'entraîne jamais le code d'édition dans un bundle serveur. Le composant possède le cycle de vie Editor.create : timing des effects et démontage sûr en StrictMode.

'use client';

import { ClepitEditor } from '@clepit/react/editor';

export const Compose = ({ initialData, onSave }) => (
  <ClepitEditor
    initialData={initialData}
    onChange={data => onSave(data)}
    placeholder='Start writing'
  />
);

Les props sont l'EditorConfig de @clepit/core sans containerId (le composant rend son propre conteneur), plus id, className, testId et onApi, qui reçoit l'EditorAPI renvoyée par Editor.create. L'éditeur est non contrôlé : les champs de valeur sont lus une fois au montage, les callbacks voient toujours les props du dernier rendu, et le démontage détruit l'instance.