Liigu põhisisu juurde

@clepit/react

@clepit/react pakett annab Clepiti redaktorile React-komponendid: ClepitContent, mis väljastab serveris valmis HTML-i, ja ClepitEditor, ainult kliendis töötav komponent, mis omab Editor.create elutsüklit.

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

Paigaldus

Shell
bun add @clepit/core @clepit/react

ClepitContent

ClepitContent joonistab dokumendi renderBlocks kaudu valmis HTML-iks, nii et see töötab Server Components sees, SSR-i ajal ja brauseris. Märgistus on esimeses vastuses: roomajad loevad seda ja monteerimisel ei joonistata midagi uuesti. Tuuma stiilileht käib kaasas märgendina, mille React dubleerimisest puhastab.

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

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

Interaktiivsed plokid ärkavad pärast monteerimist ellu @clepit/core funktsiooniga activateBlocks: koodivariantide vahelehed, keele sünkroonimine ja kopeerimisnupp, openapi vastuste vahelehed ning tabeli CSV allalaadimine töötavad kõik serveris joonistatud märgistusel; brauserisse liigub ainult interaktiivsete plokkide andmestik.

Valikulised propsid:

VäliTüüpNõutavKirjeldus
theme'auto' | 'light' | 'dark'Ei'auto'
themeOverrides{ light?, dark? }EiThemeTokens
context{ docHref?, mapsEmbedKey?, activeVariant? }Ei
transformHtml(html: string) => stringEi
classNamestringEi
testIdstringEi

ClepitEditor

ClepitEditor on ainult kliendi jaoks ja elab omaenda alamteel, nii et kuvamiskomponendi importimine ei tõmba redigeerimiskoodi kunagi serveripaketti. Komponent omab Editor.create elutsüklit: effect-ajastust ja StrictMode-kindlat lammutamist.

TypeScript
'use client';

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

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

Propsid on @clepit/core EditorConfig ilma containerId-ta (komponent renderdab oma hoidja ise), lisaks id, className, testId ja onApi, mis saab Editor.create tagastatud EditorAPI. Redaktor on kontrollimata: väärtusväljad loetakse monteerimisel üks kord, callbackid näevad alati viimase renderduse propse ja lahtimonteerimine hävitab instantsi.