কনফিগারেশন
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। |
| hasViewSwitcher | boolean | না | false হলে, অ্যাকশন বার থেকে এডিট, প্রিভিউ ও JSON বোতাম বাদ যায়। ডিফল্ট true। |
| hasDocumentActions | boolean | না | false হলে, অ্যাকশন বার থেকে কপি, ডাউনলোড ও মুছে ফেলার বোতাম বাদ যায়। hasViewSwitcher-ও false হলে অ্যাকশন বার দেখানো হয় না। ডিফল্ট true। |
| onClearRequest | () => Promise<boolean> | না | মুছে ফেলার বোতাম চাপলে ডাকা হয়। true ফেরালে তবেই পাতা মোছে; প্রত্যাখ্যাত হলে পাতা যেমন ছিল তেমনই থাকে। না দিলে সঙ্গে সঙ্গে মুছে যায়। |
| margins | BlockMargins | না | প্রতিটি ব্লকে প্রয়োগ করা বৈশ্বিক উপরে এবং নিচে মার্জিন (পিক্সেলে)। ব্লক-স্তরের কনফিগ অগ্রাধিকার পায়। |
| styles | EditorStyles | না | EditorStyles অবজেক্ট এডিটর ক্রোম (টুলবার, ডায়ালগ, কন্ট্রোল) এর সূক্ষ্ম CSS কাস্টমাইজেশনের জন্য। |
| classNames | EditorClassNames | না | এডিটর ক্রোম এলিমেন্টগুলোতে CSS ক্লাস নাম সংযুক্ত করতে EditorClassNames অবজেক্ট। |
| imageUploader | UploadFunction | না | অ্যাসিঙ্ক্রোনাস ফাংশন যা একটি ইমেজ ফাইল আপলোড করে এবং একটি পাবলিক URL স্ট্রিং ফেরত দেয়। |
| audioUploader | UploadFunction | না | অ্যাসিঙ্ক্রোনাস ফাংশন যা একটি অডিও ফাইল আপলোড করে এবং একটি পাবলিক URL স্ট্রিং ফেরত দেয়। |
| videoUploader | UploadFunction | না | অ্যাসিঙ্ক্রোনাস ফাংশন যা একটি ভিডিও ফাইল আপলোড করে এবং একটি পাবলিক URL স্ট্রিং ফেরত দেয়। |
| fileUploader | UploadFunction | না | ফাইল ব্লকের সংযুক্তি আপনার স্টোরেজে আপলোড করা আপলোড ফাংশন। |
| locale | string | না | এডিটর যে একক লোকাল সম্পাদনা করে। বহুভাষিক ব্লক এই লোকালে ফ্ল্যাটেন হয়। |
| defaultLocale | string | না | অনুরোধ করা লোকালের কন্টেন্ট ব্লকে না থাকলে ব্যবহৃত ফলব্যাক লোকাল। |
| onLocaleFallback | (info: { blockId: string; locale: string }) => void | না | কোনো ব্লক ফলব্যাক লোকালে পড়লে কল হয়, যাতে হোস্ট একটি সূচক দেখাতে পারে। |
| onInlineRewrite | (selection: string, action: InlineRewriteAction) => Promise<string | null> | না | নির্বাচিত টেক্সটকে AI দিয়ে পুনর্লিখন করা ফাংশন; সেট থাকলে টুলবারে রিরাইট বোতাম দেখায়। |
| inlineRewriteLabels | Partial<Record<InlineRewriteAction, string>> | না | রিরাইট মেনুর অ্যাকশন লেবেলগুলো প্রতিস্থাপন করে, অনুবাদের জন্য। |
| inlineRewriteTooltip | string | না | ইনলাইন টুলবারের রিরাইট ওয়ান্ডের টুলটিপ প্রতিস্থাপন করে, অনুবাদের জন্য। |
| blockToolLabels | Partial<Record<BlockToolType, string>> | না | টুলবক্স ও স্ল্যাশ মেনুতে ব্লক টুলের লেবেল প্রতিস্থাপন করে, অনুবাদের জন্য। |
| blockToolbarLabels | Partial<Record<BlockToolbarLabel, string>> | না | ব্লক টুলবারের টেক্সট (যোগ, সরানো, মুছে ফেলা ইত্যাদি) এবং খালি ব্লক ঘরে দেখানো ইঙ্গিত প্রতিস্থাপন করে, অনুবাদের জন্য। |
| controlLabels | Partial<Record<ControlLabel, string>> | না | অ্যাকশন বারের বোতামগুলোর নাম (এডিট, প্রিভিউ, JSON, কপি, ডাউনলোড, মুছে ফেলা) প্রতিস্থাপন করে, যা তাদের অ্যাক্সেসযোগ্য নাম ও টুলটিপ হিসেবে ব্যবহৃত হয়, অনুবাদের জন্য। |
| dialogLabels | Partial<Record<DialogLabel, string>> | না | লিংক, টুলটিপ ও অবস্থার ডায়ালগে দেখানো শব্দ, নাম অনুযায়ী: শিরোনাম, ঘরের লেবেল, প্লেসহোল্ডার, অবস্থার ধরন, বাতিল ও প্রয়োগ। না দিলে ইংরেজিতে দেখায়। |
| resolveLink | (url: string) => Promise<Partial<EmbedData>> | না | পেস্ট করা এমবেডের স্ন্যাপশট আপনার সার্ভার থেকে ভরায়: শিরোনাম, Drive ফাইল, gist ফাইল বা লাইভ ভিউ সম্ভব না হওয়ার কারণ। ব্যর্থ লুকআপ কার্ডটিকে "টুল উত্তর দেয়নি" হিসেবে আঁকে, পাশে "আবার চেষ্টা করুন" সহ। |
| onEmbedAction | (action: EmbedAction, blockId: string) => void | না | কার্ডের কারণের পাশের সমাধান, যা কেবল হোস্ট করতে পারে: connectGoogle সদস্যকে তাঁর Google অ্যাকাউন্ট সংযুক্ত করতে পাঠায়; retry এডিটর নিজেই সামলায়। |
| disabledEmbedProviders | readonly string[] | না | ওয়ার্কস্পেস যে এমবেড টুলগুলি বন্ধ করেছে, ওয়্যার কী অনুসারে (figma, miro, loom, google_drive, github_gist); তাদের লিংক কারণ জানানো কার্ড হিসেবে আঁকা হয়। |
| pasteEmbeds | 'live' | 'offer' | 'card' | না | সমর্থিত লিংক পেস্ট করলে কী হবে: লাইভ দেখানো (ডিফল্ট), প্রস্তাব দেওয়া, বা কার্ড দেখানো। |
| embedLabels | Partial<Record<EmbedLabel, string>> | না | এমবেড ব্লকের কারণ লাইন, অ্যাকশন ও gist লেবেলের অনূদিত শব্দ, EmbedLabel কী অনুসারে; অন্যথায় ইংরেজি ফলব্যাক। |
| resolveIssues | (urls: string[]) => Promise<Record<string, IssueSnapshot>> | না | পেজের ইস্যু লিঙ্কগুলোর স্ন্যাপশট URL অনুসারে ফেরত দেয়। না থাকলে চিপ ও কার্ড ডকুমেন্টে সংরক্ষিত অবস্থা রাখে এবং কিছুই রিফ্রেশ হয় না। |
| onIssueAction | (action: IssueAction, tool: string) => void | না | ইস্যুর কারণের পাশে থাকা সমাধান যা কেবল হোস্ট করতে পারে: টুলটি সংযুক্ত করা, যা হোস্টের ইন্টিগ্রেশন পেজে নিয়ে যায়। |
| issueCards | 'off' | 'on' | না | নিজের লাইনে পেস্ট করা ইস্যু লিঙ্ক কার্ড হবে কি না; না থাকলে off। বাক্যের মধ্যে চিপ সবসময় চিপই থাকে। |
| issueChip | { assignee: boolean; status: boolean } | না | সদস্যের দুটি চিপ সুইচ: স্ট্যাটাস পিল ও দায়িত্বপ্রাপ্ত। না থাকলে দুটোই চালু। |
| issueLabels | Partial<Record<IssueLabel, string>> | না | ইস্যু চিপ, কার্ড ও লিঙ্ক করা ইস্যুর টেবিলের অনূদিত শব্দ, IssueLabel কী অনুসারে; অন্যথায় ইংরেজি ফলব্যাক। |
| jiraSites | readonly string[] | না | ওয়ার্কস্পেসের সংযোগগুলো যে Jira সাইটে পৌঁছায় তাদের URL, যাতে নিজস্ব ডোমেইনের সাইটের লিঙ্ক ইস্যু হিসেবে চেনা যায়। |
| allowedBlockTools | readonly BlockToolType[] | না | এডিটর ব্লক মেনু, তার সার্চ, কনভার্ট মেনু এবং পেস্টে যে ব্লক টাইপগুলি দেয়। অনুপস্থিত থাকলে প্রতিটি নিবন্ধিত ব্লক; তালিকার বাইরে সংরক্ষিত ব্লক তবুও রেন্ডার হয়। |
| allowedInlineTools | readonly InlineToolType[] | না | ইনলাইন টুলবার যে মার্কগুলি দেয়। অনুপস্থিত থাকলে প্রতিটি নিবন্ধিত মার্ক। |
| 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,
});