Skip to Content
API Referencepagination-react

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

NameTypeDefault
leftPanelsLeftPanelElement[]
rightPanelsRightPanelElement[]
bottomPanelsBottomPanelElement[]
contextMenuExtensionsContextMenuExtension[]
textMenuExtensionsTextMenuExtension<string>[]
toolbarDefaultTabsPartial<Record<ToolbarDefaultTabs, false>>
toolbarDefaultExtensionsToolbarDefaultExtension[]
toolbarGroupExtensionsToolbarGroupExtension[]
toolbarTabsToolbarExtensionTab[]

Whole tabs after the built-in ones, usually contextual.

floatingMenuExtensionsFloatingMenuExtension[]
slashMenuExtensionsMenuElement[]
StatusBarElementsStatusBarElement[]
nodeViewsNodeViews
nodeViewWrappersRecord<string, ComponentType<NodeViewWrapperComponentProps>>

DOM-less wrappers composed around whichever view wins for a node type. A wrapper must render {children} (the wrapped view) and add no DOM; it contributes via context, typically NodeViewSlotsProvider. Unlike a nodeViews entry, it survives the consumer’s nodeViews overrides.

nodeViewFallback(type: NodeType) => NodeView | undefined

The view for a block type core doesn’t define and nothing registered a view for by name (a host schema’s own node), or undefined to pass. The last extension answering wins; otherwise editor-react renders the type’s toDOM with its derived values and slots (DerivedSpecView).

nodeViewWrapperFallback(type: NodeType) => ComponentType<NodeViewWrapperComponentProps> | undefined

A nodeViewWrappers entry for a block type core doesn’t define, when this extension names no wrapper for it. Composed around whichever view wins, the host’s own included, so a host node gets the extension’s behaviour (pagination’s page-break lead) without being listed.

pdfPreviewPdfPreviewCapability

Renders PDF file nodes as page previews (@stesura/pdf-viewer-react). Declared on the extension rather than set from an effect so the file view, pagination and export know it before the first layout; an effect arrives a commit late and forced a second pagination pass.

calloutFrameComponentType<CalloutFrameProps>

Replaces the callout title bar’s content (icon + title). Rendered inside the non-editable bar above the body; pagination measures it as chrome, so give it padding, never margins.

documentOverlaySlotReact.ReactNode
ResizableLayoutBottomSlotReact.ReactNode
TopLeftSlotReact.ReactNode
CommentsSlotReact.ReactNode

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.

Parameters:
NameTypeDefault
propsOmit<SectionNodeViewProps, "ref"> & RefAttributes<HTMLDivElement>
Returns:
ReactNode

HeaderFooterPanel

The header/footer editor panel, open while useSetHeaderFooterEditing has a region selected. paginationUiExtension mounts it as an overlay.

Parameters:
NameTypeDefault
props{}
Returns:
ReactNode

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.

Parameters:
This function does not accept any parameters.
Returns:
boolean

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.

Parameters:
This function does not accept any parameters.
Returns:
boolean

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.

Parameters:
NameTypeDefault
sectionIdstring
Returns:
{ pageOffset: number; totalPages: number; firstPageNumber: number; format: PageNumberFormat; }

useVariantCache

The section’s header/footer variants besides the default (first, even).

Parameters:
NameTypeDefault
sectionIdstring
Returns:
Set<"even" | "first">

useVariantLabels

Translated header/footer variant names, used to qualify the accessible names of per-page header/footer affordances.

Parameters:
This function does not accept any parameters.
Returns:
Record<HeaderFooterVariant, string>

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.

Parameters:
NameTypeDefault
editorIdstring
nodeIdstring
Returns:
number | undefined

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.

Parameters:
NameTypeDefault
nodeIdstring | ((view: EditorView) => string | undefined)

The id to dirty, or a resolver run at report time. Lets an inline nodeview, which has no id, dirty the block pagination measures (its parent textblock).

Returns:
RefCallback<HTMLElement>

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.

Parameters:
NameTypeDefault
editorIdstring
nodeIdstring
Returns:
ParagraphBreak[] | undefined

useBlockBreaks

A block’s in-block breaks, pin and intrinsic size (docs/executed/in-block-breaks-plan.md).

Parameters:
NameTypeDefault
editorIdstring
nodeIdstring
Returns:
BlockBreaks | undefined

useRowHeightOverride

Engine height override for a table_row (Word-style fixed row heights):

  • hasOverride false → use the row’s height attr.
  • height number → clamped; render the <tr> at it with overflow: hidden.
  • height null → forced height released (Case 3); render at natural height so it splits. exactReleased: an exact row taller than the page, rendered unclipped.
Parameters:
NameTypeDefault
editorIdstring
rowIdstring
Returns:
{ hasOverride: boolean; height: number | null; exactReleased: boolean; }

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.

Parameters:
NameTypeDefault
editorIdstring
rowIdstring
Returns:
number

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.

Parameters:
NameTypeDefault
nodeNode
Returns:
PaginationState | null

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.

Parameters:
NameTypeDefault
editorIdstring
sectionIdstring
focusNodeIdsstring[]
Returns:
string | undefined

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.

Parameters:
NameTypeDefault
editorIdstring
Returns:
void

getFailedLayoutReport

Markdown layout report of the section’s last failed check, unless one passed since.

Parameters:
NameTypeDefault
editorIdstring
sectionIdstring
Returns:
string | undefined

getSectionPaginationState

The section’s pagination state as last published by the engine. For harnesses diffing engine output.

Parameters:
NameTypeDefault
editorIdstring
sectionIdstring
Returns:
PaginationState | null

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.

Parameters:
NameTypeDefault
editorIdstring
sectionIdstring
Returns:
LayoutReconciliation | null
Last updated on