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

ガイド

埋め込み

ブロックリファレンス

Clepit には 12 種類の組み込みブロックタイプが含まれます。各ブロックには JSON 構造、レンダラー、そして editor.blocks.insert によるプログラム的な挿入経路があります。

すべてのブロックはシリアライズ時に同じエンベロープを共有します: id、type、data、そして任意の tunes レコード。

ブロックの形状

すべてのブロックは同じ JSON エンベロープにシリアライズされます。id はエディターによって割り当てられ、データをプログラムで構築する際に省略できます。

JSON
{
  "id": "abc123",
  "type": "paragraph",
  "data": { "html": "Hello <b>world</b>" },
  "tunes": {}
}

alert

4 種類のバリアントを持つ強調表示の注意ボックス。

フィールド型必須説明
htmlstringはいアラートメッセージの HTML コンテンツ。インラインツールのマークアップがサポートされています。
variant'error' | 'info' | 'success' | 'warning'はいアラートの視覚スタイル。次のいずれか: error、info、success、warning。
JSON
{
  "type": "alert",
  "data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}

audio

オーディオブロック。Editor.create の audioUploader コールバックを介して処理されます。

フィールド型必須説明
urlstringはい埋め込むオーディオファイルの URL。
captionstringいいえプレーヤーの下に表示されるプレーンテキストのキャプション。
altstringいいえオーディオ要素のアクセシブルなラベル。
alignment'center' | 'left' | 'right'いいえプレーヤーの水平配置。次のいずれか: center、left、right。
JSON
{
  "type": "audio",
  "data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}

checklist

項目ごとのチェック状態を持つインタラクティブなチェックボックスリスト。

フィールド型必須説明
itemsChecklistItem[]はいチェックリスト項目の配列。各項目には text とチェック状態があります。
items[].textstringはい項目ラベルの HTML コンテンツ。
items[].checkedbooleanはいチェックボックスがチェックされているかどうか。
JSON
{
  "type": "checklist",
  "data": {
    "items": [
      { "text": "Install the package", "checked": true },
      { "text": "Mount the editor", "checked": false }
    ]
  }
}

code

シンタックスハイライト付きのコードブロック。typescript、python、rust、go、ruby、swift、kotlin など 50 の言語に対応しています。

フィールド型必須説明
codestringはい表示する生のコード文字列。
languageCodeLanguageいいえ構文ハイライトの言語。デフォルトは typescript です。
themeCodeThemeいいえエディターのカラーテーマ。デフォルトは github-dark です。
showCopybooleanいいえレンダリングされた出力にコピーボタンを表示します。
JSON
{
  "type": "code",
  "data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}

delimiter

セクション間の視覚的な区切り。

フィールド型必須説明
variant'line' | 'stars'はい区切り線の視覚スタイル。次のいずれか: line、stars。
JSON
{
  "type": "delimiter",
  "data": { "variant": "line" }
}

トップレベルおよびセクションの見出し（h1 から h6）。インラインツールは html ペイロード内で動作します。

フィールド型必須説明
htmlstringはい見出しの HTML コンテンツ。インラインツールのマークアップがサポートされています。
level'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'いいえ見出しレベル。次のいずれか: h1、h2、h3、h4、h5、h6。デフォルトは h1 です。
JSON
{
  "type": "header",
  "data": { "html": "Getting started", "level": "h2" }
}

image

キャプションと alt テキストを持つ画像ブロック。Editor.create の imageUploader コールバックを介して処理されます。

フィールド型必須説明
urlstringはい埋め込む画像の URL。
captionstringいいえ画像の下に表示されるプレーンテキストのキャプション。
altstringいいえ画像要素の alt テキスト。
alignment'center' | 'left' | 'right'いいえ画像の水平配置。次のいずれか: center、left、right。
JSON
{
  "type": "image",
  "data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}

list

順序付きまたは順序なしのリスト。各項目は html です。

フィールド型必須説明
type'ordered' | 'unordered'はいリストの種類。次のいずれか: ordered、unordered。
itemsstring[]はいHTML 文字列の配列、リスト項目ごとに 1 つ。
JSON
{
  "type": "list",
  "data": { "type": "unordered", "items": ["First item", "Second item"] }
}

paragraph

リッチテキストの段落。bold、italic、code、link、marker、tooltip などのインラインツールのマークアップを受け付けます。

フィールド型必須説明
htmlstringはい段落の HTML コンテンツ。インラインツールのマークアップがサポートされています。
JSON
{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

任意の著者表記を付けられる引用ブロック。

フィールド型必須説明
htmlstringはい引用本文の HTML コンテンツ。インラインツールのマークアップがサポートされています。
authorstringいいえ引用の下に表示されるプレーンテキストまたは HTML の帰属。
JSON
{
  "type": "quote",
  "data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}

table

データグリッド。最初の行はヘッダーとして使用できます。各セルは html です。

フィールド型必須説明
datastring[][]はいHTML セル文字列の 2 次元配列。最初の行がヘッダー行です。
captionstringいいえテーブルの下に表示されるプレーンテキストまたは HTML のキャプション。
showDownloadbooleanいいえレンダリングされた出力にダウンロードボタンを表示します。
JSON
{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

video

ビデオブロック。Editor.create の videoUploader コールバックを介して処理されます。

フィールド型必須説明
urlstringはいビデオファイルの URL または YouTube/Vimeo の埋め込みリンク。
captionstringいいえプレーヤーの下に表示されるプレーンテキストのキャプション。
altstringいいえビデオ要素のアクセシブルなラベル。
alignment'center' | 'left' | 'right'いいえプレーヤーの水平配置。次のいずれか: center、left、right。
JSON
{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}