핵심 개념

블록 모델

EditorData의 핵심은 blocks 배열입니다: 순서를 유지하는 Block 객체들. 각 Block은 타입, 타입별 데이터, 그리고 선택적 tunes 메타데이터를 포함합니다.

필드	타입	설명
id	string \| undefined	선택적 고유 식별자. 생성 시 editor에 의해 할당됩니다.
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 페이로드 안에서 텍스트를 꾸밉니다. 두 레이어는 완전히 분리되어 있으며, 서로 대체할 수 없습니다.

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는 핵심 데이터 형태를 변경하지 않고 의미를 추가할 수 있습니다.