@clepit/react

O pacote @clepit/react fornece componentes React para o editor Clepit: ClepitContent, que emite HTML pronto no servidor, e ClepitEditor, um componente somente de cliente que possui o ciclo de vida do Editor.create.

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

Instalar

bun add @clepit/core @clepit/react

ClepitContent

O ClepitContent desenha um documento em HTML pronto através do renderBlocks, então funciona em Server Components, durante o SSR e no navegador. A marcação está na resposta inicial: crawlers a leem, e nada repinta na montagem. A folha de estilos do núcleo acompanha como uma tag deduplicada pelo React.

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

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

Os blocos interativos ganham vida após a montagem através do activateBlocks do @clepit/core: as abas de variantes de código, a sincronização de linguagem e o botão de copiar, as abas de respostas do openapi e o download CSV da tabela funcionam todos sobre a marcação desenhada no servidor; apenas os dados dos blocos interativos cruzam para o navegador.

Props opcionais:

ClepitEditor

O ClepitEditor é somente de cliente e vive em seu próprio subcaminho, então importar o componente de exibição nunca puxa código de edição para um bundle de servidor. O componente possui o ciclo de vida do Editor.create: timing de effects e desmontagem segura 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'
  />
);

As props são o EditorConfig do @clepit/core menos containerId (o componente renderiza seu próprio suporte), mais id, className, testId e onApi, que recebe a EditorAPI retornada pelo Editor.create. O editor é não controlado: campos de valor são lidos uma vez na montagem, callbacks sempre veem as props do render mais recente, e desmontar destrói a instância.