OpenPress

@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 Default 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> 封裝實作。