Passer au contenu principal

Concepts fondamentaux

Le modèle de bloc

Le cœur de EditorData est le tableau blocks : des objets Block qui préservent l'ordre. Chaque Block porte son type, ses données spécifiques au type et des métadonnées tunes facultatives.

ChampTypeDescription
idstring | undefinedIdentifiant unique facultatif, attribué par l'éditeur à la création.
typeBlockToolTypeClé littérale qui relie le bloc à son schéma, son composant de saisie et son moteur de rendu.
dataobjectObjet de données spécifique au type : la structure diffère selon le type de bloc.
tunesBlockTunes | undefinedDictionnaire de métadonnées tune optionnel et multi-types. La clé est le nom du tune, la valeur est une donnée libre.
JSON
{
  "time": 1745000000000,
  "version": "1.0.0",
  "blocks": [
    {
      "id": "abc123",
      "type": "header",
      "data": { "html": "Hello world", "level": "h1" }
    },
    {
      "id": "def456",
      "type": "paragraph",
      "data": { "html": "This is a <b>rich</b> paragraph." }
    }
  ]
}

Outils de bloc vs outils en ligne

Les outils de bloc créent des emplacements de premier niveau directement dans EditorData. Les outils en ligne décorent le texte à l'intérieur de la charge utile html que contient un bloc. Les deux couches sont entièrement séparées : elles ne peuvent pas se substituer l'une à l'autre.

Sortie JSON en premier

L'éditeur ne persiste jamais en HTML. Lorsque vous appelez editor.data.extract(), vous obtenez du JSON EditorData pur : complet avec les URL des médias. Ce JSON peut être stocké en base de données, personnalisé ou converti en d'autres formats.

TypeScript
import { Editor } from '@clepit/core';

const editor = Editor.create({ containerId: 'editor' });

const data = editor.data.extract();
// data: EditorData
// {
//   time: 1745000000000,
//   version: '1.0.0',
//   blocks: [ ... ]
// }

Editor vs Renderer

Editor utilise le DOM du navigateur pour permettre à l'utilisateur de modifier le contenu (navigateur uniquement). Renderer prend l'EditorData précédemment sauvegardé et le restitue en HTML (peut fonctionner dans le navigateur ou via SSR).

Réglages de bloc

Les tunes sont un emplacement de métadonnées indépendant du type pour n'importe quel type de bloc. La clé est le nom du tune défini par le système ou un plugin, et la valeur est typée à BlockTuneData : n'importe quelle combinaison de string, number, boolean ou null. Les tunes peuvent ajouter de la sémantique sans altérer la forme des données de base.

JSON
{
  "id": "abc123",
  "type": "paragraph",
  "data": { "html": "Some text." },
  "tunes": {
    "textAlign": { "alignment": "center" },
    "visibility": { "hidden": false }
  }
}