API संदर्भ
@clepit/core से सार्वजनिक एक्सपोर्ट। नीचे दिया गया प्रत्येक प्रतीक एक टाइप किया हुआ सिग्नेचर और एक न्यूनतम उपयोग उदाहरण प्रदान करता है।
Editor
मुख्य एडिटर क्लास। Editor दो पब्लिक स्टैटिक मेथड expose करता है: create (मुख्य फ़ैक्टरी) और destroy। create() मेथड एक EditorAPI ऑब्जेक्ट लौटाता है जिसके माध्यम से एडिटर माउंट होने के बाद सभी इंस्टेंस मेथड एक्सेस किए जा सकते हैं।
| मेथड | सिग्नेचर | विवरण |
|---|---|---|
| Editor.create | Editor.create(config: EditorConfig): EditorAPI | एक नया एडिटर इंस्टेंस बनाएं और इसे दिए गए containerId वाले DOM एलिमेंट में माउंट करें। |
| Editor.destroy | Editor.destroy(containerId: string): void | EditorAPI ऑब्जेक्ट पर destroy() मेथड इस इंस्टेंस के लिए Editor.destroy() कॉल करती है। |
| मेथड | सिग्नेचर | विवरण |
|---|---|---|
| data.extract | data.extract(): EditorData | एक एडिटर इंस्टेंस से वर्तमान ब्लॉक डेटा को JSON-सुरक्षित EditorData के रूप में निकालें। |
| data.set | data.set(data: EditorData): void | पूरी ब्लॉक सूची को एक नए डेटा पेलोड से बदलें। यह एक पूर्ण रि-रेंडर ट्रिगर करता है। |
| data.clear | data.clear(): void | ब्लॉक कंटेंट और संग्रहीत स्थिति डेटा दोनों को साफ़ करता है। |
| data.clearContent | data.clearContent(): void | केवल ब्लॉकों को हटाता है, store डेटा को अक्षुण्ण रखता है। |
| data.clearStorage | data.clearStorage(): void | केवल store डेटा को साफ़ करता है, वर्तमान ब्लॉक अपरिवर्तित रहते हैं। |
| blocks.insert | blocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number, id?: string): HTMLElement | null | दिए गए index पर एक ब्लॉक इन्सर्ट करें। लक्ष्य ब्लॉक प्रकार के समान डेटा संरचना स्वीकार करता है। |
| blocks.convert | blocks.convert(blockId: string, newType: BlockToolType): void | किसी ब्लॉक को यथास्थान एक नए प्रकार में बदलें। |
| blocks.remove | blocks.remove(index: number): void | दिए गए index पर मौजूद ब्लॉक को हटाएं। |
| blocks.move | blocks.move(fromIndex: number, toIndex: number): void | एक ब्लॉक को एक index से दूसरे index पर ले जाता है। |
| blocks.update | blocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): void | मौजूदा ब्लॉक का डेटा यथास्थान अपडेट करता है। टाइप अपरिवर्तित रहता है। |
| blocks.get | blocks.get(blockId: string): EditorData['blocks'][number] | null | ID द्वारा एक ब्लॉक लाता है। न मिलने पर null लौटाता है। |
| blocks.getAll | blocks.getAll(): EditorData['blocks'] | सभी ब्लॉकों का डेटा एक एरे के रूप में लौटाता है। |
| blocks.count | blocks.count(): number | एडिटर में ब्लॉकों की संख्या लौटाता है। |
| focus | focus(): void | फोकस को एडिटर में ले जाता है, पहले ब्लॉक पर फोकस करता है। |
| blur | blur(): void | एडिटर के अंदर किसी भी सक्रिय फोकस को हटाता है। |
| destroy | destroy(): void | EditorAPI ऑब्जेक्ट पर destroy() मेथड इस इंस्टेंस के लिए Editor.destroy() कॉल करती है। |
| selection.get | selection.get(): Selection | null | विंडो सिलेक्शन ऑब्जेक्ट या null लौटाता है। |
| selection.set | selection.set(selection: Selection): void | विंडो सिलेक्शन को दिए गए Selection ऑब्जेक्ट पर सेट करता है। |
| selection.clear | selection.clear(): void | विंडो सिलेक्शन से सभी ranges हटाता है। |
| ui.showBlockMenu | ui.showBlockMenu(block: HTMLElement): void | दिए गए ब्लॉक DOM एलिमेंट के लिए ब्लॉक टाइप मेनू दिखाता है। |
| ui.hideBlockMenu | ui.hideBlockMenu(): void | यदि ब्लॉक टाइप मेनू खुला है तो उसे छिपाता है। |
| ui.showToolbar | ui.showToolbar(x: number, y: number): void | दिए गए x, y व्यूपोर्ट निर्देशांक पर इनलाइन टूलबार दिखाता है। |
| ui.hideToolbar | ui.hideToolbar(): void | यदि इनलाइन टूलबार दिखाई दे रहा है तो उसे छिपाता है। |
| view.getCurrentView | view.getCurrentView(containerId: string): EditorView | null | दिए गए containerId के लिए वर्तमान view (edit, preview, या json) लौटाता है। |
| view.switchView | view.switchView(containerId: string, view: EditorView): void | एडिटर को एक निर्दिष्ट view पर स्विच करता है: edit, preview, या json। |
सामान्य उपयोग उदाहरण
import { Editor } from '@clepit/core';
const editor = Editor.create({
containerId: 'editor',
theme: 'auto',
placeholder: 'Start writing...',
minHeight: 300,
});
// Insert a block
editor.blocks.insert('paragraph', { html: 'Hello world' }, 0);
// Extract data
const data = editor.data.extract();
// Switch view
editor.view.switchView('editor', 'preview');
// Tear down
editor.destroy();Renderer
एक क्लास जो सहेजे गए ब्लॉक डेटा को DOM एलिमेंट के अंदर रीड-ओनली HTML में बदलती है। इस क्लास में एक पब्लिक स्टैटिक मेथड है: render()।
| मेथड | सिग्नेचर | विवरण |
|---|---|---|
| Renderer.render | Renderer.render(config: RendererConfig): HTMLElement | सहेजे गए ब्लॉक JSON को एक कंटेनर में रीड-ओनली HTML के रूप में रेंडर करें। इसका उपयोग वहाँ करें जहाँ आप संपादन सुविधाओं के बिना सामग्री दिखाना चाहते हैं। |
सामान्य उपयोग उदाहरण
import { Renderer } from '@clepit/core';
Renderer.render({
containerId: 'output',
data,
theme: 'auto',
margins: { bottom: 12, top: 0 },
});सर्वर रेंडरिंग
ये फ़ंक्शन बिना DOM और बिना ब्राउज़र चलते हैं: ये तैयार HTML स्ट्रिंग बनाते हैं, इसलिए Node, edge रनटाइम और सर्वर कंपोनेंट में काम करते हैं। React में @clepit/react इन्हें ClepitContent के रूप में समेटता है।
| मेथड | सिग्नेचर | विवरण |
|---|---|---|
| renderBlocks | renderBlocks(blocks: Block[], context?: DrawContext): string | किसी दस्तावेज़ को तैयार HTML स्ट्रिंग में बनाता है, DOM की जरूरत नहीं। |
| renderPage | renderPage(page: PublicPage, context?: DrawContext): string | दस्तावेज़ के लिए पूरा सार्वजनिक HTML पेज बनाता है: मार्कअप, स्टाइलशीट, मेटाडेटा और एंकर-नेविगेबल ब्लॉक आईडी। |
| pageStylesheet | pageStylesheet(): string | स्टैटिक रूप से बने मार्कअप की स्टाइलशीट लौटाता है, renderBlocks आउटपुट के साथ परोसने या इनलाइन करने के लिए। |
| activateBlocks | activateBlocks(container: HTMLElement, blocks: readonly Block[]): () => void | माउंट के बाद सर्वर-निर्मित मार्कअप में इंटरैक्टिव व्यवहार जोड़ता है (कोड टैब, कॉपी बटन, openapi रिस्पॉन्स टैब, टेबल CSV डाउनलोड) और एक डिस्पोज़र लौटाता है। |
| drawBlock | drawBlock(block: Block, backing: Backing, context?: DrawContext): ClepitElement | null | एक ब्लॉक को backing पर बनाता है; string backing के साथ यह बिल्कुल बिना DOM के बनाता है। |
| tokensToLightDarkBlock | tokensToLightDarkBlock(light: ThemeTokens, dark: ThemeTokens, selector: string): string | हल्के और गहरे ThemeTokens जोड़े को किसी सिलेक्टर के लिए light-dark() CSS वैरिएबल ब्लॉक में बदलता है, ताकि बिना लाइव StyleManager के स्टैटिक मार्कअप थीम हो सके। |
import { activateBlocks, pageStylesheet, renderBlocks } from '@clepit/core';
// On the server: finished HTML, no DOM needed
const html = renderBlocks(doc.blocks);
const css = pageStylesheet();
// In the browser, after mount: wire the interactive blocks
const dispose = activateBlocks(container, doc.blocks);StyleManager
एक केंद्रीकृत क्लास जो थीम सिस्टम का प्रबंधन करती है। यह कंज्यूमर्स के लिए तीन उपयोगी पब्लिक स्टैटिक मेथड expose करती है: subscribe (OS-स्तरीय थीम परिवर्तनों के लिए), getResolvedTheme (वर्तमान OS थीम पढ़ने के लिए) और injectStyles (कस्टम CSS इंजेक्ट करने के लिए)।
| मेथड | सिग्नेचर | विवरण |
|---|---|---|
| StyleManager.subscribe | StyleManager.subscribe(cb: (theme: 'light' | 'dark') => void): () => void | रनटाइम थीम token परिवर्तनों की सदस्यता लें। जब भी theme या themeOverrides बदलता है, listener फायर होता है। |
| StyleManager.getResolvedTheme | StyleManager.getResolvedTheme(): 'light' | 'dark' | वर्तमान OS थीम ("light" या "dark") पढ़ता है। यदि matchMedia अनुपलब्ध है तो "light" लौटाता है। |
| StyleManager.injectStyles | StyleManager.injectStyles(styleId: string, styles: string): boolean | CSS स्ट्रिंग को document.head में इंजेक्ट करता है (अनन्य styleId का उपयोग करें)। यदि पहले से मौजूद है तो false, अन्यथा true लौटाता है। |
सामान्य उपयोग उदाहरण
import { StyleManager } from '@clepit/core';
// React to OS theme changes
const unsubscribe = StyleManager.subscribe(theme => {
console.log('OS theme:', theme); // 'light' | 'dark'
});
// Read current OS theme
const current = StyleManager.getResolvedTheme();
// Inject custom CSS once
StyleManager.injectStyles('my-overrides', `
.clepit-editor { font-family: 'Inter', sans-serif; }
`);
// Unsubscribe when done
unsubscribe();