মূল কন্টেন্টে যান

API রেফারেন্স

@clepit/core থেকে পাবলিক এক্সপোর্ট। নিচের প্রতিটি সিম্বল একটি টাইপড সিগনেচার এবং একটি ন্যূনতম ব্যবহারের উদাহরণ সরবরাহ করে।

Editor

মূল এডিটর ক্লাস। Editor-এ দুটি পাবলিক স্ট্যাটিক মেথড রয়েছে: create (প্রধান ফ্যাক্টরি) এবং destroy। create() মেথড একটি EditorAPI অবজেক্ট রিটার্ন করে, যার মাধ্যমে এডিটর মাউন্ট করার পরে সমস্ত মেথড অ্যাক্সেস করা যায়।

মেথডসিগনেচারবর্ণনা
Editor.createEditor.create(config: EditorConfig): EditorAPIএকটি নতুন এডিটর ইনস্ট্যান্স তৈরি করুন এবং সরবরাহকৃত containerId সহ DOM এলিমেন্টে মাউন্ট করুন।
Editor.destroyEditor.destroy(containerId: string): voidEditorAPI অবজেক্টের destroy() মেথড এই ইনস্ট্যান্সের জন্য Editor.destroy() কল করে।
মেথডসিগনেচারবর্ণনা
data.extractdata.extract(): EditorDataএকটি এডিটর ইনস্ট্যান্স থেকে বর্তমান ব্লক ডেটা JSON-নিরাপদ EditorData হিসেবে বের করুন।
data.setdata.set(data: EditorData): voidসম্পূর্ণ ব্লক তালিকাটি একটি নতুন ডেটা পেলোড দিয়ে প্রতিস্থাপন করুন। এটি একটি সম্পূর্ণ রি-রেন্ডার ট্রিগার করে।
data.cleardata.clear(): voidব্লক কন্টেন্ট এবং সংরক্ষিত স্টেট ডেটা উভয়ই মুছে দেয়।
data.clearContentdata.clearContent(): voidশুধুমাত্র ব্লকগুলো সরায়, স্টোরের ডেটা অক্ষত রেখে।
data.clearStoragedata.clearStorage(): voidশুধুমাত্র স্টোর ডেটা পরিষ্কার করে, বর্তমান ব্লকগুলো অক্ষত রেখে।
blocks.insertblocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number): HTMLElement | nullপ্রদত্ত index-এ একটি ব্লক ইনসার্ট করুন। টার্গেট ব্লক টাইপের মতো একই ডেটা আকার গ্রহণ করে।
blocks.convertblocks.convert(blockId: string, newType: BlockToolType): voidএকটি ব্লককে স্থানেই নতুন টাইপে রূপান্তর করুন।
blocks.removeblocks.remove(index: number): voidপ্রদত্ত index-এ থাকা ব্লকটি সরিয়ে ফেলুন।
blocks.moveblocks.move(fromIndex: number, toIndex: number): voidএকটি ব্লককে এক index থেকে অন্য index-এ সরায়।
blocks.updateblocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): voidএকটি বিদ্যমান ব্লকের ডেটা স্থানেই আপডেট করে। টাইপ অপরিবর্তিত থাকে।
blocks.getblocks.get(blockId: string): EditorData['blocks'][number] | nullID দ্বারা একটি ব্লক আনে। না পাওয়া গেলে null রিটার্ন করে।
blocks.getAllblocks.getAll(): EditorData['blocks']সমস্ত ব্লকের ডেটা একটি অ্যারেতে রিটার্ন করে।
blocks.countblocks.count(): numberএডিটরে ব্লকের সংখ্যা রিটার্ন করে।
focusfocus(): voidএডিটরে ফোকাস স্থানান্তর করে, প্রথম ব্লকে ফোকাস দেয়।
blurblur(): voidএডিটরের মধ্যে যেকোনো সক্রিয় ফোকাস সরিয়ে দেয়।
destroydestroy(): voidEditorAPI অবজেক্টের destroy() মেথড এই ইনস্ট্যান্সের জন্য Editor.destroy() কল করে।
selection.getselection.get(): Selection | nullউইন্ডো সিলেকশন অবজেক্ট বা null রিটার্ন করে।
selection.setselection.set(selection: Selection): voidউইন্ডো সিলেকশনকে প্রদত্ত Selection অবজেক্টে সেট করে।
selection.clearselection.clear(): voidউইন্ডো সিলেকশনের সকল রেঞ্জ সরিয়ে দেয়।
ui.showBlockMenuui.showBlockMenu(block: HTMLElement): voidপ্রদত্ত ব্লক DOM এলিমেন্টের জন্য ব্লক টাইপ মেনু দেখায়।
ui.hideBlockMenuui.hideBlockMenu(): voidখোলা থাকলে ব্লক টাইপ মেনু লুকায়।
ui.showToolbarui.showToolbar(x: number, y: number): voidপ্রদত্ত x, y ভিউপোর্ট স্থানাঙ্কে ইনলাইন টুলবার দেখায়।
ui.hideToolbarui.hideToolbar(): voidইনলাইন টুলবার দৃশ্যমান থাকলে লুকায়।
view.getCurrentViewview.getCurrentView(containerId: string): EditorView | nullপ্রদত্ত containerId-এর জন্য বর্তমান view (edit, preview, বা json) রিটার্ন করে।
view.switchViewview.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.renderRenderer.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

থিম সিস্টেম পরিচালনা করে এমন একটি কেন্দ্রীয় ক্লাস। কনজিউমারদের জন্য তিনটি দরকারী পাবলিক স্ট্যাটিক মেথড প্রদান করে: subscribe (OS-স্তরের থিম পরিবর্তনের জন্য), getResolvedTheme (বর্তমান OS থিম জানতে) এবং injectStyles (কাস্টম CSS ইনজেক্ট করতে)।

মেথডসিগনেচারবর্ণনা
StyleManager.subscribeStyleManager.subscribe(cb: (theme: 'light' | 'dark') => void): () => voidরানটাইম থিম টোকেন পরিবর্তনে সাবস্ক্রাইব করুন। theme বা themeOverrides পরিবর্তিত হলে লিসেনার ফায়ার হয়।
StyleManager.getResolvedThemeStyleManager.getResolvedTheme(): 'light' | 'dark'বর্তমান OS থিম ("light" বা "dark") পড়ে। matchMedia পাওয়া না গেলে "light" রিটার্ন করে।
StyleManager.injectStylesStyleManager.injectStyles(styleId: string, styles: string): booleanCSS স্ট্রিং 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();