কনফিগারেশন
EditorConfig এবং RendererConfig প্রতিটি কাস্টমাইজেশনের প্রবেশ পথ। Editor.create() অথবা Renderer.render()-এ যথাক্রমে পাস করুন। শুধুমাত্র containerId (এবং renderer-এর জন্য data) আবশ্যক, অন্য সব অপশনে নিরাপদ ডিফল্ট আছে।
EditorConfig
EditorConfig একমাত্র আর্গুমেন্ট হিসেবে Editor.create()-এ পাস করুন। আবশ্যক containerId একটি বিদ্যমান DOM এলিমেন্ট id-এর সাথে মিলতে হবে।
| বিকল্প | ধরন | আবশ্যক | বিবরণ |
|---|---|---|---|
| containerId | string | হ্যাঁ | DOM এলিমেন্টের ID যা এডিটরকে হোস্ট করবে। Editor.create() কল করার আগে অবশ্যই DOM-এ থাকতে হবে। |
| maxHeight | number | না | পিক্সেলে এডিটরের সর্বোচ্চ উচ্চতা। উচ্চতার কোনো সীমা না রাখতে 0 (ডিফল্ট) সেট করুন। |
| minHeight | number | না | পিক্সেলে এডিটরের সর্বনিম্ন উচ্চতা। ডিফল্ট 300। |
| onChange | (data: EditorData) => void | না | ডকুমেন্ট পরিবর্তিত হলে ফায়ার হওয়া কলব্যাক। সম্পূর্ণ EditorData স্ন্যাপশট গ্রহণ করে। |
| onReady | () => void | না | এডিটর সম্পূর্ণভাবে ইনিশিয়ালাইজ হয়ে API কল গ্রহণ করতে প্রস্তুত হলে ফায়ার হওয়া কলব্যাক। |
| placeholder | string | না | এডিটর খালি থাকলে দেখানো প্লেসহোল্ডার টেক্সট। ডিফল্ট "Start writing..."। |
| initialData | EditorData | না | এডিটর মাউন্ট হওয়ার সময় লোড করার জন্য আগে থেকে পূর্ণ EditorData। |
| initialView | 'edit' | 'preview' | 'json' | না | শুরুর ভিউ মোড। এর মধ্যে একটি: edit, preview, json। ডিফল্ট "edit"। |
| allowJsonViewEditing | boolean | না | true হলে, JSON ভিউ এডিটযোগ্য হয় এবং পরিবর্তনগুলো ডকুমেন্টে প্রতিফলিত হয়। ডিফল্ট false। |
| margins | BlockMargins | না | প্রতিটি ব্লকে প্রয়োগ করা বৈশ্বিক উপরে এবং নিচে মার্জিন (পিক্সেলে)। ব্লক-স্তরের কনফিগ অগ্রাধিকার পায়। |
| styles | EditorStyles | না | EditorStyles অবজেক্ট এডিটর ক্রোম (টুলবার, ডায়ালগ, কন্ট্রোল) এর সূক্ষ্ম CSS কাস্টমাইজেশনের জন্য। |
| classNames | EditorClassNames | না | এডিটর ক্রোম এলিমেন্টগুলোতে CSS ক্লাস নাম সংযুক্ত করতে EditorClassNames অবজেক্ট। |
| imageUploader | UploadFunction | না | অ্যাসিঙ্ক্রোনাস ফাংশন যা একটি ইমেজ ফাইল আপলোড করে এবং একটি পাবলিক URL স্ট্রিং ফেরত দেয়। |
| audioUploader | UploadFunction | না | অ্যাসিঙ্ক্রোনাস ফাংশন যা একটি অডিও ফাইল আপলোড করে এবং একটি পাবলিক URL স্ট্রিং ফেরত দেয়। |
| videoUploader | UploadFunction | না | অ্যাসিঙ্ক্রোনাস ফাংশন যা একটি ভিডিও ফাইল আপলোড করে এবং একটি পাবলিক URL স্ট্রিং ফেরত দেয়। |
| theme | 'auto' | 'light' | 'dark' | না | রঙের স্কিম। এর মধ্যে একটি: auto (সিস্টেম অনুসরণ করে), light, dark। ডিফল্ট auto। |
| themeOverrides | { light?: ThemeTokens; dark?: ThemeTokens } | না | প্রতি-মোড টোকেন ওভাররাইড। সম্পূর্ণ থিম প্রতিস্থাপন না করেই রঙ কাস্টমাইজ করতে light এবং/অথবা dark টোকেন ম্যাপ সরবরাহ করুন। |
TypeScript
import { Editor } from '@clepit/core';
const editor = Editor.create({
containerId: 'editor',
minHeight: 400,
placeholder: 'Start writing...',
theme: 'auto',
onChange: data => console.log(data),
onReady: () => console.log('Editor ready'),
imageUploader: async file => {
const form = new FormData();
form.append('file', file);
const res = await fetch('/api/upload', { body: form, method: 'POST' });
const { url } = await res.json();
return url;
},
});RendererConfig
RendererConfig একমাত্র আর্গুমেন্ট হিসেবে Renderer.render()-এ পাস করুন। containerId এবং data উভয়ই আবশ্যক।
| বিকল্প | ধরন | আবশ্যক | বিবরণ |
|---|---|---|---|
| containerId | string | হ্যাঁ | DOM এলিমেন্টের ID যেখানে রেন্ডার করা আউটপুট ইনজেক্ট করা হবে। |
| data | EditorData | হ্যাঁ | রেন্ডার করার জন্য EditorData ডকুমেন্ট। আবশ্যক। |
| margins | BlockMargins | না | প্রতিটি রেন্ডার করা ব্লকে প্রয়োগ করা বৈশ্বিক উপরে এবং নিচে মার্জিন (পিক্সেলে)। |
| styles | BlockStyles | না | রেন্ডার করা আউটপুটের প্রতি-ব্লক-টাইপ CSS কাস্টমাইজেশনের জন্য BlockStyles ম্যাপ। |
| classNames | BlockClassNames | না | রেন্ডার করা আউটপুটে প্রতি-ব্লক-টাইপ CSS ক্লাস নামের জন্য BlockClassNames ম্যাপ। |
| editorClassNames | EditorClassNames | না | EditorClassNames যা ইন্টারেক্টিভ কম্পোনেন্ট রেন্ডার করা ব্লকগুলোতে পাস করা হয় (যেমন প্যারাগ্রাফের জন্য tooltip ক্লাস নাম)। |
| configs | Partial<BlockTypeOutputConfigs> | না | ব্লক OutputConfig অবজেক্টগুলোর আংশিক ম্যাপ। প্রতিটি এন্ট্রি ব্লক-স্তরের মার্জিন এবং tooltip ক্লাস নাম সেট করতে পারে। |
| theme | 'auto' | 'light' | 'dark' | না | রঙের স্কিম। এর মধ্যে একটি: auto, light, dark। |
| themeOverrides | { light?: ThemeTokens; dark?: ThemeTokens } | না | রেন্ডার করা আউটপুটের জন্য প্রতি-মোড টোকেন ওভাররাইড। |
TypeScript
import { Renderer } from '@clepit/core';
import type { EditorData } from '@clepit/core';
const data: EditorData = await fetch('/api/content/123').then(r => r.json());
Renderer.render({
containerId: 'output',
data,
theme: 'auto',
margins: { bottom: 16, top: 16 },
});ব্লক-স্তরের স্টাইলিং
EditorConfig এবং RendererConfig উভয়ই ব্লক টাইপ দ্বারা কীড styles, classNames এবং configs গ্রহণ করে। লক্ষ্যভিত্তিক ওভাররাইডের জন্য এগুলো ব্যবহার করুন; সম্পূর্ণ প্রতি-টোকেন রেফারেন্সের জন্য Themes পেজ দেখুন।
TypeScript
import { Editor, Renderer } from '@clepit/core';
import type { BlockStyles, BlockClassNames, EditorStyles } from '@clepit/core';
const editorStyles: EditorStyles = {
blockToolbar: { container: { borderRadius: '8px' } },
};
const blockStyles: BlockStyles = {
header: { h1: { fontFamily: 'Georgia, serif' } },
paragraph: { lineHeight: '1.75' },
table: { cell: { padding: '8px 12px' } },
};
const blockClassNames: BlockClassNames = {
paragraph: 'prose-paragraph',
header: { h1: 'prose-h1', h2: 'prose-h2' },
alert: { info: 'alert-info', error: 'alert-error' },
};
Editor.create({
containerId: 'editor',
styles: editorStyles,
});
Renderer.render({
containerId: 'output',
data,
styles: blockStyles,
classNames: blockClassNames,
});