@clepit/react

Paket @clepit/react menyediakan komponen React untuk editor Clepit: ClepitContent, yang mengeluarkan HTML jadi di server, dan ClepitEditor, komponen khusus klien yang memiliki daur hidup Editor.create.

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

Instal

Shell

bun add @clepit/core @clepit/react

ClepitContent

ClepitContent menggambar dokumen menjadi HTML jadi melalui renderBlocks, sehingga bekerja di Server Components, selama SSR, dan di peramban. Markup ada di respons awal: crawler membacanya, dan tidak ada yang digambar ulang saat mount. Stylesheet inti ikut serta sebagai tag yang dideduplikasi React.

TypeScript

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

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

Blok interaktif hidup setelah mount melalui activateBlocks dari @clepit/core: tab varian kode, sinkronisasi bahasa dan tombol salin, tab respons openapi, serta unduhan CSV tabel semuanya bekerja pada markup yang digambar server; hanya data blok interaktif yang menyeberang ke peramban.

Prop opsional:

Bidang	Tipe	Diperlukan	Deskripsi
theme	'auto' \| 'light' \| 'dark'	Tidak	'auto'
themeOverrides	{ light?, dark? }	Tidak	ThemeTokens
context	{ docHref?, mapsEmbedKey?, activeVariant? }	Tidak
transformHtml	(html: string) => string	Tidak
className	string	Tidak
testId	string	Tidak

ClepitEditor

ClepitEditor khusus klien dan berada di subpath-nya sendiri, sehingga mengimpor komponen tampilan tidak pernah menarik kode penyuntingan ke bundel server. Komponen ini memiliki daur hidup Editor.create: pengaturan waktu effect dan pembongkaran yang aman untuk 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'
  />
);

Prop-nya adalah EditorConfig dari @clepit/core tanpa containerId (komponen merender wadahnya sendiri), plus id, className, testId, dan onApi, yang menerima EditorAPI yang dikembalikan Editor.create. Editor ini tak terkontrol: bidang nilai dibaca sekali saat mount, callback selalu melihat prop render terbaru, dan unmount menghancurkan instans.