Referencia de bloques

Esta página documenta cada tipo de bloque que trae el editor. Todo bloque tiene una forma JSON, un renderizador y una vía de inserción programática mediante editor.blocks.insert.

Todos los bloques comparten el mismo envoltorio al serializarse: id, type, data y un registro tunes opcional.

La forma del bloque

Cada bloque se serializa en el mismo sobre JSON. El id es asignado por el editor y puede omitirse al construir datos mediante programación.

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

alert

Cuadro de aviso destacado con 4 variantes.

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

audio

Bloque de audio. Se consume mediante el callback audioUploader en Editor.create.

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

checklist

Lista de casillas de verificación interactiva con estado marcado por elemento.

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

code

Bloque de código con resaltado de sintaxis. Se admiten 50 lenguajes, entre ellos typescript, python, rust, go, ruby, swift y kotlin.

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

collapsible

Una sección plegable con un título y bloques hijos anidados. Los tipos de bloques hijos desconocidos se conservan tal cual, así que los documentos más nuevos sobreviven en renderizadores más antiguos.

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

collection

Incrusta una vista de colección en vivo por id. El bloque solo almacena la identidad de la colección; el servidor es dueño de la forma y de los datos.

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

columns

Un diseño multicolumna de 2 a 4 columnas, cada una con su propia lista de bloques hijos.

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

date

Una fecha de calendario, almacenada sin zona horaria para que todos los colaboradores coincidan en ella.

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

delimiter

Separador visual entre secciones.

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

doc_card

Una tarjeta de enlace enriquecida hacia otro documento. Almacena el id de la página referenciada y una instantánea de presentación que los hosts refrescan al renombrar.

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

embed

Un enlace incrustado. El bloque almacena la URL; el proveedor y el marcado de incrustación se derivan al renderizar, con los campos de unfurl como tarjeta de respaldo.

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

file

Un archivo adjunto con enlace de descarga, nombre, y tamaño y tipo de contenido opcionales.

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

glance

Un panel de resumen de etiquetas y valores: filas de datos que se leen de un vistazo, con leyenda y variante de fondo opcionales.

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

header

Títulos de nivel superior y de sección (h1 a h6). Las herramientas en línea funcionan dentro de la carga útil html.

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

image

Bloque de imagen con leyenda y texto alt. Se consume mediante el callback imageUploader en Editor.create.

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

issues

Una tabla de las incidencias enlazadas derivada al renderizar de las fichas y tarjetas de incidencias de la página (incidencia, título, estado, responsable). No almacena datos propios.

Este bloque no almacena campos; las filas se derivan de las fichas y tarjetas de incidencias de la página al renderizar.

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

latex

Matemáticas LaTeX, almacenadas como fuente y compuestas al renderizar. Un mejor renderizador después mejora cada documento que ya existe.

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

list

Lista ordenada o desordenada. Cada elemento es html.

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

mermaid

Un diagrama Mermaid, almacenado como fuente y dibujado al mostrarse, nunca como ráster.

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

openapi

Renderiza una referencia de API interactiva a partir de un documento OpenAPI 3.x, en línea o traído de una URL, con selectores de servidor y fragmentos de código.

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

paragraph

Párrafo de texto enriquecido. Acepta marcado de herramientas en línea como bold, italic, code, link, marker y tooltip.

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

quote

Cita en bloque con atribución de autor opcional.

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

sketch

Un dibujo a mano alzada almacenado como trazos, nunca como ráster, así que sigue siendo editable y escala con nitidez.

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

table

Cuadrícula de datos. La primera fila puede usarse como encabezado; cada celda es html.

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

toc

Una tabla de contenidos derivada de los encabezados del documento al renderizar. No almacena datos propios.

Este bloque no almacena campos; la lista se deriva de los encabezados del documento al renderizar.

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

updates

Un feed de actividad en vivo para un documento. Almacena identidad, nunca una instantánea, así que sigue mostrando la actividad actual.

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

video

Bloque de vídeo. Se consume mediante el callback videoUploader en Editor.create.

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