@clepit/react

Пакет @clepit/react даёт React-компоненты для редактора Clepit: ClepitContent, выводящий готовый HTML на сервере, и ClepitEditor, компонент только для клиента, владеющий жизненным циклом Editor.create.

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

Установка

bun add @clepit/core @clepit/react

ClepitContent

ClepitContent рисует документ в готовый HTML через renderBlocks, поэтому работает в Server Components, во время SSR и в браузере. Разметка находится в первом ответе: краулеры её читают, и при монтировании ничего не перерисовывается. Базовая таблица стилей едет вместе с разметкой как тег , дедуплицируемый React.

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

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

Интерактивные блоки оживают после монтирования через activateBlocks из @clepit/core: вкладки вариантов кода, синхронизация языка и кнопка копирования, вкладки ответов openapi и скачивание CSV таблицы работают на разметке, нарисованной сервером; в браузер переходят только данные интерактивных блоков.

Необязательные пропсы:

ClepitEditor

ClepitEditor работает только на клиенте и живёт на собственном подпути, поэтому импорт компонента отображения никогда не затягивает код редактирования в серверный бандл. Компонент владеет жизненным циклом Editor.create: таймингом эффектов и безопасным для StrictMode демонтажом.

'use client';

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

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

Пропсы являются EditorConfig из @clepit/core без containerId (компонент рисует собственный держатель), плюс id, className, testId и onApi, получающий EditorAPI, возвращённый Editor.create. Редактор неуправляемый: поля значений читаются один раз при монтировании, колбэки всегда видят пропсы последнего рендера, а размонтирование уничтожает экземпляр.