コアコンセプト

ブロックモデル

EditorData の中心は blocks 配列です: 順序を保持する Block オブジェクト。各 Block はそのタイプ、タイプ固有のデータ、およびオプションの tunes メタデータを持ちます。

フィールド	型	説明
id	string \| undefined	オプションの一意な識別子。作成時にエディターによって割り当てられます。
type	BlockToolType	ブロックをそのスキーマ、入力コンポーネント、レンダラーに結びつけるリテラルキー。
data	object	タイプ固有のデータオブジェクト: ブロックタイプごとに形が異なります。
tunes	BlockTunes \| undefined	オプションのクロスタイプ tune メタデータ辞書。キーは tune 名、値は自由形式のデータです。

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." }
    }
  ]
}

ブロックツール vs インラインツール

ブロックツールは EditorData の直下にトップレベルのスロットを作成します。インラインツールはブロックが持つ html ペイロード内のテキストを装飾します。2 つの層は完全に分離しており、互いに置き換えることはできません。

JSON ファーストな出力

エディターは HTML を永続化しません。editor.data.extract() を呼び出すと、メディア URL を含む完全な純粋な EditorData JSON が得られます。この JSON はデータベースに保存したり、パーソナライズしたり、他の形式に変換したりできます。

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 はブラウザの DOM を使って、ユーザーがコンテンツを編集できるようにします（ブラウザ専用）。Renderer は以前保存した EditorData を受け取り、HTML としてレンダリングします（ブラウザまたは SSR で実行できます）。

ブロック tunes

Tunes はあらゆるブロックタイプ向けのタイプ非依存なメタデータスロットです。キーはシステムまたはプラグインが設定した tune 名で、値は BlockTuneData にタイプされます: string、number、boolean、または null の任意の組み合わせ。Tunes はコアデータの形を壊さずにセマンティクスを追加できます。