ब्लॉक संदर्भ
Clepit 12 बिल्ट-इन ब्लॉक प्रकारों के साथ आता है। हर ब्लॉक में एक JSON संरचना, एक रेंडरर और editor.blocks.insert के माध्यम से एक प्रोग्रामेटिक इन्सर्ट पथ होता है।
सीरियलाइज़ होने पर सभी ब्लॉक एक ही एनवलप साझा करते हैं: id, type, data और एक वैकल्पिक tunes रिकॉर्ड।
ब्लॉक की संरचना
हर ब्लॉक एक ही JSON एनवलप में सीरियलाइज़ होता है। id एडिटर द्वारा असाइन किया जाता है और प्रोग्रामेटिक रूप से डेटा बनाते समय इसे छोड़ा जा सकता है।
{
"id": "abc123",
"type": "paragraph",
"data": { "html": "Hello <b>world</b>" },
"tunes": {}
}alert
4 वेरिएंट वाला हाइलाइटेड कॉल-आउट बॉक्स।
| फ़ील्ड | प्रकार | आवश्यक | विवरण |
|---|---|---|---|
| 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" }
}