設定

EditorConfig と RendererConfig はすべてのカスタマイズのエントリーポイントです。それぞれ Editor.create() または Renderer.render() に渡します。containerId（およびレンダラーの data）のみが必須で、他のすべてのオプションには安全なデフォルト値があります。

EditorConfig

EditorConfig を Editor.create() の唯一の引数として渡します。必須の containerId は既存の DOM 要素の id と一致する必要があります。

オプション	型	必須	説明
containerId	string	はい	エディターをホストする DOM 要素の ID。Editor.create() が呼び出される前に DOM に存在している必要があります。
maxHeight	number	いいえ	エディターの最大高さ（ピクセル）。高さの制限なしにするには 0（デフォルト）を設定します。
minHeight	number	いいえ	エディターの最小高さ（ピクセル）。デフォルトは 300 です。
onChange	(data: EditorData) => void	いいえ	ドキュメントが変更されるたびに発火するコールバック。完全な EditorData スナップショットを受け取ります。
onReady	() => void	いいえ	エディターが完全に初期化され、API 呼び出しを受け付ける準備ができたときに発火するコールバック。
placeholder	string	いいえ	エディターが空のときに表示されるプレースホルダーテキスト。デフォルトは 'Start writing...' です。
initialData	EditorData	いいえ	エディターのマウント時に読み込む事前入力済みの EditorData。
initialView	'edit' \| 'preview' \| 'json'	いいえ	初期ビューモード。次のいずれか: edit、preview、json。デフォルトは 'edit' です。
allowJsonViewEditing	boolean	いいえ	true の場合、JSON ビューは編集可能になり、変更はドキュメントに伝播します。デフォルトは false です。
hasViewSwitcher	boolean	いいえ	false の場合、アクションバーから編集・プレビュー・JSON のボタンを省きます。デフォルトは true です。
hasDocumentActions	boolean	いいえ	false の場合、アクションバーからコピー・ダウンロード・クリアのボタンを省きます。hasViewSwitcher も false なら、アクションバー自体を描画しません。デフォルトは true です。
onClearRequest	() => Promise<boolean>	いいえ	クリアが押されたときに呼ばれます。true で解決した場合にのみページを空にし、拒否された場合はページをそのまま残します。未指定の場合はすぐに空にします。
margins	BlockMargins	いいえ	各ブロックに適用されるグローバルな上下マージン（ピクセル）。ブロックレベルの設定が優先されます。
styles	EditorStyles	いいえ	エディタークローム（ツールバー、ダイアログ、コントロール）の詳細な CSS カスタマイズ用の EditorStyles オブジェクト。
classNames	EditorClassNames	いいえ	エディタークローム要素に CSS クラス名を付けるための EditorClassNames オブジェクト。
imageUploader	UploadFunction	いいえ	画像ファイルをアップロードし、公開 URL 文字列を返す非同期関数。
audioUploader	UploadFunction	いいえ	音声ファイルをアップロードし、公開 URL 文字列を返す非同期関数。
videoUploader	UploadFunction	いいえ	動画ファイルをアップロードし、公開 URL 文字列を返す非同期関数。
fileUploader	UploadFunction	いいえ	ファイルブロックの添付をあなたのストレージへ移すアップロード関数。
locale	string	いいえ	エディターが編集する単一のロケール。多言語ブロックはこのロケールに平坦化されます。
defaultLocale	string	いいえ	ブロックに要求ロケールのコンテンツがない場合に使うフォールバックロケール。
onLocaleFallback	(info: { blockId: string; locale: string }) => void	いいえ	ブロックが別ロケールへフォールバックしたときに呼ばれます。ホストがインジケーターを表示できます。
onInlineRewrite	(selection: string, action: InlineRewriteAction) => Promise<string \| null>	いいえ	選択テキストを AI で書き換える関数。設定するとツールバーに書き換えボタンが表示されます。
inlineRewriteLabels	Partial<Record<InlineRewriteAction, string>>	いいえ	書き換えメニューの操作ラベルを上書きします。ローカライズ用。
inlineRewriteTooltip	string	いいえ	インラインツールバーの書き換えワンドのツールチップを上書きします。ローカライズ用。
blockToolLabels	Partial<Record<BlockToolType, string>>	いいえ	ツールボックスとスラッシュメニューのブロックツールのラベルを上書きします。ローカライズ用。
blockToolbarLabels	Partial<Record<BlockToolbarLabel, string>>	いいえ	ブロックツールバーのテキスト (追加、移動、削除など) と、空のブロック欄に表示されるヒントを上書きします。ローカライズ用。
controlLabels	Partial<Record<ControlLabel, string>>	いいえ	アクションバーのボタン名 (編集、プレビュー、JSON、コピー、ダウンロード、クリア) を上書きします。アクセシブルな名前とツールチップに使われます。ローカライズ用。
dialogLabels	Partial<Record<DialogLabel, string>>	いいえ	リンク、ツールチップ、ステータスの各ダイアログに表示される文言を名前で指定します。タイトル、フィールドのラベル、プレースホルダー、ステータスのスタイル、キャンセルと適用です。未指定の場合は英語になります。
resolveLink	(url: string) => Promise<Partial<EmbedData>>	いいえ	貼り付けた埋め込みのスナップショットをサーバーから補います。タイトル、Drive ファイル、gist のファイル、またはライブ表示できない理由。失敗した参照は、ツールが応答しなかったカードとして描き、隣に再試行を置きます。
onEmbedAction	(action: EmbedAction, blockId: string) => void	いいえ	カードの理由の隣にある、ホストだけが行える修正。connectGoogle はメンバーを Google アカウントの接続へ送り、retry はエディター自身が処理します。
disabledEmbedProviders	readonly string[]	いいえ	ワークスペースがオフにした埋め込みツール (figma、miro、loom、google_drive、github_gist)。そのリンクは理由を示すカードとして描かれます。
pasteEmbeds	'live' \| 'offer' \| 'card'	いいえ	対応リンクを貼り付けたときの動作。ライブで表示 (既定)、表示を提案、またはカードを表示。
embedLabels	Partial<Record<EmbedLabel, string>>	いいえ	埋め込みブロックの理由行、操作、gist ラベルの翻訳語。EmbedLabel をキーとし、未指定なら英語にフォールバックします。
resolveIssues	(urls: string[]) => Promise<Record<string, IssueSnapshot>>	いいえ	ページの課題リンクに、URL をキーとしたスナップショットで答えます。未指定なら、チップとカードはドキュメントが保存した内容を保ち、何も更新されません。
onIssueAction	(action: IssueAction, tool: string) => void	いいえ	課題の理由の横にある、ホストだけが行える修正: ツールを接続すること。ホストの連携ページへ移動します。
issueCards	'off' \| 'on'	いいえ	単独の行に貼り付けた課題リンクをカードにするかどうか。未指定なら off。文中のチップは常にチップです。
issueChip	{ assignee: boolean; status: boolean }	いいえ	メンバーの 2 つのチップ切り替え: ステータスのピルと担当者。未指定なら両方オンです。
issueLabels	Partial<Record<IssueLabel, string>>	いいえ	課題チップ、カード、関連課題の表の翻訳語。IssueLabel をキーとし、未指定なら英語にフォールバックします。
jiraSites	readonly string[]	いいえ	ワークスペースの接続が到達する Jira サイトの URL。サイト独自ドメインのリンクを課題として認識させます。
allowedBlockTools	readonly BlockToolType[]	いいえ	エディタがブロックメニュー、その検索、変換メニュー、貼り付け時に提供するブロックの種類。未指定なら登録済みのすべてのブロック。リスト外の保存済みブロックは引き続き描画されます。
allowedInlineTools	readonly InlineToolType[]	いいえ	インラインツールバーが提供する書式マーク。未指定なら登録済みのすべてのマーク。
theme	'auto' \| 'light' \| 'dark'	いいえ	カラースキーム。次のいずれか: auto（システムに従う）、light、dark。デフォルトは auto です。
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	いいえ	モードごとのトークンオーバーライド。完全なテーマを置き換えずに色をカスタマイズするために light および/または dark トークンマップを提供します。

TypeScript

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

const editor = Editor.create({
  containerId: 'editor',
  minHeight: 400,
  placeholder: 'Start writing...',
  theme: 'auto',
  onChange: data => console.log(data),
  onReady: () => console.log('Editor ready'),
  imageUploader: async file => {
    const form = new FormData();
    form.append('file', file);
    const res = await fetch('/api/upload', { body: form, method: 'POST' });
    const { url } = await res.json();
    return url;
  },
});

RendererConfig

RendererConfig を Renderer.render() の唯一の引数として渡します。containerId と data の両方が必須です。

オプション	型	必須	説明
containerId	string	はい	レンダリングされた出力が注入される DOM 要素の ID。
data	EditorData	はい	レンダリングする EditorData ドキュメント。必須。
margins	BlockMargins	いいえ	レンダリングされた各ブロックに適用されるグローバルな上下マージン（ピクセル）。
styles	BlockStyles	いいえ	レンダリングされた出力のブロックタイプごとの CSS カスタマイズ用の BlockStyles マップ。
classNames	BlockClassNames	いいえ	レンダリングされた出力のブロックタイプごとの CSS クラス名用の BlockClassNames マップ。
editorClassNames	EditorClassNames	いいえ	インタラクティブコンポーネントをレンダリングするブロック（例: 段落の tooltip classNames）に渡される EditorClassNames。
configs	Partial<BlockTypeOutputConfigs>	いいえ	ブロックごとの OutputConfig オブジェクトの部分マップ。各エントリはブロックレベルのマージンと tooltip クラス名を設定できます。
theme	'auto' \| 'light' \| 'dark'	いいえ	カラースキーム。次のいずれか: auto、light、dark。
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	いいえ	レンダリングされた出力のモードごとのトークンオーバーライド。

TypeScript

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

const data: EditorData = await fetch('/api/content/123').then(r => r.json());

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

ブロックレベルのスタイリング

EditorConfig と RendererConfig はどちらも、ブロックタイプをキーとした styles、classNames、configs を受け付けます。ターゲットを絞った上書きに使用してください。完全なトークンリファレンスは Themes ページを参照してください。

TypeScript

import { Editor, Renderer } from '@clepit/core';
import type { BlockStyles, BlockClassNames, EditorStyles } from '@clepit/core';

const editorStyles: EditorStyles = {
  blockToolbar: { container: { borderRadius: '8px' } },
};

const blockStyles: BlockStyles = {
  header: { h1: { fontFamily: 'Georgia, serif' } },
  paragraph: { lineHeight: '1.75' },
  table: { cell: { padding: '8px 12px' } },
};

const blockClassNames: BlockClassNames = {
  paragraph: 'prose-paragraph',
  header: { h1: 'prose-h1', h2: 'prose-h2' },
  alert: { info: 'alert-info', error: 'alert-error' },
};

Editor.create({
  containerId: 'editor',
  styles: editorStyles,
});

Renderer.render({
  containerId: 'output',
  data,
  styles: blockStyles,
  classNames: blockClassNames,
});