Zum Hauptinhalt springen

@clepit/react

Das Paket @clepit/react liefert React-Komponenten für den Clepit-Editor: ClepitContent, das auf dem Server fertiges HTML ausgibt, und ClepitEditor, eine reine Client-Komponente, die den Editor.create-Lebenszyklus besitzt.

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

Installation

Shell
bun add @clepit/core @clepit/react

ClepitContent

ClepitContent zeichnet ein Dokument über renderBlocks zu fertigem HTML, funktioniert also in Server Components, während des SSR und im Browser. Das Markup steckt in der ersten Antwort: Crawler lesen es, und beim Mounten wird nichts neu gezeichnet. Das Kern-Stylesheet reist als von React deduplizierter -Tag mit.

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

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

Interaktive Blöcke erwachen nach dem Mounten über activateBlocks aus @clepit/core zum Leben: Code-Varianten-Tabs, Sprachsynchronisierung und der Kopierknopf, openapi-Antwort-Tabs und der Tabellen-CSV-Download arbeiten alle auf dem serverseitig gezeichneten Markup; nur die Daten der interaktiven Blöcke wandern in den Browser.

Optionale Props:

FeldTypErforderlichBeschreibung
theme'auto' | 'light' | 'dark'Nein'auto'
themeOverrides{ light?, dark? }NeinThemeTokens
context{ docHref?, mapsEmbedKey?, activeVariant? }Nein
transformHtml(html: string) => stringNein
classNamestringNein
testIdstringNein

ClepitEditor

ClepitEditor ist eine reine Client-Komponente und lebt auf einem eigenen Unterpfad, sodass der Import der Anzeigekomponente nie Editier-Code in ein Server-Bundle zieht. Die Komponente besitzt den Editor.create-Lebenszyklus: Effect-Timing und StrictMode-sicheren Abbau.

TypeScript
'use client';

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

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

Die Props sind EditorConfig aus @clepit/core ohne containerId (die Komponente rendert ihren eigenen Halter), plus id, className, testId und onApi, das die von Editor.create zurückgegebene EditorAPI erhält. Der Editor ist unkontrolliert: Wertfelder werden einmal beim Mounten gelesen, Callbacks sehen immer die Props des letzten Renderings, und das Unmounten zerstört die Instanz.