はじめに

パッケージをインストールし、id で任意のコンテナ要素にマウントし、必要なときにクリーンな JSON を抽出します。Clepit にはフレームワーク依存がないため、ラッパーなしで React、Vue、Svelte、または素の JavaScript に組み込めます。

インストール

プロジェクトに @clepit/core を追加します。エディターは単一の ESM バンドルと TypeScript 型定義として提供されます。

bun add @clepit/core

エディターを作成する

div を追加してから、必要な EditorConfig オプションを指定して Editor.create を呼び出します。containerId のみ必須で、それ以外はすべて任意です。

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

const editor = Editor.create({
  containerId: 'editor',
  onChange: data => console.log(data),
  placeholder: 'Start writing…',
  theme: 'auto',
});

編集と保存

ユーザーが入力した後に editor.data.extract() を呼び出して EditorData の JSON 形式にシリアライズします。ペイロードには各ブロックを含む { blocks } 配列が含まれます。

const data = editor.data.extract();
// data: EditorData
// {
//   time: 1745000000000,
//   version: '1.0.0',
//   blocks: [
//     { id: 'abc123', type: 'paragraph', data: { html: 'Hello world' } },
//     ...
//   ]
// }

読み取り専用でレンダリング

どこにでも保存された EditorData から HTML を出力するには Renderer.render を使用します。Renderer は状態を保持しません。containerId を持つ div だけが必要です。

import { Renderer } from '@clepit/core';

Renderer.render({
  containerId: 'output',
  data: savedEditorData,
  margins: { bottom: 0, top: 0 },
});

フレームワーク非依存

@clepit/core にはピアフレームワークの依存関係がありません。Editor.create と Renderer.render はどちらも完全な DOM API のみ必要です: React、Vue、Svelte、またはバニラスクリプトはすべて直接動作します。