@clepit/react

@clepit/react पैकेज Clepit एडिटर के लिए React कंपोनेंट देता है: ClepitContent, जो सर्वर पर तैयार HTML निकालता है, और ClepitEditor, केवल क्लाइंट पर चलने वाला कंपोनेंट जो Editor.create जीवनचक्र का स्वामी है।

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 डाउनलोड, सब सर्वर पर बने मार्कअप पर काम करते हैं; केवल इंटरैक्टिव ब्लॉकों का डेटा ब्राउज़र तक जाता है।

वैकल्पिक प्रॉप्स:

फ़ील्ड	प्रकार	आवश्यक	विवरण
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 जीवनचक्र का स्वामी है: effect टाइमिंग और 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'
  />
);

प्रॉप्स @clepit/core का EditorConfig हैं, containerId के बिना (कंपोनेंट अपना होल्डर खुद बनाता है), साथ में id, className, testId और onApi, जिसे Editor.create का लौटाया EditorAPI मिलता है। एडिटर अनकंट्रोल्ड है: वैल्यू फ़ील्ड माउंट पर एक बार पढ़े जाते हैं, callbacks हमेशा नवीनतम रेंडर के props देखते हैं, और अनमाउंट इंस्टेंस को नष्ट कर देता है।