@clepit/react

@clepit/react 패키지는 Clepit 에디터용 React 컴포넌트를 제공합니다. 서버에서 완성된 HTML을 내보내는 ClepitContent와 Editor.create 생명주기를 소유하는 클라이언트 전용 ClepitEditor입니다.

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

설치

Shell

bun add @clepit/core @clepit/react

ClepitContent

ClepitContent는 renderBlocks를 통해 문서를 완성된 HTML로 그리므로 Server Components 안에서, SSR 중에, 브라우저에서 동작합니다. 마크업은 첫 응답에 담겨 크롤러가 읽을 수 있고, 마운트 시 다시 그려지는 것이 없습니다. 코어 스타일시트는 React가 중복 제거하는 태그로 함께 전달됩니다.

TypeScript

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

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

인터랙티브 블록은 마운트 후 @clepit/core의 activateBlocks로 살아납니다. 코드 변형 탭, 언어 동기화와 복사 버튼, openapi 응답 탭, 테이블 CSV 다운로드가 모두 서버에서 그린 마크업 위에서 동작하며, 브라우저로는 인터랙티브 블록의 데이터만 전달됩니다.

선택적 props:

필드	타입	필수	설명
theme	'auto' \| 'light' \| 'dark'	아니요	'auto'
themeOverrides	{ light?, dark? }	아니요	ThemeTokens
context	{ docHref?, mapsEmbedKey?, activeVariant? }	아니요
transformHtml	(html: string) => string	아니요
className	string	아니요
testId	string	아니요

ClepitEditor

ClepitEditor는 클라이언트 전용이며 자체 서브패스에 있으므로, 표시 컴포넌트를 가져와도 편집 코드가 서버 번들에 딸려 오지 않습니다. 이 컴포넌트는 Editor.create 생명주기(이펙트 타이밍과 StrictMode에 안전한 해체)를 소유합니다.

TypeScript

'use client';

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

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

Props는 @clepit/core의 EditorConfig에서 containerId를 뺀 것(컴포넌트가 자체 홀더를 렌더링)에 id, className, testId, 그리고 Editor.create가 반환한 EditorAPI를 받는 onApi를 더한 것입니다. 에디터는 비제어형입니다. 값 필드는 마운트 시 한 번 읽히고, 콜백은 항상 최신 렌더의 props를 보며, 마운트 해제는 인스턴스를 파괴합니다.