ব্লক রেফারেন্স
Clepit ১২টি বিল্ট-ইন ব্লক টাইপসহ আসে। প্রতিটি ব্লকের একটি JSON আকার, একটি রেন্ডারার এবং editor.blocks.insert-এর মাধ্যমে একটি প্রোগ্রাম্যাটিক ইনসার্ট পাথ রয়েছে।
সিরিয়ালাইজ করার সময় সমস্ত ব্লক একই এনভেলপ ভাগ করে: id, type, data এবং একটি ঐচ্ছিক tunes রেকর্ড।
ব্লকের আকার
প্রতিটি ব্লক একই JSON এনভেলপে সিরিয়ালাইজ হয়। id এডিটর দ্বারা নির্ধারিত হয় এবং প্রোগ্রাম্যাটিকভাবে ডেটা তৈরি করার সময় বাদ দেওয়া যায়।
{
"id": "abc123",
"type": "paragraph",
"data": { "html": "Hello <b>world</b>" },
"tunes": {}
}alert
৪টি ভ্যারিয়েন্টসহ হাইলাইট করা কল-আউট বক্স।
| ফিল্ড | ধরন | প্রয়োজনীয় | বিবরণ |
|---|---|---|---|
| html | string | হ্যাঁ | অ্যালার্ট বার্তার HTML কন্টেন্ট। ইনলাইন টুল মার্কআপ সমর্থিত। |
| variant | 'error' | 'info' | 'success' | 'warning' | হ্যাঁ | অ্যালার্টের ভিজ্যুয়াল স্টাইল। এর মধ্যে একটি: error, info, success, warning। |
{
"type": "alert",
"data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}audio
অডিও ব্লক। Editor.create-এর audioUploader callback-এর মাধ্যমে ব্যবহৃত হয়।
| ফিল্ড | ধরন | প্রয়োজনীয় | বিবরণ |
|---|---|---|---|
| url | string | হ্যাঁ | এম্বেড করার জন্য অডিও ফাইলের URL। |
| caption | string | না | প্লেয়ারের নিচে প্রদর্শিত প্লেইন-টেক্সট ক্যাপশন। |
| alt | string | না | অডিও এলিমেন্টের জন্য অ্যাক্সেসযোগ্য লেবেল। |
| alignment | 'center' | 'left' | 'right' | না | প্লেয়ারের অনুভূমিক সারিবদ্ধতা। এর মধ্যে একটি: center, left, right। |
{
"type": "audio",
"data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}checklist
প্রতিটি আইটেমের চেক করা অবস্থাসহ ইন্টারঅ্যাক্টিভ চেকবক্স তালিকা।
| ফিল্ড | ধরন | প্রয়োজনীয় | বিবরণ |
|---|---|---|---|
| items | ChecklistItem[] | হ্যাঁ | চেকলিস্ট আইটেমের অ্যারে, প্রতিটিতে একটি text এবং checked অবস্থা রয়েছে। |
| items[].text | string | হ্যাঁ | আইটেম লেবেলের HTML কন্টেন্ট। |
| items[].checked | boolean | হ্যাঁ | চেকবক্সটি চেক করা কিনা। |
{
"type": "checklist",
"data": {
"items": [
{ "text": "Install the package", "checked": true },
{ "text": "Mount the editor", "checked": false }
]
}
}code
সিনট্যাক্স-হাইলাইট করা কোড ব্লক। 50টি ভাষা সমর্থিত, যার মধ্যে রয়েছে typescript, python, rust, go, ruby, swift এবং kotlin।
| ফিল্ড | ধরন | প্রয়োজনীয় | বিবরণ |
|---|---|---|---|
| code | string | হ্যাঁ | প্রদর্শনের জন্য কাঁচা কোড স্ট্রিং। |
| language | CodeLanguage | না | সিনট্যাক্স হাইলাইটিং ভাষা। ডিফল্ট typescript। |
| theme | CodeTheme | না | এডিটর কালার থিম। ডিফল্ট github-dark। |
| showCopy | boolean | না | রেন্ডার করা আউটপুটে একটি কপি বাটন দেখান। |
{
"type": "code",
"data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}delimiter
বিভাগগুলোর মধ্যে ভিজ্যুয়াল বিভাজক।
| ফিল্ড | ধরন | প্রয়োজনীয় | বিবরণ |
|---|---|---|---|
| variant | 'line' | 'stars' | হ্যাঁ | ডিভাইডারের ভিজ্যুয়াল স্টাইল। এর মধ্যে একটি: line, stars। |
{
"type": "delimiter",
"data": { "variant": "line" }
}header
শীর্ষ-স্তর এবং বিভাগের শিরোনাম (h1 থেকে h6)। html পেলোডের ভেতরে ইনলাইন টুল কাজ করে।
| ফিল্ড | ধরন | প্রয়োজনীয় | বিবরণ |
|---|---|---|---|
| html | string | হ্যাঁ | শিরোনামের HTML কন্টেন্ট। ইনলাইন টুল মার্কআপ সমর্থিত। |
| level | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | না | শিরোনাম স্তর। এর মধ্যে একটি: h1, h2, h3, h4, h5, h6। ডিফল্ট h1। |
{
"type": "header",
"data": { "html": "Getting started", "level": "h2" }
}image
ক্যাপশন ও alt টেক্সটসহ ইমেজ ব্লক। Editor.create-এর imageUploader callback-এর মাধ্যমে ব্যবহৃত হয়।
| ফিল্ড | ধরন | প্রয়োজনীয় | বিবরণ |
|---|---|---|---|
| url | string | হ্যাঁ | এম্বেড করার জন্য ছবির URL। |
| caption | string | না | ছবির নিচে প্রদর্শিত প্লেইন-টেক্সট ক্যাপশন। |
| alt | string | না | ছবির এলিমেন্টের জন্য Alt টেক্সট। |
| alignment | 'center' | 'left' | 'right' | না | ছবির অনুভূমিক সারিবদ্ধতা। এর মধ্যে একটি: center, left, right। |
{
"type": "image",
"data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}list
অর্ডার্ড বা আনঅর্ডার্ড তালিকা। প্রতিটি আইটেম html।
| ফিল্ড | ধরন | প্রয়োজনীয় | বিবরণ |
|---|---|---|---|
| type | 'ordered' | 'unordered' | হ্যাঁ | তালিকার ধরন। এর মধ্যে একটি: ordered, unordered। |
| items | string[] | হ্যাঁ | HTML স্ট্রিংয়ের অ্যারে, প্রতিটি তালিকা আইটেমের জন্য একটি। |
{
"type": "list",
"data": { "type": "unordered", "items": ["First item", "Second item"] }
}paragraph
রিচ-টেক্সট প্যারাগ্রাফ। bold, italic, code, link, marker এবং tooltip-এর মতো ইনলাইন টুল মার্কআপ গ্রহণ করে।
| ফিল্ড | ধরন | প্রয়োজনীয় | বিবরণ |
|---|---|---|---|
| html | string | হ্যাঁ | প্যারাগ্রাফের HTML কন্টেন্ট। ইনলাইন টুল মার্কআপ সমর্থিত। |
{
"type": "paragraph",
"data": { "html": "This is a <b>paragraph</b> with inline markup." }
}quote
একটি ঐচ্ছিক লেখক অ্যাট্রিবিউশনসহ ব্লককোট।
| ফিল্ড | ধরন | প্রয়োজনীয় | বিবরণ |
|---|---|---|---|
| html | string | হ্যাঁ | উদ্ধৃতি বডির HTML কন্টেন্ট। ইনলাইন টুল মার্কআপ সমর্থিত। |
| author | string | না | উদ্ধৃতির নিচে দেখানো প্লেইন-টেক্সট বা HTML আরোপণ। |
{
"type": "quote",
"data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}table
ডেটা গ্রিড। প্রথম সারিটি হেডার হিসেবে ব্যবহার করা যায়; প্রতিটি সেল html।
| ফিল্ড | ধরন | প্রয়োজনীয় | বিবরণ |
|---|---|---|---|
| data | string[][] | হ্যাঁ | HTML সেল স্ট্রিংয়ের দ্বি-মাত্রিক অ্যারে। প্রথম সারিটি হেডার সারি। |
| caption | string | না | টেবিলের নিচে প্রদর্শিত প্লেইন-টেক্সট বা HTML ক্যাপশন। |
| showDownload | boolean | না | রেন্ডার করা আউটপুটে একটি ডাউনলোড বাটন দেখান। |
{
"type": "table",
"data": {
"data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
"caption": "AlertData fields",
"showDownload": false
}
}video
ভিডিও ব্লক। Editor.create-এর videoUploader callback-এর মাধ্যমে ব্যবহৃত হয়।
| ফিল্ড | ধরন | প্রয়োজনীয় | বিবরণ |
|---|---|---|---|
| url | string | হ্যাঁ | ভিডিও ফাইলের URL বা YouTube/Vimeo এম্বেড লিঙ্ক। |
| caption | string | না | প্লেয়ারের নিচে প্রদর্শিত প্লেইন-টেক্সট ক্যাপশন। |
| alt | string | না | ভিডিও এলিমেন্টের জন্য অ্যাক্সেসযোগ্য লেবেল। |
| alignment | 'center' | 'left' | 'right' | না | প্লেয়ারের অনুভূমিক সারিবদ্ধতা। এর মধ্যে একটি: center, left, right। |
{
"type": "video",
"data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}