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): 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। |
सामान्य उपयोग उदाहरण
TypeScript
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 के रूप में रेंडर करें। इसका उपयोग वहाँ करें जहाँ आप संपादन सुविधाओं के बिना सामग्री दिखाना चाहते हैं। |
सामान्य उपयोग उदाहरण
TypeScript
import { Renderer } from '@clepit/core';
Renderer.render({
containerId: 'output',
data,
theme: 'auto',
margins: { bottom: 12, top: 0 },
});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 लौटाता है। |
सामान्य उपयोग उदाहरण
TypeScript
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();