Skip to Content
API Referencetrack-changes-react

@stesura/track-changes-react

Track-changes UI for @stesura/track-changes. Most hosts only pass trackChangesUIExtension to uiExtensions; see React components.

UI extension

trackChangesUIExtension

Pass to the editor’s uiExtensions: context-menu accept/reject, the review tab’s track-changes group, the status bar’s on/off entry, and the format-change hover tooltip. The components are also exported individually for custom chrome.

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

Toolbar

TrackChangesGroup

The review tab’s track-changes group: tracking toggle, visibility toggle, accept and reject.

Parameters:
NameTypeDefault
props{}
Returns:
ReactNode

ToggleTrackChangesButton

Toggles whether edits are recorded as suggestions. Active while tracking is on.

In "review" mode it shows active and locked, since every edit is tracked there regardless of the plugin flag. Locked uses aria-disabled rather than disabled, which would swallow the pointer events the explanatory tooltip needs.

Parameters:
NameTypeDefault
props{}
Returns:
ReactNode

ToggleTrackChangesVisibilityButton

Toggles whether pending suggestions are shown. Tracking keeps running while they are hidden; the document then reads as if everything were accepted.

Parameters:
NameTypeDefault
props{}
Returns:
ReactNode

TrackChangesAcceptButton

Accept split button: accept-and-next, accept all, or accept all and stop tracking.

Parameters:
NameTypeDefault
props{}
Returns:
ReactNode

TrackChangesRejectButton

Reject split button: reject-and-next, reject all, or reject all and stop tracking.

Parameters:
NameTypeDefault
props{}
Returns:
ReactNode

TrackChangesContextMenu

Accept/reject entries for the context menu; renders nothing unless the cursor is on a pending change. The group label (chips + author/date) describes both items via aria-describedby, making it the keyboard equivalent of the hover tooltip.

Parameters:
This function does not accept any parameters.
Returns:
Element | null

TrackChangesModificationTooltip

Hover tooltip describing pending format changes (”+ Bold”) with author and date. Mounted through documentOverlaySlot by trackChangesUIExtension. Hidden while suggestions are hidden. Being viewport-fixed and a reading of one doc version, it’s dismissed on mousedown, scroll or leaving the editor, and hidden once the doc changes.

The visual box is aria-hidden: the hovered markup isn’t React-owned, so nothing can reference it. The text goes to an always-mounted polite live region instead, which also speaks announceResolution messages (TC-88). Keyboard users get the same information from the context menu.

Parameters:
This function does not accept any parameters.
Returns:
Element
Last updated on
track-changesContributing