@open-press/core

MdxArea

A measurable content slot inside a Frame. The engine fills instantiated MdxAreas with allocated blocks coming from a source chain — your job is to declare where MDX content goes; the engine handles measurement, pagination, and overflow.

<MdxArea> defines a dynamic content slot within a Frame container. The rendering engine identifies the source based on the provided chainId, automatically executing block measurement and pagination allocation.

Component Impl

# `<MdxArea>`

Declares a content fill area managed by the engine, outputting a <div> adorned with data attributes. The engine calculates space and mounts corresponding AST nodes through multiple render passes.

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

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

Props

Name	Type	Default	Description
`chainId` required	`string`		The identifier for the target source chain. For sources defined by `mdxSource()`, this corresponds to the source name (e.g., `story`). For manuscript utilities (like `Sections`), this is the automatically generated chapter chain identifier (e.g., `chapter:intro`).
`overflow`	`"extend" \| "truncate"`	`"extend"`	Overflow handling strategy. `extend`: triggers the allocation of subsequent Frame pages when content exceeds the slot. `truncate`: forcibly truncates out-of-bounds content and skips rendering.
`className`	`string`		CSS class attached to the root ` `, used for theme style selectors.
`...rest`	`HTMLAttributes`		Other standard HTML attributes passed through to the ` `.

Example: Long-form Content Auto-pagination

<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>

Example: Fixed Layout Truncation

<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>

Runtime Data Attributes

The <MdxArea>’s corresponding DOM element outputted by the engine will carry the following attributes, acting as interfaces for inspectors and debugging tools:

Name	Type	Description
`data-openpress-mdx-area`	`"true"`	Existence marker.
`data-openpress-mdx-area-chain`	`string`	Corresponds to the `chainId` prop.
`data-openpress-mdx-area-index`	`number`	Zero-based index (0, 1, 2...) calculated based on the appearance order of the same chain within the parent `Frame`.
`data-openpress-object-id`	`string`	A unique identifier following the format `mdx-area:::`.
`data-openpress-mdx-area-overflow`	`"extend" \| "truncate"`	Corresponds to the `overflow` prop.
`data-openpress-mdx-area-empty`	`"true" \| "false"`	Set to `true` when no blocks are allocated during a render pass.

Technical Limitations and Considerations

<MdxArea> must exist within a valid FrameContext (i.e., wrapped by a <Frame>). If placed outside, it will be invalid and fall back to an empty node.
No overflow warnings are generated when overflow="truncate" is set.
Table of Contents (TOC) chains reserve the toc: prefix. TocArea in @open-press/core/manuscript is a built-in encapsulated implementation of <MdxArea>.