Lewati ke konten utama

Panduan

Penyematan

Referensi Blok

Clepit menyediakan 12 tipe blok bawaan. Setiap blok memiliki bentuk JSON, renderer, dan jalur insert programatik melalui editor.blocks.insert.

Semua blok berbagi amplop yang sama saat diserialisasi: id, type, data, dan catatan tunes opsional.

Bentuk blok

Setiap blok diserialisasi ke amplop JSON yang sama. id ditetapkan oleh editor dan dapat dihilangkan saat membangun data secara programatik.

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

alert

Kotak sorotan dengan 4 varian.

BidangTipeDiperlukanDeskripsi
htmlstringYaKonten HTML dari pesan alert. Markup alat inline didukung.
variant'error' | 'info' | 'success' | 'warning'YaGaya visual dari alert. Salah satu dari: error, info, success, warning.
JSON
{
  "type": "alert",
  "data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}

audio

Blok audio. Dikonsumsi melalui callback audioUploader pada Editor.create.

BidangTipeDiperlukanDeskripsi
urlstringYaURL file audio yang akan disematkan.
captionstringTidakKeterangan teks biasa yang ditampilkan di bawah pemutar.
altstringTidakLabel yang dapat diakses untuk elemen audio.
alignment'center' | 'left' | 'right'TidakPerataan horizontal dari pemutar. Salah satu dari: center, left, right.
JSON
{
  "type": "audio",
  "data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}

checklist

Daftar kotak centang interaktif dengan status tercentang per item.

BidangTipeDiperlukanDeskripsi
itemsChecklistItem[]YaArray item checklist, masing-masing dengan teks dan status tercentang.
items[].textstringYaKonten HTML dari label item.
items[].checkedbooleanYaApakah kotak centang dicentang.
JSON
{
  "type": "checklist",
  "data": {
    "items": [
      { "text": "Install the package", "checked": true },
      { "text": "Mount the editor", "checked": false }
    ]
  }
}

code

Blok kode dengan penyorotan sintaks. Mendukung 50 bahasa, termasuk typescript, python, rust, go, ruby, swift, dan kotlin.

BidangTipeDiperlukanDeskripsi
codestringYaString kode mentah yang akan ditampilkan.
languageCodeLanguageTidakBahasa penyorotan sintaks. Default ke typescript.
themeCodeThemeTidakTema warna editor. Default ke github-dark.
showCopybooleanTidakTampilkan tombol salin di output yang dirender.
JSON
{
  "type": "code",
  "data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}

delimiter

Pemisah visual antar bagian.

BidangTipeDiperlukanDeskripsi
variant'line' | 'stars'YaGaya visual dari pemisah. Salah satu dari: line, stars.
JSON
{
  "type": "delimiter",
  "data": { "variant": "line" }
}

Judul tingkat atas dan judul bagian (h1 hingga h6). Alat inline berfungsi di dalam muatan html.

BidangTipeDiperlukanDeskripsi
htmlstringYaKonten HTML dari heading. Markup alat inline didukung.
level'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'TidakTingkat heading. Salah satu dari: h1, h2, h3, h4, h5, h6. Default ke h1.
JSON
{
  "type": "header",
  "data": { "html": "Getting started", "level": "h2" }
}

image

Blok gambar dengan keterangan dan teks alt. Dikonsumsi melalui callback imageUploader pada Editor.create.

BidangTipeDiperlukanDeskripsi
urlstringYaURL gambar yang akan disematkan.
captionstringTidakKeterangan teks biasa yang ditampilkan di bawah gambar.
altstringTidakTeks alt untuk elemen gambar.
alignment'center' | 'left' | 'right'TidakPerataan horizontal dari gambar. Salah satu dari: center, left, right.
JSON
{
  "type": "image",
  "data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}

list

Daftar berurutan atau tidak berurutan. Setiap item adalah html.

BidangTipeDiperlukanDeskripsi
type'ordered' | 'unordered'YaTipe daftar. Salah satu dari: ordered, unordered.
itemsstring[]YaArray string HTML, satu per item daftar.
JSON
{
  "type": "list",
  "data": { "type": "unordered", "items": ["First item", "Second item"] }
}

paragraph

Paragraf teks kaya. Menerima markup alat inline seperti bold, italic, code, link, marker, dan tooltip.

BidangTipeDiperlukanDeskripsi
htmlstringYaKonten HTML dari paragraf. Markup alat inline didukung.
JSON
{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

Blockquote dengan atribusi penulis opsional.

BidangTipeDiperlukanDeskripsi
htmlstringYaKonten HTML dari isi kutipan. Markup alat inline didukung.
authorstringTidakAtribusi teks biasa atau HTML yang ditampilkan di bawah kutipan.
JSON
{
  "type": "quote",
  "data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}

table

Kisi data. Baris pertama dapat digunakan sebagai header; setiap sel adalah html.

BidangTipeDiperlukanDeskripsi
datastring[][]YaArray dua dimensi dari string sel HTML. Baris pertama adalah baris header.
captionstringTidakKeterangan teks biasa atau HTML yang ditampilkan di bawah tabel.
showDownloadbooleanTidakTampilkan tombol unduh di output yang dirender.
JSON
{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

video

Blok video. Dikonsumsi melalui callback videoUploader pada Editor.create.

BidangTipeDiperlukanDeskripsi
urlstringYaURL file video atau tautan embed YouTube/Vimeo.
captionstringTidakKeterangan teks biasa yang ditampilkan di bawah pemutar.
altstringTidakLabel yang dapat diakses untuk elemen video.
alignment'center' | 'left' | 'right'TidakPerataan horizontal dari pemutar. Salah satu dari: center, left, right.
JSON
{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}