تخطَّ إلى المحتوى الرئيسي

مرجع الكتل

يتضمّن Clepit 12 نوعًا مدمجًا من الكتل. لكل كتلة شكل JSON ومُصيّر (renderer) ومسار إدراج برمجي عبر 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

كتلة صوت. تُستهلك عبر دالة الاستدعاء audioUploader في Editor.create.

الحقلالنوعمطلوبالوصف
urlstringنعمرابط ملف الصوت المراد تضمينه.
captionstringلاتعليق نصي عادي يظهر أسفل مشغّل الصوت.
altstringلاتسمية يمكن الوصول إليها لعنصر الصوت.
alignment'center' | 'left' | 'right'لاالمحاذاة الأفقية للمشغّل. أحد القيم: center وleft وright.
JSON
{
  "type": "audio",
  "data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}

checklist

قائمة مربعات اختيار تفاعلية مع حالة محدّدة لكل عنصر.

الحقلالنوعمطلوبالوصف
itemsChecklistItem[]نعممصفوفة من عناصر القائمة المرجعية، كل منها يحتوي على نص وحالة تحديد.
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. تُستهلك عبر دالة الاستدعاء imageUploader في Editor.create.

الحقلالنوعمطلوبالوصف
urlstringنعمرابط الصورة المراد تضمينها.
captionstringلاتعليق نصي عادي يظهر أسفل الصورة.
altstringلاالنص البديل لعنصر الصورة.
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

كتلة فيديو. تُستهلك عبر دالة الاستدعاء videoUploader في Editor.create.

الحقلالنوعمطلوبالوصف
urlstringنعمرابط ملف الفيديو أو رابط تضمين YouTube/Vimeo.
captionstringلاتعليق نصي عادي يظهر أسفل المشغّل.
altstringلاتسمية يمكن الوصول إليها لعنصر الفيديو.
alignment'center' | 'left' | 'right'لاالمحاذاة الأفقية للمشغّل. أحد القيم: center وleft وright.
JSON
{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}