Marejeo ya Vizuizi

Ukurasa huu unaandika kila aina ya kizuizi kinachokuja na kihariri. Kila kizuizi kina umbo la JSON, kionyeshi, na njia ya kuingiza kwa programu kupitia editor.blocks.insert.

Vizuizi vyote hushiriki bahasha ile ile vinaposerialishwa: id, type, data, na rekodi ya hiari ya tunes.

Umbo la kizuizi

Kila kizuizi hiserialishwa kwenye bahasha ile ile ya JSON. id hutolewa na mhariri na inaweza kuachwa wakati wa kujenga data kwa programu.

JSON

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

alert

Kisanduku cha tahadhari kilichoangaziwa chenye aina 4.

Sehemu	Aina	Inahitajika	Maelezo
html	string	Ndiyo	Maudhui ya HTML ya ujumbe wa tahadhari. Markup ya zana za ndani ya mstari inasaidiwa.
variant	'error' \| 'info' \| 'success' \| 'warning'	Ndiyo	Mtindo wa kuona wa tahadhari. Moja ya: error, info, success, warning.

JSON

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

audio

Kizuizi cha sauti. Hutumiwa kupitia callback ya audioUploader kwenye Editor.create.

Sehemu	Aina	Inahitajika	Maelezo
url	string	Ndiyo	URL ya faili ya sauti ya kupachika.
caption	string	Hapana	Maelezo ya maandishi wazi yanayoonyeshwa chini ya kichezaji.
alt	string	Hapana	Lebo inayoweza kufikiwa kwa kipengele cha sauti.
alignment	'center' \| 'left' \| 'right'	Hapana	Usawazishaji wa mlalo wa kichezaji. Moja ya: center, left, right.

JSON

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

checklist

Orodha ya visanduku vya kuteua inayoshirikiana yenye hali ya kuteuliwa kwa kila kipengele.

Sehemu	Aina	Inahitajika	Maelezo
items	ChecklistItem[]	Ndiyo	Safu ya vipengele vya orodha ya ukaguzi, kila kimoja kina maandishi na hali ya kuteuliwa.
items[].text	string	Ndiyo	Maudhui ya HTML ya lebo ya kipengele.
items[].checked	boolean	Ndiyo	Iwapo kisanduku cha kuteua kimechaguliwa.

JSON

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

code

Kizuizi cha msimbo chenye uangaziaji wa sintaksia. Lugha 50 zinaungwa mkono, zikiwemo typescript, python, rust, go, ruby, swift na kotlin.

Sehemu	Aina	Inahitajika	Maelezo
code	string	Ndiyo	Mfuatano wa nambari za msimbo unaotaka kuonyeshwa.
language	CodeLanguage	Hapana	Lugha ya kuonyesha sintaksia. Chaguo-msingi ni typescript.
theme	CodeTheme	Hapana	Mandhari ya rangi ya mhariri. Chaguo-msingi ni github-dark.
showCopy	boolean	Hapana	Onyesha kitufe cha kunakili katika matokeo yaliyoonyeshwa.
syncKey	string	Hapana	Vizuizi vinavyoshiriki ufunguo hubadilisha lugha pamoja.
variants	CodeVariant[]	Hapana	Ikiwa haiko tupu, huonyesha msururu wa tabo za aina na ndiyo chanzo chenye mamlaka.

JSON

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

collapsible

Sehemu inayokunjika yenye kichwa na vizuizi vya watoto vilivyofungamana. Aina zisizojulikana za vizuizi vya watoto huhifadhiwa vilivyo, hivyo hati mpya zaidi hudumu kwenye vionyeshi vya zamani.

Sehemu	Aina	Inahitajika	Maelezo
html	string	Ndiyo	Kichwa cha sehemu kama HTML ya ndani.
open	boolean	Hapana	Iwapo sehemu inaonyeshwa ikiwa imefunuliwa.
children	Block[]	Hapana	Vizuizi vya watoto vilivyofungamana.

JSON

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

collection

Huweka mwonekano wa moja kwa moja wa mkusanyiko kwa id. Kizuizi huhifadhi utambulisho wa mkusanyiko pekee; seva ndiyo mmiliki wa umbo na data.

Sehemu	Aina	Inahitajika	Maelezo
collectionId	string	Ndiyo	Id ya mkusanyiko uliowekwa. Kitu pekee kinachohifadhiwa.

JSON

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

columns

Mpangilio wa safu nyingi wa safu 2 hadi 4, kila moja ikiwa na orodha yake ya vizuizi vya watoto.

Sehemu	Aina	Inahitajika	Maelezo
columns	Block[][]	Ndiyo	Safu, kila moja orodha ya vizuizi vya watoto. Safu mbili hadi nne.

JSON

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

date

Tarehe ya kalenda, huhifadhiwa bila saa za eneo ili kila mshirikiano akubaliane nayo.

Sehemu	Aina	Inahitajika	Maelezo
date	string	Ndiyo	Tarehe ya ISO katika muundo wa yyyy-MM-dd, bila saa za eneo.

JSON

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

delimiter

Kitenganishi cha kuona kati ya sehemu.

Sehemu	Aina	Inahitajika	Maelezo
variant	'line' \| 'stars'	Ndiyo	Mtindo wa kuona wa kigawanishi. Moja ya: line, stars.

JSON

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

doc_card

Kadi tajiri ya kiungo kwa hati nyingine. Huhifadhi id ya ukurasa unaorejelewa pamoja na picha ya onyesho ambayo wenyeji huisasisha jina linapobadilishwa.

Sehemu	Aina	Inahitajika	Maelezo
pageId	string	Ndiyo	Id ya ukurasa unaorejelewa; utambulisho wa kadi.
title	string	Ndiyo	Picha ya onyesho ya kichwa cha ukurasa.
icon	string	Hapana	Aikoni ya hiari inayoonyeshwa kwenye kadi.
description	string	Hapana	Maelezo ya hiari yanayoonyeshwa chini ya kichwa.

JSON

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

embed

Kiungo kilichowekwa. Kizuizi huhifadhi URL; mtoa huduma na alama za uwekaji hutolewa wakati wa kuonyesha, na sehemu za unfurl kama kadi mbadala.

Sehemu	Aina	Inahitajika	Maelezo
url	string	Ndiyo	Kiungo kilichowekwa. Mtoa huduma na alama za uwekaji hutolewa kutoka kwake wakati wa kuonyesha.
title	string	Hapana	Picha ya unfurl kwa kadi ya kiungo.
description	string	Hapana	Maelezo ya unfurl kwa kadi ya kiungo.
imageUrl	string	Hapana	Picha ya onyesho la awali la unfurl kwa kadi ya kiungo.
display	'card'	Hapana	"card" kuonyesha kadi ya kiungo hata pale mwonekano wa moja kwa moja upo.
file	object	Hapana	Jina, aina na aikoni ya faili ya Drive, kutoka akaunti ya Google ya aliyebandika.
gist	object	Hapana	Faili za gist kama zilivyobandikwa, zinachorwa kama msimbo pale mwonekano wa GitHub hauwezi kupakia.
reason	string	Hapana	Kwa nini mwonekano wa moja kwa moja hauonyeshwi: connect_google, no_access, provider_unreachable au switched_off.
issue	object	Hapana	Kiungo cha suala kinachoonyeshwa kama kadi: picha ya mwisho iliyosomwa (tool, key, title, stateName, category, assigneeName, updatedAt, reason).

JSON

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

file

Kiambatisho cha faili chenye kiungo cha kupakua, jina, na ukubwa na aina ya maudhui ya hiari.

Sehemu	Aina	Inahitajika	Maelezo
url	string	Ndiyo	Mahali faili linapotolewa.
name	string	Ndiyo	Jina la faili linaloonyeshwa kwenye kiambatisho.
size	number	Hapana	Ukubwa wa faili kwa baiti.
contentType	string	Hapana	Aina ya MIME ya faili.

JSON

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

glance

Paneli ya muhtasari ya lebo na thamani: safu za ukweli zinazosomeka kwa mtazamo mmoja, zenye maelezo mafupi na aina ya mandharinyuma ya hiari.

Sehemu	Aina	Inahitajika	Maelezo
rows	GlanceRow[]	Ndiyo	Ukweli wa kuonyesha: kila safu ni lebo na thamani ya HTML ya ndani.
caption	string	Hapana	Maelezo mafupi ya hiari juu ya safu.
variant	'plain' \| 'error' \| 'info' \| 'success' \| 'warning'	Hapana	Aina ya mandharinyuma; plain haina mtindo, nyingine zinalingana na paleti ya tahadhari.

JSON

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

header

Vichwa vya kiwango cha juu na vya sehemu (h1 hadi h6). Zana za ndani ya mstari hufanya kazi ndani ya mzigo wa html.

Sehemu	Aina	Inahitajika	Maelezo
html	string	Ndiyo	Maudhui ya HTML ya kichwa. Markup ya zana za ndani ya mstari inasaidiwa.
level	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'	Hapana	Kiwango cha kichwa. Moja ya: h1, h2, h3, h4, h5, h6. Chaguo-msingi ni h1.

JSON

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

image

Kizuizi cha picha chenye maelezo na maandishi ya alt. Hutumiwa kupitia callback ya imageUploader kwenye Editor.create.

Sehemu	Aina	Inahitajika	Maelezo
url	string	Ndiyo	URL ya picha ya kupachika.
caption	string	Hapana	Maelezo ya maandishi wazi yanayoonyeshwa chini ya picha.
alt	string	Hapana	Maandishi ya alt kwa kipengele cha picha.
alignment	'center' \| 'left' \| 'right'	Hapana	Usawazishaji wa mlalo wa picha. Moja ya: center, left, right.

JSON

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

issues

Jedwali la masuala yaliyounganishwa linalotolewa wakati wa kuonyesha kutoka kwa chipu na kadi za masuala kwenye ukurasa (suala, kichwa, hali, mhusika). Halihifadhi data yake yenyewe.

Kizuizi hiki hakihifadhi sehemu zozote; safu hutolewa kutoka kwa chipu na kadi za masuala kwenye ukurasa wakati wa kuonyesha.

JSON

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

latex

Hisabati ya LaTeX, huhifadhiwa kama chanzo na kupangwa wakati wa kuonyesha. Kionyeshi bora baadaye kinaboresha kila hati iliyopo tayari.

Sehemu	Aina	Inahitajika	Maelezo
source	string	Ndiyo	Chanzo cha LaTeX. Huhifadhiwa kama chanzo, kamwe si kama matokeo yaliyoonyeshwa.

JSON

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

list

Orodha iliyopangwa au isiyopangwa. Kila kipengele ni html.

Sehemu	Aina	Inahitajika	Maelezo
type	'ordered' \| 'unordered'	Ndiyo	Aina ya orodha. Moja ya: ordered, unordered.
items	string[]	Ndiyo	Safu ya mifuatano ya HTML, moja kwa kila kipengele cha orodha.

JSON

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

mermaid

Mchoro wa Mermaid, huhifadhiwa kama chanzo na kuchorwa wakati wa kuonyesha, kamwe si kama picha ya raster.

Sehemu	Aina	Inahitajika	Maelezo
source	string	Ndiyo	Chanzo cha Mermaid. Huhifadhiwa kama chanzo, kamwe si kama matokeo yaliyochorwa.

JSON

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

openapi

Huonyesha marejeo ya API ya kuingiliana kutoka kwa hati ya OpenAPI 3.x, ya ndani au iliyoletwa kutoka URL, ikiwa na vichaguzi vya seva na vipande vya msimbo.

Sehemu	Aina	Inahitajika	Maelezo
spec	object	Hapana	Hati ya OpenAPI 3.x ya ndani. Hushinda url wakati zote mbili zimewekwa.
url	string	Hapana	Mahali pa kuleta hati ya OpenAPI wakati wa kuonyesha.
include	OpenApiFilter	Hapana	Kichujio cha operesheni zipi za kuonyesha.
exclude	OpenApiFilter	Hapana	Kichujio cha operesheni zipi za kuficha.
defaultServer	string	Hapana	Seva ipi marejeo huchagua kwa chaguomsingi.
snippetLanguages	CodeLanguage[]	Hapana	Lugha zinazotolewa kwa vipande vya maombi.

JSON

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

paragraph

Aya ya maandishi tajiri. Hukubali markup ya zana za ndani ya mstari kama bold, italic, code, link, marker, na tooltip.

Sehemu	Aina	Inahitajika	Maelezo
html	string	Ndiyo	Maudhui ya HTML ya aya. Markup ya zana za ndani ya mstari inasaidiwa.

JSON

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

quote

Nukuu ya kizuizi yenye sifa ya mwandishi ya hiari.

Sehemu	Aina	Inahitajika	Maelezo
html	string	Ndiyo	Maudhui ya HTML ya mwili wa nukuu. Markup ya zana za ndani ya mstari inasaidiwa.
author	string	Hapana	Maelezo ya maandishi wazi au HTML yanayoonyeshwa chini ya nukuu.

JSON

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

sketch

Mchoro wa mkono huru unaohifadhiwa kama mipigo, kamwe si raster, hivyo unabaki kuharirika na kupanuka kwa usafi.

Sehemu	Aina	Inahitajika	Maelezo
strokes	SketchStroke[]	Ndiyo	Mchoro kama mipigo: kila mpigo ni orodha ya pointi zenye rangi na upana wa hiari.

JSON

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

table

Gridi ya data. Safu ya kwanza inaweza kutumika kama kichwa; kila seli ni html.

Sehemu	Aina	Inahitajika	Maelezo
data	string[][]	Ndiyo	Safu ya pande mbili ya mifuatano ya seli za HTML. Safu ya kwanza ni safu ya kichwa.
caption	string	Hapana	Maelezo ya maandishi wazi au HTML yanayoonyeshwa chini ya jedwali.
showDownload	boolean	Hapana	Onyesha kitufe cha kupakua katika matokeo yaliyoonyeshwa.

JSON

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

updates

Mkondo wa moja kwa moja wa shughuli za hati. Huhifadhi utambulisho, kamwe si picha ya papo, hivyo huendelea kuonyesha shughuli za sasa.

Sehemu	Aina	Inahitajika	Maelezo
pageId	string	Hapana	Shughuli za hati ipi zionyeshwe. Kutokuwepo kunamaanisha hati ambayo kizuizi kimo ndani yake.

JSON

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

video

Kizuizi cha video. Hutumiwa kupitia callback ya videoUploader kwenye Editor.create.

Sehemu	Aina	Inahitajika	Maelezo
url	string	Ndiyo	URL ya faili ya video au kiungo cha kuingiza YouTube/Vimeo.
caption	string	Hapana	Maelezo ya maandishi wazi yanayoonyeshwa chini ya kichezaji.
alt	string	Hapana	Lebo inayoweza kufikiwa kwa kipengele cha video.
alignment	'center' \| 'left' \| 'right'	Hapana	Usawazishaji wa mlalo wa kichezaji. Moja ya: center, left, right.

JSON

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

Marejeo

Vifurushi

Marejeo ya Vizuizi

Umbo la kizuizi

alert

audio

checklist

code

collapsible

collection

columns

date

delimiter

doc_card

embed

file

glance

header

image

issues

latex

list

mermaid

openapi

paragraph

quote

sketch

table

toc

updates

video