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

প্যাকেজ

কনফিগারেশন

EditorConfig এবং RendererConfig প্রতিটি কাস্টমাইজেশনের প্রবেশ পথ। Editor.create() অথবা Renderer.render()-এ যথাক্রমে পাস করুন। শুধুমাত্র containerId (এবং renderer-এর জন্য data) আবশ্যক, অন্য সব অপশনে নিরাপদ ডিফল্ট আছে।

EditorConfig

EditorConfig একমাত্র আর্গুমেন্ট হিসেবে Editor.create()-এ পাস করুন। আবশ্যক containerId একটি বিদ্যমান DOM এলিমেন্ট id-এর সাথে মিলতে হবে।

বিকল্পধরনআবশ্যকবিবরণ
containerIdstringহ্যাঁDOM এলিমেন্টের ID যা এডিটরকে হোস্ট করবে। Editor.create() কল করার আগে অবশ্যই DOM-এ থাকতে হবে।
maxHeightnumberনাপিক্সেলে এডিটরের সর্বোচ্চ উচ্চতা। উচ্চতার কোনো সীমা না রাখতে 0 (ডিফল্ট) সেট করুন।
minHeightnumberনাপিক্সেলে এডিটরের সর্বনিম্ন উচ্চতা। ডিফল্ট 300।
onChange(data: EditorData) => voidনাডকুমেন্ট পরিবর্তিত হলে ফায়ার হওয়া কলব্যাক। সম্পূর্ণ EditorData স্ন্যাপশট গ্রহণ করে।
onReady() => voidনাএডিটর সম্পূর্ণভাবে ইনিশিয়ালাইজ হয়ে API কল গ্রহণ করতে প্রস্তুত হলে ফায়ার হওয়া কলব্যাক।
placeholderstringনাএডিটর খালি থাকলে দেখানো প্লেসহোল্ডার টেক্সট। ডিফল্ট "Start writing..."।
initialDataEditorDataনাএডিটর মাউন্ট হওয়ার সময় লোড করার জন্য আগে থেকে পূর্ণ EditorData।
initialView'edit' | 'preview' | 'json'নাশুরুর ভিউ মোড। এর মধ্যে একটি: edit, preview, json। ডিফল্ট "edit"।
allowJsonViewEditingbooleanনাtrue হলে, JSON ভিউ এডিটযোগ্য হয় এবং পরিবর্তনগুলো ডকুমেন্টে প্রতিফলিত হয়। ডিফল্ট false।
hasViewSwitcherbooleanনাfalse হলে, অ্যাকশন বার থেকে এডিট, প্রিভিউ ও JSON বোতাম বাদ যায়। ডিফল্ট true।
hasDocumentActionsbooleanনাfalse হলে, অ্যাকশন বার থেকে কপি, ডাউনলোড ও মুছে ফেলার বোতাম বাদ যায়। hasViewSwitcher-ও false হলে অ্যাকশন বার দেখানো হয় না। ডিফল্ট true।
onClearRequest() => Promise<boolean>নামুছে ফেলার বোতাম চাপলে ডাকা হয়। true ফেরালে তবেই পাতা মোছে; প্রত্যাখ্যাত হলে পাতা যেমন ছিল তেমনই থাকে। না দিলে সঙ্গে সঙ্গে মুছে যায়।
marginsBlockMarginsনাপ্রতিটি ব্লকে প্রয়োগ করা বৈশ্বিক উপরে এবং নিচে মার্জিন (পিক্সেলে)। ব্লক-স্তরের কনফিগ অগ্রাধিকার পায়।
stylesEditorStylesনাEditorStyles অবজেক্ট এডিটর ক্রোম (টুলবার, ডায়ালগ, কন্ট্রোল) এর সূক্ষ্ম CSS কাস্টমাইজেশনের জন্য।
classNamesEditorClassNamesনাএডিটর ক্রোম এলিমেন্টগুলোতে CSS ক্লাস নাম সংযুক্ত করতে EditorClassNames অবজেক্ট।
imageUploaderUploadFunctionনাঅ্যাসিঙ্ক্রোনাস ফাংশন যা একটি ইমেজ ফাইল আপলোড করে এবং একটি পাবলিক URL স্ট্রিং ফেরত দেয়।
audioUploaderUploadFunctionনাঅ্যাসিঙ্ক্রোনাস ফাংশন যা একটি অডিও ফাইল আপলোড করে এবং একটি পাবলিক URL স্ট্রিং ফেরত দেয়।
videoUploaderUploadFunctionনাঅ্যাসিঙ্ক্রোনাস ফাংশন যা একটি ভিডিও ফাইল আপলোড করে এবং একটি পাবলিক URL স্ট্রিং ফেরত দেয়।
fileUploaderUploadFunctionনাফাইল ব্লকের সংযুক্তি আপনার স্টোরেজে আপলোড করা আপলোড ফাংশন।
localestringনাএডিটর যে একক লোকাল সম্পাদনা করে। বহুভাষিক ব্লক এই লোকালে ফ্ল্যাটেন হয়।
defaultLocalestringনাঅনুরোধ করা লোকালের কন্টেন্ট ব্লকে না থাকলে ব্যবহৃত ফলব্যাক লোকাল।
onLocaleFallback(info: { blockId: string; locale: string }) => voidনাকোনো ব্লক ফলব্যাক লোকালে পড়লে কল হয়, যাতে হোস্ট একটি সূচক দেখাতে পারে।
onInlineRewrite(selection: string, action: InlineRewriteAction) => Promise<string | null>নানির্বাচিত টেক্সটকে AI দিয়ে পুনর্লিখন করা ফাংশন; সেট থাকলে টুলবারে রিরাইট বোতাম দেখায়।
inlineRewriteLabelsPartial<Record<InlineRewriteAction, string>>নারিরাইট মেনুর অ্যাকশন লেবেলগুলো প্রতিস্থাপন করে, অনুবাদের জন্য।
inlineRewriteTooltipstringনাইনলাইন টুলবারের রিরাইট ওয়ান্ডের টুলটিপ প্রতিস্থাপন করে, অনুবাদের জন্য।
blockToolLabelsPartial<Record<BlockToolType, string>>নাটুলবক্স ও স্ল্যাশ মেনুতে ব্লক টুলের লেবেল প্রতিস্থাপন করে, অনুবাদের জন্য।
blockToolbarLabelsPartial<Record<BlockToolbarLabel, string>>নাব্লক টুলবারের টেক্সট (যোগ, সরানো, মুছে ফেলা ইত্যাদি) এবং খালি ব্লক ঘরে দেখানো ইঙ্গিত প্রতিস্থাপন করে, অনুবাদের জন্য।
controlLabelsPartial<Record<ControlLabel, string>>নাঅ্যাকশন বারের বোতামগুলোর নাম (এডিট, প্রিভিউ, JSON, কপি, ডাউনলোড, মুছে ফেলা) প্রতিস্থাপন করে, যা তাদের অ্যাক্সেসযোগ্য নাম ও টুলটিপ হিসেবে ব্যবহৃত হয়, অনুবাদের জন্য।
dialogLabelsPartial<Record<DialogLabel, string>>নালিংক, টুলটিপ ও অবস্থার ডায়ালগে দেখানো শব্দ, নাম অনুযায়ী: শিরোনাম, ঘরের লেবেল, প্লেসহোল্ডার, অবস্থার ধরন, বাতিল ও প্রয়োগ। না দিলে ইংরেজিতে দেখায়।
resolveLink(url: string) => Promise<Partial<EmbedData>>নাপেস্ট করা এমবেডের স্ন্যাপশট আপনার সার্ভার থেকে ভরায়: শিরোনাম, Drive ফাইল, gist ফাইল বা লাইভ ভিউ সম্ভব না হওয়ার কারণ। ব্যর্থ লুকআপ কার্ডটিকে "টুল উত্তর দেয়নি" হিসেবে আঁকে, পাশে "আবার চেষ্টা করুন" সহ।
onEmbedAction(action: EmbedAction, blockId: string) => voidনাকার্ডের কারণের পাশের সমাধান, যা কেবল হোস্ট করতে পারে: connectGoogle সদস্যকে তাঁর Google অ্যাকাউন্ট সংযুক্ত করতে পাঠায়; retry এডিটর নিজেই সামলায়।
disabledEmbedProvidersreadonly string[]নাওয়ার্কস্পেস যে এমবেড টুলগুলি বন্ধ করেছে, ওয়্যার কী অনুসারে (figma, miro, loom, google_drive, github_gist); তাদের লিংক কারণ জানানো কার্ড হিসেবে আঁকা হয়।
pasteEmbeds'live' | 'offer' | 'card'নাসমর্থিত লিংক পেস্ট করলে কী হবে: লাইভ দেখানো (ডিফল্ট), প্রস্তাব দেওয়া, বা কার্ড দেখানো।
embedLabelsPartial<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 }নাসদস্যের দুটি চিপ সুইচ: স্ট্যাটাস পিল ও দায়িত্বপ্রাপ্ত। না থাকলে দুটোই চালু।
issueLabelsPartial<Record<IssueLabel, string>>নাইস্যু চিপ, কার্ড ও লিঙ্ক করা ইস্যুর টেবিলের অনূদিত শব্দ, IssueLabel কী অনুসারে; অন্যথায় ইংরেজি ফলব্যাক।
jiraSitesreadonly string[]নাওয়ার্কস্পেসের সংযোগগুলো যে Jira সাইটে পৌঁছায় তাদের URL, যাতে নিজস্ব ডোমেইনের সাইটের লিঙ্ক ইস্যু হিসেবে চেনা যায়।
allowedBlockToolsreadonly BlockToolType[]নাএডিটর ব্লক মেনু, তার সার্চ, কনভার্ট মেনু এবং পেস্টে যে ব্লক টাইপগুলি দেয়। অনুপস্থিত থাকলে প্রতিটি নিবন্ধিত ব্লক; তালিকার বাইরে সংরক্ষিত ব্লক তবুও রেন্ডার হয়।
allowedInlineToolsreadonly 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 উভয়ই আবশ্যক।

বিকল্পধরনআবশ্যকবিবরণ
containerIdstringহ্যাঁDOM এলিমেন্টের ID যেখানে রেন্ডার করা আউটপুট ইনজেক্ট করা হবে।
dataEditorDataহ্যাঁরেন্ডার করার জন্য EditorData ডকুমেন্ট। আবশ্যক।
marginsBlockMarginsনাপ্রতিটি রেন্ডার করা ব্লকে প্রয়োগ করা বৈশ্বিক উপরে এবং নিচে মার্জিন (পিক্সেলে)।
stylesBlockStylesনারেন্ডার করা আউটপুটের প্রতি-ব্লক-টাইপ CSS কাস্টমাইজেশনের জন্য BlockStyles ম্যাপ।
classNamesBlockClassNamesনারেন্ডার করা আউটপুটে প্রতি-ব্লক-টাইপ CSS ক্লাস নামের জন্য BlockClassNames ম্যাপ।
editorClassNamesEditorClassNamesনাEditorClassNames যা ইন্টারেক্টিভ কম্পোনেন্ট রেন্ডার করা ব্লকগুলোতে পাস করা হয় (যেমন প্যারাগ্রাফের জন্য tooltip ক্লাস নাম)।
configsPartial<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,
});