@stesura/pagination-react
React UI for @stesura/pagination: node views, the header/footer panel and the hooks custom node views use. See the Pagination guide.
UI extension
Pass it to the editor’s uiExtensions; it needs no further wiring.
paginationUiExtension
The pagination UI bundle: section, header/footer and paginated block node views,
table row/cell wrappers, the View and Page tab toolbar groups, the status-bar
toggle, and the HeaderFooterPanel overlay. Pass it in uiExtensions.
Components
SectionNodeview
Node view for section: the page container. While pagination is on it draws
the page overlay (page gaps, headers, footers) over the flow and runs the
layout engine for the section.
Registered by paginationUiExtension.
| Name | Type | Default |
|---|---|---|
props | Omit<SectionNodeViewProps, "ref"> & RefAttributes<HTMLDivElement> |
HeaderFooterPanel
The header/footer editor panel, open while useSetHeaderFooterEditing has a
region selected. paginationUiExtension mounts it as an overlay.
| Name | Type | Default |
|---|---|---|
props | {} |
Pagination state
useShowPagination
Whether pagination is on for the enclosing editor. Read-only: toggle via the
togglePagination command — the plugin reverts direct atom writes and they
skip the on/off cleanup.
useCurrentEditorShowPagination
Same, for the current root editor. Shared toolbar chrome dispatches to the current editor, so it must read that one or its active state desyncs.
useDocPageNumbering
Document-wide page numbering seen from one section: pages before it, total pages, and its first page’s number and format (w:pgNumType restarts).
Sections only know their own page count, so this sums the pageCounts
store (published in document order). Sections not yet laid out contribute
nothing; the numbers converge after the first pass.
| Name | Type | Default |
|---|---|---|
sectionId | string |
useVariantCache
The section’s header/footer variants besides the default (first, even).
| Name | Type | Default |
|---|---|---|
sectionId | string |
useVariantLabels
Translated header/footer variant names, used to qualify the accessible names of per-page header/footer affordances.
Custom node views
Per-node results of the engine. Each hook re-renders only when its own node’s value changes. See Node views.
useOversizedNode
Max height (px) for an atomic node taller than the usable page, or
undefined if it fits. The node view clips to it with overflow: hidden.
| Name | Type | Default |
|---|---|---|
editorId | string | |
nodeId | string |
useReportNodeResize
Re-paginates when a node’s rendered size changes without a transaction (an embed resolving, an image decoding, a chart re-rendering). Attach the returned ref to the nodeview’s root element:
const reportResize = useReportNodeResize(node.attrs.id);
const domProps = useStesuraNodeView(props, useMergedDOMRefs(ref, reportResize));Compares scrollHeight, not the border box: the oversized clamp uses
max-height, which leaves scrollHeight alone, so applying or removing it
can’t loop. The meta-only PAGINATION_DIRTY_NODES_META dispatch (no steps,
so no history/collab traffic) re-measures only this node.
useParagraphBreaks
Page breaks through a wrapped paragraph (floats an anchored image, renders
display: flow-root). The section-level break float can’t push lines inside
a BFC, so TextBlockNodeview simulates the break with internal floats — the
paragraph twin of useCellBreaks.
| Name | Type | Default |
|---|---|---|
editorId | string | |
nodeId | string |
useBlockBreaks
A block’s in-block breaks, pin and intrinsic size (docs/executed/in-block-breaks-plan.md).
| Name | Type | Default |
|---|---|---|
editorId | string | |
nodeId | string |
useRowHeightOverride
Engine height override for a table_row (Word-style fixed row heights):
hasOverridefalse → use the row’sheightattr.heightnumber → clamped; render the<tr>at it withoverflow: hidden.heightnull → forced height released (Case 3); render at natural height so it splits.exactReleased: anexactrow taller than the page, rendered unclipped.
| Name | Type | Default |
|---|---|---|
editorId | string | |
rowId | string |
useRowPaddingTop
Page-break overlay clearance (px) for a table_row starting a new page, else 0.
Per row: the row view grows a fixed-height row by it and forwards it to its
cells via RowPaginationProvider as top padding.
| Name | Type | Default |
|---|---|---|
editorId | string | |
rowId | string |
usePaginationLayoutEffect
Measures a section and runs the layout engine for it whenever its content or
the pagination version changes, and returns its layout. SectionNodeview’s
page overlay calls it; a custom section node view must too.
| Name | Type | Default |
|---|---|---|
node | Node |
Diagnostics
Layout checks the demo and E2E fixtures run against the live DOM.
describePaginationLayout
Markdown layout report of the section as rendered now, without running the
check or any recovery. focusNodeIds (flagged by the caller’s own checks)
get a full block description each. Undefined while the section has no
layout or isn’t mounted.
| Name | Type | Default |
|---|---|---|
editorId | string | |
sectionId | string | |
focusNodeIds | string[] |
runPaginationChecks
Runs the layout check of every mounted section of editorId now, without
the settle debounce. Outcomes go through reportPaginationFailure as usual
(a failure starts the clean rebuild). For test harnesses: call it once
pagination is idle.
| Name | Type | Default |
|---|---|---|
editorId | string |
getFailedLayoutReport
Markdown layout report of the section’s last failed check, unless one passed since.
| Name | Type | Default |
|---|---|---|
editorId | string | |
sectionId | string |
getSectionPaginationState
The section’s pagination state as last published by the engine. For harnesses diffing engine output.
| Name | Type | Default |
|---|---|---|
editorId | string | |
sectionId | string |
reconcileSectionLayout
Every placed block’s engine-vs-DOM bottom of the section as rendered now
(reconcilePaginationLayout), without running the check. For
harnesses that need the whole series, not the report’s capped divergences.
| Name | Type | Default |
|---|---|---|
editorId | string | |
sectionId | string |