مرجع الكتل
يتضمّن Clepit 12 نوعًا مدمجًا من الكتل. لكل كتلة شكل JSON ومُصيّر (renderer) ومسار إدراج برمجي عبر 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
كتلة صوت. تُستهلك عبر دالة الاستدعاء audioUploader في Editor.create.
| الحقل | النوع | مطلوب | الوصف |
|---|---|---|---|
| url | string | نعم | رابط ملف الصوت المراد تضمينه. |
| 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[] | نعم | مصفوفة من عناصر القائمة المرجعية، كل منها يحتوي على نص وحالة تحديد. |
| 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. تُستهلك عبر دالة الاستدعاء imageUploader في Editor.create.
| الحقل | النوع | مطلوب | الوصف |
|---|---|---|---|
| url | string | نعم | رابط الصورة المراد تضمينها. |
| caption | string | لا | تعليق نصي عادي يظهر أسفل الصورة. |
| alt | string | لا | النص البديل لعنصر الصورة. |
| 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
كتلة فيديو. تُستهلك عبر دالة الاستدعاء videoUploader في Editor.create.
| الحقل | النوع | مطلوب | الوصف |
|---|---|---|---|
| url | string | نعم | رابط ملف الفيديو أو رابط تضمين 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" }
}