@clepit/react

El paquete @clepit/react ofrece componentes React para el editor Clepit: ClepitContent, que emite HTML terminado en el servidor, y ClepitEditor, un componente solo de cliente que posee el ciclo de vida de Editor.create.

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

Instalar

bun add @clepit/core @clepit/react

ClepitContent

ClepitContent dibuja un documento a HTML terminado a través de renderBlocks, así que funciona en Server Components, durante el SSR y en el navegador. El marcado está en la respuesta inicial: los rastreadores lo leen, y nada se repinta al montar. La hoja de estilos del núcleo acompaña como una etiqueta deduplicada por React.

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

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

Los bloques interactivos cobran vida tras el montaje mediante activateBlocks de @clepit/core: las pestañas de variantes de código, la sincronización de lenguaje y el botón de copiar, las pestañas de respuestas de openapi y la descarga CSV de la tabla funcionan sobre el marcado dibujado en el servidor; solo los datos de los bloques interactivos cruzan al navegador.

Props opcionales:

ClepitEditor

ClepitEditor es solo de cliente y vive en su propio subpath, así que importar el componente de visualización nunca arrastra código de edición a un bundle de servidor. El componente posee el ciclo de vida de Editor.create: el timing de los effects y un desmontaje seguro para StrictMode.

'use client';

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

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

Las props son el EditorConfig de @clepit/core menos containerId (el componente renderiza su propio contenedor), más id, className, testId y onApi, que recibe la EditorAPI devuelta por Editor.create. El editor es no controlado: los campos de valor se leen una vez al montar, los callbacks siempre ven las props del último render, y desmontar destruye la instancia.