मुख्य सामग्री पर जाएँ

ब्लॉक संदर्भ

Clepit 12 बिल्ट-इन ब्लॉक प्रकारों के साथ आता है। हर ब्लॉक में एक JSON संरचना, एक रेंडरर और editor.blocks.insert के माध्यम से एक प्रोग्रामेटिक इन्सर्ट पथ होता है।

सीरियलाइज़ होने पर सभी ब्लॉक एक ही एनवलप साझा करते हैं: id, type, data और एक वैकल्पिक tunes रिकॉर्ड।

ब्लॉक की संरचना

हर ब्लॉक एक ही JSON एनवलप में सीरियलाइज़ होता है। id एडिटर द्वारा असाइन किया जाता है और प्रोग्रामेटिक रूप से डेटा बनाते समय इसे छोड़ा जा सकता है।

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

alert

4 वेरिएंट वाला हाइलाइटेड कॉल-आउट बॉक्स।

फ़ील्डप्रकारआवश्यकविवरण
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" }
}