メインコンテンツへスキップ

ガイド

埋め込み

API リファレンス

@clepit/core からの公開エクスポート。以下の各シンボルは、型付きシグネチャと最小限の使用例を提供します。

Editor

コアエディタークラスです。Editor は create（メインファクトリー）と destroy の 2 つのパブリックスタティックメソッドを持ちます。create() メソッドは EditorAPI オブジェクトを返し、エディターのマウント後にすべてのインスタンスメソッドにアクセスできます。

メソッドシグネチャ説明
Editor.createEditor.create(config: EditorConfig): EditorAPI新しいエディターインスタンスを作成し、指定された containerId を持つ DOM 要素にマウントします。
Editor.destroyEditor.destroy(containerId: string): voidEditorAPI オブジェクトの destroy() メソッドはこのインスタンスに対して Editor.destroy() を呼び出します。
メソッドシグネチャ説明
data.extractdata.extract(): EditorDataエディターインスタンスから現在のブロックデータを JSON セーフな EditorData として抽出します。
data.setdata.set(data: EditorData): voidブロックリスト全体を新しいデータペイロードで置き換えます。完全な再レンダリングをトリガーします。
data.cleardata.clear(): voidブロックのコンテンツと保存された状態データの両方をクリアします。
data.clearContentdata.clearContent(): voidブロックのみを削除し、ストアのデータはそのまま残します。
data.clearStoragedata.clearStorage(): voidストアデータのみをクリアし、現在のブロックはそのままにします。
blocks.insertblocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number): HTMLElement | null指定した index にブロックを挿入します。対象のブロックタイプと同じデータ構造を受け付けます。
blocks.convertblocks.convert(blockId: string, newType: BlockToolType): voidブロックをその場で新しいタイプに変換します。
blocks.removeblocks.remove(index: number): void指定した index にあるブロックを削除します。
blocks.moveblocks.move(fromIndex: number, toIndex: number): voidブロックをあるインデックスから別のインデックスに移動します。
blocks.updateblocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): void既存のブロックのデータをその場で更新します。タイプは変わりません。
blocks.getblocks.get(blockId: string): EditorData['blocks'][number] | nullID でブロックを取得します。見つからない場合は null を返します。
blocks.getAllblocks.getAll(): EditorData['blocks']すべてのブロックのデータを配列として返します。
blocks.countblocks.count(): numberエディター内のブロック数を返します。
focusfocus(): voidフォーカスをエディターに移し、最初のブロックにフォーカスします。
blurblur(): voidエディター内のアクティブなフォーカスをすべて取り除きます。
destroydestroy(): voidEditorAPI オブジェクトの destroy() メソッドはこのインスタンスに対して Editor.destroy() を呼び出します。
selection.getselection.get(): Selection | nullウィンドウ選択オブジェクトまたは null を返します。
selection.setselection.set(selection: Selection): voidウィンドウ選択を提供された Selection オブジェクトに設定します。
selection.clearselection.clear(): voidウィンドウ選択からすべての範囲を削除します。
ui.showBlockMenuui.showBlockMenu(block: HTMLElement): void指定されたブロック DOM 要素に対してブロックタイプメニューを表示します。
ui.hideBlockMenuui.hideBlockMenu(): voidブロックタイプメニューが開いている場合に非表示にします。
ui.showToolbarui.showToolbar(x: number, y: number): void指定された x、y ビューポート座標でインラインツールバーを表示します。
ui.hideToolbarui.hideToolbar(): voidインラインツールバーが表示されている場合に非表示にします。
view.getCurrentViewview.getCurrentView(containerId: string): EditorView | null指定された containerId の現在のビュー（edit、preview、または json）を返します。
view.switchViewview.switchView(containerId: string, view: EditorView): voidエディターを指定されたビューに切り替えます：edit、preview、または json。

典型的な使用例

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

const editor = Editor.create({
  containerId: 'editor',
  theme: 'auto',
  placeholder: 'Start writing...',
  minHeight: 300,
});

// Insert a block
editor.blocks.insert('paragraph', { html: 'Hello world' }, 0);

// Extract data
const data = editor.data.extract();

// Switch view
editor.view.switchView('editor', 'preview');

// Tear down
editor.destroy();

Renderer

保存されたブロックデータを DOM 要素内の読み取り専用 HTML に変換するクラスです。このクラスには 1 つのパブリックスタティックメソッドがあります：render()。

メソッドシグネチャ説明
Renderer.renderRenderer.render(config: RendererConfig): HTMLElement保存されたブロック JSON を読み取り専用の HTML としてコンテナにレンダリングします。編集機能なしでコンテンツを表示したい場所であればどこでも使用できます。

典型的な使用例

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

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

StyleManager

テーマシステムを管理する集中クラスです。コンシューマー向けに 3 つの便利なパブリックスタティックメソッドを提供します：subscribe（OS レベルのテーマ変更用）、getResolvedTheme（現在の OS テーマを読み取るため）、injectStyles（カスタム CSS を注入するため）。

メソッドシグネチャ説明
StyleManager.subscribeStyleManager.subscribe(cb: (theme: 'light' | 'dark') => void): () => void実行時のテーマトークンの変更を購読します。theme または themeOverrides が変化するたびにリスナーが発火します。
StyleManager.getResolvedThemeStyleManager.getResolvedTheme(): 'light' | 'dark'現在の OS テーマ（"light" または "dark"）を読み取ります。matchMedia が利用できない場合は "light" を返します。
StyleManager.injectStylesStyleManager.injectStyles(styleId: string, styles: string): booleanCSS 文字列を document.head に注入します（一意の styleId を使用）。既に存在する場合は false、それ以外は true を返します。

典型的な使用例

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

// React to OS theme changes
const unsubscribe = StyleManager.subscribe(theme => {
  console.log('OS theme:', theme); // 'light' | 'dark'
});

// Read current OS theme
const current = StyleManager.getResolvedTheme();

// Inject custom CSS once
StyleManager.injectStyles('my-overrides', `
  .clepit-editor { font-family: 'Inter', sans-serif; }
`);

// Unsubscribe when done
unsubscribe();