@open-press/core

MdxArea

Frame 内部の測定可能なコンテンツスロット。エンジンは割り当てられたブロックを MdxArea インスタンスに埋め込みます。これらのブロックはソースチェーン (source chain) から提供されます。あなたのタスクは MDX コンテンツを配置する場所を宣言することであり、エンジンは測定、ページネーション、およびオーバーフロー (overflow) を処理します。

<MdxArea> は Frame コンテナ内の動的なコンテンツスロットを定義します。レンダリングエンジンは提供された chainId に基づいてソースを識別し、自動的にブロックの測定とページネーションの割り当てを行います。

Component Impl

# `<MdxArea>`

エンジンによって管理されるコンテンツの埋め込み領域を宣言し、データ属性を付与した <div> を出力します。エンジンは複数のレンダリングフェーズを通じてスペースを計算し、対応する AST ノードをマウントします。

import { MdxArea } from "@open-press/core";

<MdxArea chainId="story" overflow?="extend" className?="my-area" />

プロパティ (Props)

Name	Type	Default	Description
`chainId` required	`string`		ターゲットソースチェーンの識別子。`mdxSource()` で定義されたソースの場合、ソース名（例: `story`）に対応します。原稿補助ツール（例: `Sections`）の場合は、自動生成されるチャプターチェーンの識別子（例: `chapter:intro`）になります。
`overflow`	`"extend" \| "truncate"`	`"extend"`	オーバーフローの処理戦略。`extend`: コンテンツがスロットを超える場合、後続の Frame ページネーション配置の追加をトリガーします。`truncate`: 範囲を超えるコンテンツを強制的に切り捨て、レンダリングをスキップします。
`className`	`string`		ルートの ` ` に追加される CSS クラス。テーマのスタイルセレクタで使用されます。
`...rest`	`HTMLAttributes`		` ` にパススルーされる、その他の標準 HTML 属性。

例：長文コンテンツの自動ページネーション

<Frame frameKey="ch-1" role="document.content">
  <div className="flex h-full flex-col px-16 py-12">
    <main className="min-h-0 flex-1 text-[22px] leading-relaxed">
      <MdxArea chainId="story" overflow="extend" />
    </main>
  </div>
</Frame>

例：固定レイアウトの切り捨て

<Frame frameKey="slide-1" role="canvas.slide" chrome={false}>
  <div className="grid h-full place-items-center bg-neutral-950 p-16 text-white">
    <main className="w-full max-w-5xl">
      <MdxArea chainId="slides" overflow="truncate" />
    </main>
  </div>
</Frame>

実行時の Data 属性

エンジンが出力する <MdxArea> に対応する DOM 要素には、インスペクタおよびデバッグツールのインターフェースとして以下の属性が付与されます：

Name	Type	Description
`data-openpress-mdx-area`	`"true"`	存在マーカー。
`data-openpress-mdx-area-chain`	`string`	`chainId` プロパティに対応します。
`data-openpress-mdx-area-index`	`number`	親 `Frame` 内での同じチェーンの出現順序に基づいて計算された、ゼロベースのインデックス（0, 1, 2...）。
`data-openpress-object-id`	`string`	`mdx-area:::` の形式に従う一意の識別子。
`data-openpress-mdx-area-overflow`	`"extend" \| "truncate"`	`overflow` プロパティに対応します。
`data-openpress-mdx-area-empty`	`"true" \| "false"`	レンダリングパスでブロックが割り当てられなかった場合に `true` に設定されます。

技術的な制限と注意事項

<MdxArea> は有効な FrameContext（すなわち <Frame> でラップされていること）の中に存在しなければなりません。外部に配置された場合は無効となり、空のノードにフォールバックされます。
overflow="truncate" に設定されている場合、オーバーフローの警告は発生しません。
目次 (TOC) チェーンは toc: プレフィックスを予約しています。@open-press/core/manuscript の TocArea は、組み込みの <MdxArea> ラッパー実装です。