@clepit/react

@clepit/react パッケージは Clepit エディター用の React コンポーネントを提供します。サーバーで完成した HTML を出力する ClepitContent と、Editor.create のライフサイクルを所有するクライアント専用の ClepitEditor です。

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

インストール

bun add @clepit/core @clepit/react

ClepitContent

ClepitContent は renderBlocks を通じてドキュメントを完成した HTML に描画します。そのため Server Components 内、SSR 中、ブラウザ内で動作します。マークアップは最初のレスポンスに含まれ、クローラーが読め、マウント時に再描画されません。コアのスタイルシートは React が重複排除する タグとして同行します。

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

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

インタラクティブなブロックは、マウント後に @clepit/core の activateBlocks で動き出します。コードバリアントのタブ、言語同期とコピーボタン、openapi のレスポンスタブ、テーブルの CSV ダウンロードはすべてサーバーで描画されたマークアップ上で機能し、ブラウザに渡るのはインタラクティブなブロックのデータだけです。

任意の props:

ClepitEditor

ClepitEditor はクライアント専用で独自のサブパスにあるため、表示コンポーネントをインポートしても編集コードがサーバーバンドルに入ることはありません。このコンポーネントは Editor.create のライフサイクル (effect のタイミングと StrictMode で安全な破棄) を所有します。

'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 を参照し、アンマウントでインスタンスは破棄されます。