Referensi Blok

Halaman ini mendokumentasikan setiap tipe blok yang disertakan editor. Setiap blok punya bentuk JSON, perender, dan jalur penyisipan terprogram lewat 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.

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

alert

Kotak sorotan dengan 4 varian.

{
  "type": "alert",
  "data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}

audio

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

{
  "type": "audio",
  "data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}

checklist

Daftar kotak centang interaktif dengan status tercentang per item.

{
  "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.

{
  "type": "code",
  "data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}

collapsible

Bagian yang dapat dilipat dengan judul dan blok anak bersarang. Tipe blok anak yang tidak dikenal disimpan apa adanya, sehingga dokumen yang lebih baru tetap aman di renderer yang lebih lama.

{
  "type": "collapsible",
  "data": {
    "html": "Details",
    "open": true,
    "children": [{ "type": "paragraph", "data": { "html": "Hidden until opened." } }]
  }
}

collection

Menyematkan tampilan koleksi langsung berdasarkan id. Blok hanya menyimpan identitas koleksi; bentuk dan datanya milik server.

{
  "type": "collection",
  "data": { "collectionId": "c-42" }
}

columns

Tata letak multikolom berisi 2 sampai 4 kolom, masing-masing memegang daftar blok anaknya sendiri.

{
  "type": "columns",
  "data": {
    "columns": [
      [{ "type": "paragraph", "data": { "html": "Left" } }],
      [{ "type": "paragraph", "data": { "html": "Right" } }]
    ]
  }
}

date

Tanggal kalender, disimpan tanpa zona waktu sehingga semua kolaborator sepakat.

{
  "type": "date",
  "data": { "date": "2026-08-31" }
}

delimiter

Pemisah visual antar bagian.

{
  "type": "delimiter",
  "data": { "variant": "line" }
}

doc_card

Kartu tautan kaya untuk dokumen lain. Ia menyimpan id halaman yang dirujuk plus cuplikan tampilan yang disegarkan host saat nama diubah.

{
  "type": "doc_card",
  "data": { "pageId": "p-7", "title": "Release notes", "icon": "📄" }
}

embed

Tautan yang disematkan. Blok menyimpan URL; penyedia dan markup sematan diturunkan saat render, dengan bidang unfurl sebagai kartu cadangan.

{
  "type": "embed",
  "data": { "url": "https://www.youtube.com/watch?v=abc123" }
}

file

Lampiran berkas dengan tautan unduh, nama, serta ukuran dan tipe konten opsional.

{
  "type": "file",
  "data": { "url": "/files/notes.pdf", "name": "notes.pdf", "size": 2048, "contentType": "application/pdf" }
}

glance

Panel ringkasan label dan nilai: baris fakta yang terbaca sekilas, dengan keterangan dan varian latar opsional.

{
  "type": "glance",
  "data": {
    "caption": "Facts",
    "rows": [{ "label": "Version", "html": "<b>1.0</b>" }],
    "variant": "plain"
  }
}

header

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

{
  "type": "header",
  "data": { "html": "Getting started", "level": "h2" }
}

image

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

{
  "type": "image",
  "data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}

issues

Tabel isu tertaut yang diturunkan saat render dari chip dan kartu isu di halaman (isu, judul, status, penerima tugas). Ia tidak menyimpan data sendiri.

Blok ini tidak menyimpan bidang apa pun; barisnya diturunkan dari chip dan kartu isu di halaman saat render.

{
  "type": "issues",
  "data": {}
}

latex

Matematika LaTeX, disimpan sebagai sumber dan ditata saat render. Renderer yang lebih baik nanti memperbaiki setiap dokumen yang sudah ada.

{
  "type": "latex",
  "data": { "source": "\\frac{a}{b}" }
}

list

Daftar berurutan atau tidak berurutan. Setiap item adalah html.

{
  "type": "list",
  "data": { "type": "unordered", "items": ["First item", "Second item"] }
}

mermaid

Diagram Mermaid, disimpan sebagai sumber dan digambar saat ditampilkan, tidak pernah sebagai raster.

{
  "type": "mermaid",
  "data": { "source": "flowchart TD\n  A --> B" }
}

openapi

Merender referensi API interaktif dari dokumen OpenAPI 3.x, sebaris atau diambil dari URL, dengan pemilih server dan cuplikan kode.

{
  "type": "openapi",
  "data": { "url": "/api/openapi.json", "defaultServer": "https://api.example.com" }
}

paragraph

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

{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

Blockquote dengan atribusi penulis opsional.

{
  "type": "quote",
  "data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}

sketch

Gambar bebas yang disimpan sebagai goresan, tidak pernah raster, sehingga tetap dapat disunting dan diskalakan dengan bersih.

{
  "type": "sketch",
  "data": { "strokes": [{ "points": [0, 0, 10, 10], "color": "#ff0000", "width": 3 }] }
}

table

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

{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

toc

Daftar isi yang diturunkan dari header dokumen saat render. Ia tidak menyimpan data sendiri.

Blok ini tidak menyimpan bidang apa pun; daftarnya diturunkan dari header dokumen saat render.

{
  "type": "toc",
  "data": {}
}

updates

Umpan aktivitas langsung untuk sebuah dokumen. Ia menyimpan identitas, tidak pernah cuplikan, sehingga terus menampilkan aktivitas terkini.

{
  "type": "updates",
  "data": { "pageId": "p-7" }
}

video

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

{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}