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

ব্লক রেফারেন্স

Clepit ১২টি বিল্ট-ইন ব্লক টাইপসহ আসে। প্রতিটি ব্লকের একটি JSON আকার, একটি রেন্ডারার এবং editor.blocks.insert-এর মাধ্যমে একটি প্রোগ্রাম্যাটিক ইনসার্ট পাথ রয়েছে।

সিরিয়ালাইজ করার সময় সমস্ত ব্লক একই এনভেলপ ভাগ করে: id, type, data এবং একটি ঐচ্ছিক tunes রেকর্ড।

ব্লকের আকার

প্রতিটি ব্লক একই JSON এনভেলপে সিরিয়ালাইজ হয়। id এডিটর দ্বারা নির্ধারিত হয় এবং প্রোগ্রাম্যাটিকভাবে ডেটা তৈরি করার সময় বাদ দেওয়া যায়।

JSON
{
  "id": "abc123",
  "type": "paragraph",
  "data": { "html": "Hello <b>world</b>" },
  "tunes": {}
}

alert

৪টি ভ্যারিয়েন্টসহ হাইলাইট করা কল-আউট বক্স।

ফিল্ডধরনপ্রয়োজনীয়বিবরণ
htmlstringহ্যাঁঅ্যালার্ট বার্তার HTML কন্টেন্ট। ইনলাইন টুল মার্কআপ সমর্থিত।
variant'error' | 'info' | 'success' | 'warning'হ্যাঁঅ্যালার্টের ভিজ্যুয়াল স্টাইল। এর মধ্যে একটি: error, info, success, warning।
JSON
{
  "type": "alert",
  "data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}

audio

অডিও ব্লক। Editor.create-এর audioUploader callback-এর মাধ্যমে ব্যবহৃত হয়।

ফিল্ডধরনপ্রয়োজনীয়বিবরণ
urlstringহ্যাঁএম্বেড করার জন্য অডিও ফাইলের URL।
captionstringনাপ্লেয়ারের নিচে প্রদর্শিত প্লেইন-টেক্সট ক্যাপশন।
altstringনাঅডিও এলিমেন্টের জন্য অ্যাক্সেসযোগ্য লেবেল।
alignment'center' | 'left' | 'right'নাপ্লেয়ারের অনুভূমিক সারিবদ্ধতা। এর মধ্যে একটি: center, left, right।
JSON
{
  "type": "audio",
  "data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}

checklist

প্রতিটি আইটেমের চেক করা অবস্থাসহ ইন্টারঅ্যাক্টিভ চেকবক্স তালিকা।

ফিল্ডধরনপ্রয়োজনীয়বিবরণ
itemsChecklistItem[]হ্যাঁচেকলিস্ট আইটেমের অ্যারে, প্রতিটিতে একটি text এবং checked অবস্থা রয়েছে।
items[].textstringহ্যাঁআইটেম লেবেলের HTML কন্টেন্ট।
items[].checkedbooleanহ্যাঁচেকবক্সটি চেক করা কিনা।
JSON
{
  "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।

ফিল্ডধরনপ্রয়োজনীয়বিবরণ
codestringহ্যাঁপ্রদর্শনের জন্য কাঁচা কোড স্ট্রিং।
languageCodeLanguageনাসিনট্যাক্স হাইলাইটিং ভাষা। ডিফল্ট typescript।
themeCodeThemeনাএডিটর কালার থিম। ডিফল্ট github-dark।
showCopybooleanনারেন্ডার করা আউটপুটে একটি কপি বাটন দেখান।
JSON
{
  "type": "code",
  "data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}

delimiter

বিভাগগুলোর মধ্যে ভিজ্যুয়াল বিভাজক।

ফিল্ডধরনপ্রয়োজনীয়বিবরণ
variant'line' | 'stars'হ্যাঁডিভাইডারের ভিজ্যুয়াল স্টাইল। এর মধ্যে একটি: line, stars।
JSON
{
  "type": "delimiter",
  "data": { "variant": "line" }
}

শীর্ষ-স্তর এবং বিভাগের শিরোনাম (h1 থেকে h6)। html পেলোডের ভেতরে ইনলাইন টুল কাজ করে।

ফিল্ডধরনপ্রয়োজনীয়বিবরণ
htmlstringহ্যাঁশিরোনামের HTML কন্টেন্ট। ইনলাইন টুল মার্কআপ সমর্থিত।
level'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'নাশিরোনাম স্তর। এর মধ্যে একটি: h1, h2, h3, h4, h5, h6। ডিফল্ট h1।
JSON
{
  "type": "header",
  "data": { "html": "Getting started", "level": "h2" }
}

image

ক্যাপশন ও alt টেক্সটসহ ইমেজ ব্লক। Editor.create-এর imageUploader callback-এর মাধ্যমে ব্যবহৃত হয়।

ফিল্ডধরনপ্রয়োজনীয়বিবরণ
urlstringহ্যাঁএম্বেড করার জন্য ছবির URL।
captionstringনাছবির নিচে প্রদর্শিত প্লেইন-টেক্সট ক্যাপশন।
altstringনাছবির এলিমেন্টের জন্য Alt টেক্সট।
alignment'center' | 'left' | 'right'নাছবির অনুভূমিক সারিবদ্ধতা। এর মধ্যে একটি: center, left, right।
JSON
{
  "type": "image",
  "data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}

list

অর্ডার্ড বা আনঅর্ডার্ড তালিকা। প্রতিটি আইটেম html।

ফিল্ডধরনপ্রয়োজনীয়বিবরণ
type'ordered' | 'unordered'হ্যাঁতালিকার ধরন। এর মধ্যে একটি: ordered, unordered।
itemsstring[]হ্যাঁHTML স্ট্রিংয়ের অ্যারে, প্রতিটি তালিকা আইটেমের জন্য একটি।
JSON
{
  "type": "list",
  "data": { "type": "unordered", "items": ["First item", "Second item"] }
}

paragraph

রিচ-টেক্সট প্যারাগ্রাফ। bold, italic, code, link, marker এবং tooltip-এর মতো ইনলাইন টুল মার্কআপ গ্রহণ করে।

ফিল্ডধরনপ্রয়োজনীয়বিবরণ
htmlstringহ্যাঁপ্যারাগ্রাফের HTML কন্টেন্ট। ইনলাইন টুল মার্কআপ সমর্থিত।
JSON
{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

একটি ঐচ্ছিক লেখক অ্যাট্রিবিউশনসহ ব্লককোট।

ফিল্ডধরনপ্রয়োজনীয়বিবরণ
htmlstringহ্যাঁউদ্ধৃতি বডির HTML কন্টেন্ট। ইনলাইন টুল মার্কআপ সমর্থিত।
authorstringনাউদ্ধৃতির নিচে দেখানো প্লেইন-টেক্সট বা HTML আরোপণ।
JSON
{
  "type": "quote",
  "data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}

table

ডেটা গ্রিড। প্রথম সারিটি হেডার হিসেবে ব্যবহার করা যায়; প্রতিটি সেল html।

ফিল্ডধরনপ্রয়োজনীয়বিবরণ
datastring[][]হ্যাঁHTML সেল স্ট্রিংয়ের দ্বি-মাত্রিক অ্যারে। প্রথম সারিটি হেডার সারি।
captionstringনাটেবিলের নিচে প্রদর্শিত প্লেইন-টেক্সট বা HTML ক্যাপশন।
showDownloadbooleanনারেন্ডার করা আউটপুটে একটি ডাউনলোড বাটন দেখান।
JSON
{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

video

ভিডিও ব্লক। Editor.create-এর videoUploader callback-এর মাধ্যমে ব্যবহৃত হয়।

ফিল্ডধরনপ্রয়োজনীয়বিবরণ
urlstringহ্যাঁভিডিও ফাইলের URL বা YouTube/Vimeo এম্বেড লিঙ্ক।
captionstringনাপ্লেয়ারের নিচে প্রদর্শিত প্লেইন-টেক্সট ক্যাপশন।
altstringনাভিডিও এলিমেন্টের জন্য অ্যাক্সেসযোগ্য লেবেল।
alignment'center' | 'left' | 'right'নাপ্লেয়ারের অনুভূমিক সারিবদ্ধতা। এর মধ্যে একটি: center, left, right।
JSON
{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}