Passer au contenu principal

Référence des blocs

Clepit fournit 12 types de blocs intégrés. Chaque bloc possède une structure JSON, un moteur de rendu et un chemin d’insertion programmatique via editor.blocks.insert.

Tous les blocs partagent la même enveloppe une fois sérialisés : id, type, data et un enregistrement tunes facultatif.

La forme du bloc

Chaque bloc est sérialisé dans la même enveloppe JSON. L'id est attribué par l'éditeur et peut être omis lors de la construction de données par programmation.

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

alert

Encadré de mise en évidence avec 4 variantes.

ChampTypeObligatoireDescription
htmlstringOuiContenu HTML du message d'alerte. Le balisage des outils en ligne est pris en charge.
variant'error' | 'info' | 'success' | 'warning'OuiStyle visuel de l'alerte. L'une des valeurs : error, info, success, warning.
JSON
{
  "type": "alert",
  "data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}

audio

Bloc audio. Consommé via le callback audioUploader sur Editor.create.

ChampTypeObligatoireDescription
urlstringOuiURL du fichier audio à intégrer.
captionstringNonLégende en texte brut affichée sous le lecteur.
altstringNonÉtiquette accessible pour l'élément audio.
alignment'center' | 'left' | 'right'NonAlignement horizontal du lecteur. L'une des valeurs : center, left, right.
JSON
{
  "type": "audio",
  "data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}

checklist

Liste de cases à cocher interactive avec un état coché par élément.

ChampTypeObligatoireDescription
itemsChecklistItem[]OuiTableau d'éléments de liste de contrôle, chacun avec un texte et un état coché.
items[].textstringOuiContenu HTML de l'étiquette de l'élément.
items[].checkedbooleanOuiIndique si la case est cochée.
JSON
{
  "type": "checklist",
  "data": {
    "items": [
      { "text": "Install the package", "checked": true },
      { "text": "Mount the editor", "checked": false }
    ]
  }
}

code

Bloc de code avec coloration syntaxique. 50 langages sont pris en charge, dont typescript, python, rust, go, ruby, swift et kotlin.

ChampTypeObligatoireDescription
codestringOuiLa chaîne de code brut à afficher.
languageCodeLanguageNonLangage de coloration syntaxique. Par défaut : typescript.
themeCodeThemeNonThème de couleur de l'éditeur. Par défaut : github-dark.
showCopybooleanNonAfficher un bouton de copie dans le rendu.
JSON
{
  "type": "code",
  "data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}

delimiter

Séparateur visuel entre les sections.

ChampTypeObligatoireDescription
variant'line' | 'stars'OuiStyle visuel du séparateur. L'une des valeurs : line, stars.
JSON
{
  "type": "delimiter",
  "data": { "variant": "line" }
}

Titres de premier niveau et titres de section (h1 à h6). Les outils en ligne fonctionnent à l’intérieur de la charge utile html.

ChampTypeObligatoireDescription
htmlstringOuiContenu HTML du titre. Le balisage des outils en ligne est pris en charge.
level'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'NonNiveau de titre. L'une des valeurs : h1, h2, h3, h4, h5, h6. Par défaut : h1.
JSON
{
  "type": "header",
  "data": { "html": "Getting started", "level": "h2" }
}

image

Bloc image avec légende et texte alt. Consommé via le callback imageUploader sur Editor.create.

ChampTypeObligatoireDescription
urlstringOuiURL de l'image à intégrer.
captionstringNonLégende en texte brut affichée sous l'image.
altstringNonTexte alt pour l'élément image.
alignment'center' | 'left' | 'right'NonAlignement horizontal de l'image. L'une des valeurs : center, left, right.
JSON
{
  "type": "image",
  "data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}

list

Liste ordonnée ou non ordonnée. Chaque élément est du html.

ChampTypeObligatoireDescription
type'ordered' | 'unordered'OuiType de liste. L'une des valeurs : ordered, unordered.
itemsstring[]OuiTableau de chaînes HTML, une par élément de liste.
JSON
{
  "type": "list",
  "data": { "type": "unordered", "items": ["First item", "Second item"] }
}

paragraph

Paragraphe en texte enrichi. Accepte le balisage des outils en ligne tels que bold, italic, code, link, marker et tooltip.

ChampTypeObligatoireDescription
htmlstringOuiContenu HTML du paragraphe. Le balisage des outils en ligne est pris en charge.
JSON
{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

Bloc de citation avec une attribution d’auteur facultative.

ChampTypeObligatoireDescription
htmlstringOuiContenu HTML du corps de la citation. Le balisage des outils en ligne est pris en charge.
authorstringNonAttribution en texte brut ou HTML affichée sous la citation.
JSON
{
  "type": "quote",
  "data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}

table

Grille de données. La première ligne peut servir d’en-tête ; chaque cellule est du html.

ChampTypeObligatoireDescription
datastring[][]OuiTableau à deux dimensions de chaînes de cellules HTML. La première ligne est la ligne d'en-tête.
captionstringNonLégende en texte brut ou HTML affichée sous le tableau.
showDownloadbooleanNonAfficher un bouton de téléchargement dans le rendu.
JSON
{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

video

Bloc vidéo. Consommé via le callback videoUploader sur Editor.create.

ChampTypeObligatoireDescription
urlstringOuiURL du fichier vidéo ou lien d'intégration YouTube/Vimeo.
captionstringNonLégende en texte brut affichée sous le lecteur.
altstringNonÉtiquette accessible pour l'élément vidéo.
alignment'center' | 'left' | 'right'NonAlignement horizontal du lecteur. L'une des valeurs : center, left, right.
JSON
{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}