Ir para o conteúdo principal

Referência de blocos

O Clepit inclui 12 tipos de bloco integrados. Cada bloco tem um formato JSON, um renderizador e um caminho de inserção programática via editor.blocks.insert.

Todos os blocos compartilham o mesmo envelope quando serializados: id, type, data e um registro tunes opcional.

A forma do bloco

Cada bloco é serializado no mesmo envelope JSON. O id é atribuído pelo editor e pode ser omitido ao construir dados programaticamente.

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

alert

Caixa de destaque com 4 variantes.

CampoTipoObrigatórioDescrição
htmlstringSimConteúdo HTML da mensagem de alerta. O markup de ferramentas inline é suportado.
variant'error' | 'info' | 'success' | 'warning'SimEstilo visual do alerta. Um dos valores: error, info, success, warning.
JSON
{
  "type": "alert",
  "data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}

audio

Bloco de áudio. Consumido pelo callback audioUploader em Editor.create.

CampoTipoObrigatórioDescrição
urlstringSimURL do arquivo de áudio a ser incorporado.
captionstringNãoLegenda em texto simples exibida abaixo do player.
altstringNãoRótulo acessível para o elemento de áudio.
alignment'center' | 'left' | 'right'NãoAlinhamento horizontal do player. Um dos valores: center, left, right.
JSON
{
  "type": "audio",
  "data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}

checklist

Lista de caixas de seleção interativa com estado marcado por item.

CampoTipoObrigatórioDescrição
itemsChecklistItem[]SimArray de itens de lista de verificação, cada um com text e estado checked.
items[].textstringSimConteúdo HTML do rótulo do item.
items[].checkedbooleanSimSe a caixa de seleção está marcada.
JSON
{
  "type": "checklist",
  "data": {
    "items": [
      { "text": "Install the package", "checked": true },
      { "text": "Mount the editor", "checked": false }
    ]
  }
}

code

Bloco de código com realce de sintaxe. São suportadas 50 linguagens, incluindo typescript, python, rust, go, ruby, swift e kotlin.

CampoTipoObrigatórioDescrição
codestringSimA string de código bruto a ser exibida.
languageCodeLanguageNãoLinguagem de realce de sintaxe. Padrão é typescript.
themeCodeThemeNãoTema de cor do editor. Padrão é github-dark.
showCopybooleanNãoMostrar um botão de cópia na saída renderizada.
JSON
{
  "type": "code",
  "data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}

delimiter

Separador visual entre seções.

CampoTipoObrigatórioDescrição
variant'line' | 'stars'SimEstilo visual do divisor. Um dos valores: line, stars.
JSON
{
  "type": "delimiter",
  "data": { "variant": "line" }
}

Títulos de nível superior e de seção (h1 a h6). As ferramentas inline funcionam dentro do payload html.

CampoTipoObrigatórioDescrição
htmlstringSimConteúdo HTML do cabeçalho. O markup de ferramentas inline é suportado.
level'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'NãoNível de cabeçalho. Um dos valores: h1, h2, h3, h4, h5, h6. Padrão é h1.
JSON
{
  "type": "header",
  "data": { "html": "Getting started", "level": "h2" }
}

image

Bloco de imagem com legenda e texto alt. Consumido pelo callback imageUploader em Editor.create.

CampoTipoObrigatórioDescrição
urlstringSimURL da imagem a ser incorporada.
captionstringNãoLegenda em texto simples exibida abaixo da imagem.
altstringNãoTexto alt para o elemento de imagem.
alignment'center' | 'left' | 'right'NãoAlinhamento horizontal da imagem. Um dos valores: center, left, right.
JSON
{
  "type": "image",
  "data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}

list

Lista ordenada ou não ordenada. Cada item é html.

CampoTipoObrigatórioDescrição
type'ordered' | 'unordered'SimTipo de lista. Um dos valores: ordered, unordered.
itemsstring[]SimArray de strings HTML, uma por item de lista.
JSON
{
  "type": "list",
  "data": { "type": "unordered", "items": ["First item", "Second item"] }
}

paragraph

Parágrafo de rich text. Aceita marcação de ferramentas inline como bold, italic, code, link, marker e tooltip.

CampoTipoObrigatórioDescrição
htmlstringSimConteúdo HTML do parágrafo. O markup de ferramentas inline é suportado.
JSON
{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

Citação em bloco com atribuição de autor opcional.

CampoTipoObrigatórioDescrição
htmlstringSimConteúdo HTML do corpo da citação. O markup de ferramentas inline é suportado.
authorstringNãoAtribuição em texto simples ou HTML exibida abaixo da citação.
JSON
{
  "type": "quote",
  "data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}

table

Grade de dados. A primeira linha pode ser usada como cabeçalho; cada célula é html.

CampoTipoObrigatórioDescrição
datastring[][]SimArray bidimensional de strings de células HTML. A primeira linha é a linha de cabeçalho.
captionstringNãoLegenda em texto simples ou HTML exibida abaixo da tabela.
showDownloadbooleanNãoMostrar um botão de download na saída renderizada.
JSON
{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

video

Bloco de vídeo. Consumido pelo callback videoUploader em Editor.create.

CampoTipoObrigatórioDescrição
urlstringSimURL do arquivo de vídeo ou link de incorporação do YouTube/Vimeo.
captionstringNãoLegenda em texto simples exibida abaixo do player.
altstringNãoRótulo acessível para o elemento de vídeo.
alignment'center' | 'left' | 'right'NãoAlinhamento horizontal do player. Um dos valores: center, left, right.
JSON
{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}