Block Reference

Dinodokumento ng pahinang ito ang bawat uri ng block na kasama sa editor. Bawat block ay may JSON shape, renderer, at programmatic insert path sa pamamagitan ng editor.blocks.insert.

Pinagsasaluhan ng lahat ng block ang parehong envelope kapag na-serialise: id, type, data, at isang opsyonal na tunes record.

Hugis ng block

Ang bawat block ay nase-serialize sa parehong JSON envelope. Ang id ay itinalaga ng editor at maaaring alugin kapag nagtatayo ng data nang programmatic.

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

alert

Naka-highlight na call-out box na may 4 na variant.

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

audio

Audio block. Kino-consume sa pamamagitan ng audioUploader callback sa Editor.create.

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

checklist

Interactive na checkbox list na may per-item na checked state.

{
  "type": "checklist",
  "data": {
    "items": [
      { "text": "Install the package", "checked": true },
      { "text": "Mount the editor", "checked": false }
    ]
  }
}

code

Code block na may syntax highlighting. Suportado ang 50 wika, kabilang ang typescript, python, rust, go, ruby, swift at kotlin.

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

collapsible

Isang nakakatiklop na seksyon na may pamagat at nested na child block. Ang mga hindi kilalang uri ng child block ay pinapanatili nang buo, kaya nakakaligtas ang mas bagong dokumento sa mas lumang renderer.

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

collection

Nag-eembed ng live na collection view gamit ang id. Ang identity lang ng collection ang iniimbak ng block; ang server ang may-ari ng hugis at ng data.

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

columns

Isang multi-column na layout na 2 hanggang 4 na column, bawat isa ay may sariling listahan ng child block.

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

date

Isang petsa sa kalendaryo, iniimbak nang walang timezone para magkasundo ang bawat collaborator.

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

delimiter

Visual separator sa pagitan ng mga section.

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

doc_card

Isang rich na link card para sa ibang dokumento. Iniimbak nito ang id ng tinutukoy na pahina at isang display snapshot na nire-refresh ng host kapag pinalitan ang pangalan.

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

embed

Isang naka-embed na link. Ang URL ang iniimbak ng block; ang provider at embed markup ay hinahango sa oras ng pag-render, na may mga unfurl field bilang fallback na card.

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

file

Isang file attachment na may download link, pangalan, at opsyonal na laki at content type.

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

glance

Isang label at value na summary panel: mga hilera ng facts na nababasa sa isang sulyap, na may opsyonal na caption at background variant.

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

header

Mga pang-itaas na antas at section heading (h1 hanggang h6). Gumagana ang inline tools sa loob ng html payload.

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

image

Image block na may caption at alt text. Kino-consume sa pamamagitan ng imageUploader callback sa Editor.create.

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

issues

Isang table ng mga naka-link na issue na hinahango sa oras ng pag-render mula sa mga issue chip at card sa page (issue, pamagat, status, assignee). Wala itong sariling data na iniimbak.

Walang field na iniimbak ang block na ito; ang mga row ay hinahango mula sa mga issue chip at card sa page sa oras ng pag-render.

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

latex

LaTeX math, iniimbak bilang source at tina-typeset sa oras ng pag-render. Ang mas mahusay na renderer sa hinaharap ay nagpapabuti sa bawat dokumentong umiiral na.

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

list

Ordered o unordered na listahan. Ang bawat item ay html.

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

mermaid

Isang Mermaid diagram, iniimbak bilang source at iginuguhit sa oras ng pagpapakita, hindi kailanman bilang raster.

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

openapi

Nagre-render ng interactive na API reference mula sa isang OpenAPI 3.x na dokumento, inline o kinukuha mula sa URL, na may mga server picker at code snippet.

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

paragraph

Rich-text na talata. Tumatanggap ng inline tool markup gaya ng bold, italic, code, link, marker, at tooltip.

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

quote

Blockquote na may opsyonal na author attribution.

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

sketch

Isang freehand na guhit na iniimbak bilang mga stroke, hindi kailanman raster, kaya nananatiling nae-edit at malinis na nagsi-scale.

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

table

Data grid. Maaaring gamitin ang unang row bilang header; ang bawat cell ay html.

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

toc

Isang table of contents na hinahango mula sa mga header ng dokumento sa oras ng pag-render. Wala itong sariling data na iniimbak.

Walang field na iniimbak ang block na ito; ang listahan ay hinahango mula sa mga header ng dokumento sa oras ng pag-render.

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

updates

Isang live na activity feed para sa isang dokumento. Identity ang iniimbak nito, hindi kailanman snapshot, kaya patuloy nitong ipinapakita ang kasalukuyang aktibidad.

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

video

Video block. Kino-consume sa pamamagitan ng videoUploader callback sa Editor.create.

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