Saltar al contenido principal

Referencia de bloques

Clepit incluye 12 tipos de bloque integrados. Cada bloque tiene una forma JSON, un renderizador y una ruta 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.

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

alert

Cuadro de aviso destacado con 4 variantes.

CampoTipoObligatorioDescripción
htmlstringSíContenido HTML del mensaje de alerta. Se admite el marcado de herramientas en línea.
variant'error' | 'info' | 'success' | 'warning'SíEstilo visual de la alerta. Uno de: error, info, success, warning.
JSON
{
  "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.

CampoTipoObligatorioDescripción
urlstringSíURL del archivo de audio a incrustar.
captionstringNoLeyenda de texto sin formato que se muestra debajo del reproductor.
altstringNoEtiqueta accesible para el elemento de audio.
alignment'center' | 'left' | 'right'NoAlineación horizontal del reproductor. Uno de: center, left, right.
JSON
{
  "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.

CampoTipoObligatorioDescripción
itemsChecklistItem[]SíArray de elementos de lista de verificación, cada uno con text y estado checked.
items[].textstringSíContenido HTML de la etiqueta del elemento.
items[].checkedbooleanSíSi la casilla de verificación está marcada.
JSON
{
  "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.

CampoTipoObligatorioDescripción
codestringSíLa cadena de código sin procesar a mostrar.
languageCodeLanguageNoLenguaje de resaltado de sintaxis. Por defecto typescript.
themeCodeThemeNoTema de color del editor. Por defecto github-dark.
showCopybooleanNoMostrar un botón de copia en la salida renderizada.
JSON
{
  "type": "code",
  "data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}

delimiter

Separador visual entre secciones.

CampoTipoObligatorioDescripción
variant'line' | 'stars'SíEstilo visual del divisor. Uno de: line, stars.
JSON
{
  "type": "delimiter",
  "data": { "variant": "line" }
}

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

CampoTipoObligatorioDescripción
htmlstringSíContenido HTML del encabezado. Se admite el marcado de herramientas en línea.
level'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'NoNivel de encabezado. Uno de: h1, h2, h3, h4, h5, h6. Por defecto h1.
JSON
{
  "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.

CampoTipoObligatorioDescripción
urlstringSíURL de la imagen a incrustar.
captionstringNoLeyenda de texto sin formato que se muestra debajo de la imagen.
altstringNoTexto alt para el elemento de imagen.
alignment'center' | 'left' | 'right'NoAlineación horizontal de la imagen. Uno de: center, left, right.
JSON
{
  "type": "image",
  "data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}

list

Lista ordenada o desordenada. Cada elemento es html.

CampoTipoObligatorioDescripción
type'ordered' | 'unordered'SíTipo de lista. Uno de: ordered, unordered.
itemsstring[]SíArray de cadenas HTML, una por elemento de lista.
JSON
{
  "type": "list",
  "data": { "type": "unordered", "items": ["First item", "Second item"] }
}

paragraph

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

CampoTipoObligatorioDescripción
htmlstringSíContenido HTML del párrafo. Se admite el marcado de herramientas en línea.
JSON
{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

Cita en bloque con atribución de autor opcional.

CampoTipoObligatorioDescripción
htmlstringSíContenido HTML del cuerpo de la cita. Se admite el marcado de herramientas en línea.
authorstringNoAtribución de texto sin formato o HTML que se muestra debajo de la cita.
JSON
{
  "type": "quote",
  "data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}

table

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

CampoTipoObligatorioDescripción
datastring[][]SíArray bidimensional de cadenas de celdas HTML. La primera fila es la fila de encabezado.
captionstringNoLeyenda de texto sin formato o HTML que se muestra debajo de la tabla.
showDownloadbooleanNoMostrar un botón de descarga en la salida renderizada.
JSON
{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

video

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

CampoTipoObligatorioDescripción
urlstringSíURL del archivo de video o enlace de incrustación de YouTube/Vimeo.
captionstringNoLeyenda de texto sin formato que se muestra debajo del reproductor.
altstringNoEtiqueta accesible para el elemento de video.
alignment'center' | 'left' | 'right'NoAlineación horizontal del reproductor. Uno de: center, left, right.
JSON
{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}