@pptx-editor.dev/react

ContextMenufunctionSource ↗

A context menu at a point. Closed by Escape (focus returns to where it was), Tab, a click outside, or a window resize. The arrow keys, Home, and End move through the rows.

declare function ContextMenu(input: ContextMenuProps): react.ReactPortal;

definePopupfunctionSource ↗

Register an ordinary component in the popups map while keeping its props and hooks. Define the component outside the parent render function to keep its state across renders.

declare function definePopup<Props extends object>(component: ComponentType<Props>, options?: DefinePopupOptions): (props: Props) => ReactNode;

```tsx
function AcmePageSetup({ open, onClose }: PageSetupDialogProps) {
  return open ? <AcmeDialog title="Slide size" onDismiss={onClose} /> : null;
}

<PptxEditor.Root popups={{ pageSetup: definePopup(AcmePageSetup) }}>…</PptxEditor.Root>
```

EditNoticefunctionSource ↗

Why the last edit was refused, or what the last Delete removed with an Undo action. Renders nothing while edits apply, and nothing for a command that had nothing to do (EditorRejection.noop).

EditNotice: (props: EditNoticeProps) => ReactNode

FillControlfunctionSource ↗

Fill color: one menu with the theme and standard colors, Transparent, gradient presets from the theme colors, a custom gradient dialog, a pattern dialog, and a picture.

declare function FillControl(input: FillControlProps): react.JSX.Element;

FindBarfunctionSource ↗

The find and replace bar. Render one inside the editor's viewport, over the canvas.

FindBar: (props: FindBarProps) => ReactNode

FontNoticefunctionSource ↗

The substitution notice. Renders nothing when every font is available.

FontNotice: (props: FontNoticeProps) => ReactNode

GradientDialogfunctionSource ↗

The custom gradient dialog: type, angle, stops, rotation, and a preview.

declare function GradientDialog(input: GradientDialogProps): react.JSX.Element;

HyperlinkPopupfunctionSource ↗

The packaged link popup: PptxEditor.HyperLink with its default parts. A popups.hyperlink renderer can forward its props to it, or render PptxEditor.HyperLink with its own parts.

declare function HyperlinkPopup(props: HyperlinkPopupProps): ReactNode;

IconfunctionSource ↗

An inline Material Symbol.

declare function Icon(input: IconProps): react.JSX.Element;

LayoutGalleryfunctionSource ↗

A grid of the deck's layouts, as the Layout and New Slide galleries show them: one group per slide master, headed by its name, and each tile the engine's render of a new slide on the layout, named below. The tiles are menu rows (menuitem, or menuitemradio with value); arrow keys, Home, and End move between them, so the gallery works in any menu or popup of the host.

declare function LayoutGallery(input: LayoutGalleryProps): react.JSX.Element;

LineGlyphfunctionSource ↗

Glyphs for line kinds, line ends, and preset dashes, drawn in a 48×24 box.

declare function LineGlyph(input: LineGlyphProps): react.JSX.Element;

LineMenuControlfunctionSource ↗

The line tool, the line start and end menus, and the dash menus, with each option drawn.

declare function LineMenuControl(input: LineMenuControlProps): react.JSX.Element | null;

LoadingSpinnerfunctionSource ↗

The packaged spinner on its own, to compose into custom children. It is decorative (aria-hidden), so give the surrounding screen its own text.

declare function LoadingSpinner(input: LoadingSpinnerProps): react.JSX.Element;

MenuEntryfunctionSource ↗

One menu of the bar. Inside PptxEditor.Menu it is a description the bar reads; the bar renders it.

declare function MenuEntry(_props: MenuEntryProps): ReactNode;

MenuGroupfunctionSource ↗

A labeled set of rows inside a menu.

declare function MenuGroup(input: MenuGroupProps): react.JSX.Element | null;

MenuRowfunctionSource ↗

A menu row: icon, label, and shortcut. A disabled row stays focusable with aria-disabled, so a keyboard or pointer user can read why.

declare function MenuRow(props: MenuRowProps): react.JSX.Element;

MenuSeparatorfunctionSource ↗

A line between groups of rows.

declare function MenuSeparator(): react.JSX.Element;

MenuSlotItemfunctionSource ↗

A menu row for a registered slot: its label, icon, shortcut, enabled state, and action come from the chrome registry. A slot that collects a value opens a submenu of its choices.

declare function MenuSlotItem(props: MenuSlotItemProps): ReactNode;

MenuSubmenufunctionSource ↗

A row that opens a cascading panel to its right (to its left at the window's edge). It opens on hover, click, Enter, and ArrowRight, and closes on ArrowLeft and Escape, which give focus back to the row.

declare function MenuSubmenu(props: MenuSubmenuProps): react.JSX.Element;

MenuTableGridfunctionSource ↗

The Insert Table grid, 10 columns by 8 rows, as DOCX Editor's TableSizeGrid: the cell under the pointer (or focus) picks the size and each cell names it. A grid with one tab stop; the arrows, Home, and End move inside it. The insert puts the caret in the new table's first cell, and the editor takes the focus.

declare function MenuTableGrid(input: MenuTableGridProps): react.JSX.Element;

NotesPanefunctionSource ↗

Collapsible speaker notes for the current slide. The text shown is the document's; only the text typed since the field took focus is held here, bound to the slide it was typed on. It is written to that slide (wherever the slide is now) when the field loses focus, when the pointer goes down anywhere else, when the current slide changes, and before a format or an undo.

declare function NotesPane(props?: NotesPaneProps): react.JSX.Element | null;

OpenFailurefunctionSource ↗

A notice that explains why a file did not open, and says when the deck that was open stays open. It shows nothing until the editor refuses a file, and shows again for each later refusal. <PptxEditor> renders it by default; compose it yourself inside a positioned box in a PptxEditor.Root:

tsx <PptxEditor.OpenFailure actions={({ failure }) => ( <a className="pptx-open-failure__action" href={/support?code=${failure.code}}> Get help </a> )} />

For a toast or a banner of your own, use useOpenFailure.

OpenFailure: (props: PptxEditorOpenFailureProps) => ReactNode

PatternDialogfunctionSource ↗

The pattern fill dialog: a preset, its two colors, and a preview.

declare function PatternDialog(input: PatternDialogProps): react.JSX.Element;

PptxEditorContentfunctionSource ↗

The slide canvas: attaches the engine surface in a layout effect. Right-click, Shift+F10, and the Menu key open its context menu.

declare function PptxEditorContent(input: PptxEditorContentProps): react.JSX.Element;

PptxEditorViewportfunctionSource ↗

The editor's scroll and styling scope: carries the .pptx-editor class, and dark with it when the root's colorMode resolves to dark. It is a named landmark region ("Presentation editor"), so a screen reader user can go to the editor from anywhere on the page.

declare function PptxEditorViewport(input: PptxEditorViewportProps): react.JSX.Element;

RailContextMenufunctionSource ↗

The slide rail's context menu: new, duplicate, delete, and move slides, background, and present from here. Rows act on every selected slide.

declare function RailContextMenu(input: RailContextMenuProps): react.JSX.Element;

rejectionMessagefunctionSource ↗

The message for a refusal: its reason, with the detail where the reason names one.

declare function rejectionMessage(t: Translate, rejection: EditorRejection): string;

requestFindBarfunctionSource ↗

Open the find bar of editor: to find, or with the replace row when replace.

declare function requestFindBar(editor: PptxEditorInstance | null, replace?: boolean): void;

requestSectionRenamefunctionSource ↗

Ask the slide rail or the slide sorter of editor to start renaming section sectionId in place, as Home Section Rename Section does: what the section.rename slot runs. Use it when you build your own section chrome. When neither is mounted, nothing opens and a development warning says so.

declare function requestSectionRename(editor: PptxEditorInstance | null, sectionId: string): void;

RibbonTabfunctionSource ↗

One tab of the ribbon. Inside PptxEditor.Ribbon it is a description the ribbon reads.

declare function RibbonTab(_props: RibbonTabProps): ReactNode;

SectionContextMenufunctionSource ↗

The section menu: Rename, Remove, Remove with slides, Remove all, Move up and down, Collapse and Expand all. Every row asks the engine whether it can run.

declare function SectionContextMenu(input: SectionContextMenuProps): react.JSX.Element;

SelectionPanefunctionSource ↗

The selection pane: select, show or hide, rename, and reorder the elements of the current slide. Render it inside the editor root, or open the side panel's **Selection** tab.

declare function SelectionPane(props?: SelectionPaneProps): react.JSX.Element;

ShapeGalleryControlfunctionSource ↗

The insert-shape gallery: every category, every preset as its own preview.

declare function ShapeGalleryControl(input: ShapeGalleryControlProps): react.JSX.Element;

ShapeGridfunctionSource ↗

One gallery category's presets as a grid of previews drawn from their spec geometry. Each preview is a menuitem; the arrow keys move by grid rows (data-columns).

declare function ShapeGrid(input: ShapeGridProps): react.JSX.Element;

ShapeIconfunctionSource ↗

A preset's preview, drawn from its spec geometry.

declare function ShapeIcon(input: ShapeIconProps): react.JSX.Element | null;

ShapeStyleGalleryfunctionSource ↗

The Quick Styles gallery: six theme style rows of seven colors, drawn with the current slide's theme. Put it in a popover or a menu.

declare function ShapeStyleGallery(input: ShapeStyleGalleryProps): ReactNode;

SidePanelfunctionSource ↗

The side panel: Format · Chart Data · Diagram · Selection · Animations · Comments. panes fills a tab.

declare function SidePanel(input: SidePanelProps): react.JSX.Element;

SlideRailAddSlidefunctionSource ↗

Add slide, after the current slide.

declare function SlideRailAddSlide(props: SlideRailPartProps): ReactNode;

SlideRailChooseLayoutfunctionSource ↗

The layout gallery: adds a slide with the layout the person picks.

declare function SlideRailChooseLayout(props: SlideRailPartProps): ReactNode;

SlideRailCollapsefunctionSource ↗

Hide thumbnails: folds the rail to a narrow strip. toggle={false} on the rail removes it.

declare function SlideRailCollapse(props: SlideRailPartProps): ReactNode;

SlideRailDeletefunctionSource ↗

Delete the selected slides. The last slide stays.

declare function SlideRailDelete(props: SlideRailPartProps): ReactNode;

SlideRailDuplicatefunctionSource ↗

Duplicate the selected slides.

declare function SlideRailDuplicate(props: SlideRailPartProps): ReactNode;

SlideRailExpandfunctionSource ↗

Show thumbnails: the one button of the folded rail strip, which opens the rail again. A child of SlideRail replaces it in place; hidden leaves the strip with no button. toggle={false} on the rail removes it.

declare function SlideRailExpand(props: SlideRailPartProps): ReactNode;

SlideRailMoveEarlierfunctionSource ↗

Move the selected slides one place earlier (up, or left in a horizontal rail).

declare function SlideRailMoveEarlier(props: SlideRailPartProps): ReactNode;

SlideRailMoveLaterfunctionSource ↗

Move the selected slides one place later (down, or right in a horizontal rail).

declare function SlideRailMoveLater(props: SlideRailPartProps): ReactNode;

SlideshowfunctionSource ↗

The slide show of the editor in PptxEditor.Root. Mount it once inside the viewport. It shows nothing until a show starts: useSlideshow().start(...), or the keys F5 (from the start) and Shift+F5 or Ctrl/Cmd+Enter (from the current slide).

declare function Slideshow(): react.JSX.Element;

SlideSorterfunctionSource ↗

The slide sorter. Put it where the slide and the rail go in the Normal view, while snapshot().presentationView is slideSorter. When the view becomes slideSorter and no sorter of the editor is mounted, a development warning says so.

declare function SlideSorter(input?: SlideSorterProps): react.JSX.Element;

StatusBarNotesfunctionSource ↗

The Notes button: shows or hides the speaker notes (useNotesPane).

declare function StatusBarNotes(input: StatusBarNotesProps): ReactNode;

StatusBarSlideNumberfunctionSource ↗

"Slide 2 of 5".

declare function StatusBarSlideNumber(input: StatusBarPartProps): ReactNode;

StatusBarViewsfunctionSource ↗

The view buttons: the editor's view switch (view.presentationView: Normal and Slide Sorter), the same control as the default editor's status area.

declare function StatusBarViews(input: StatusBarPartProps): ReactNode;

StatusBarZoomfunctionSource ↗

Zoom out, the zoom level with its menu, and zoom in: the editor's ZoomPill.

declare function StatusBarZoom(input: StatusBarPartProps): ReactNode;

ToolbarActionfunctionSource ↗

A host-owned toolbar action, styled and behaved like the packaged controls. Put it in a Toolbar.Group so it collapses into the More menu with its group. A direct child of a preset toolbar goes after the groups and never collapses, as in DOCX Editor. Without an icon or children, it shows its label as text.

declare function ToolbarAction(props: ToolbarActionProps): ReactNode;

```tsx
<PptxEditor.Toolbar>
  <PptxEditor.Toolbar.Group id="review" label="Review" priority={15}>
    <PptxEditor.Toolbar.Action label="Send for review" icon={<SendIcon />} onSelect={send} />
  </PptxEditor.Toolbar.Group>
</PptxEditor.Toolbar>
```

ToolbarControlfunctionSource ↗

One control, by registry shape.

declare function ToolbarControl(input: ToolbarControlProps): react.JSX.Element;

ToolbarGroupfunctionSource ↗

A group of controls. Inside a Toolbar with the preset on, a built-in id changes that group and any other id adds a host group; with preset={false}, it renders its children. A host group's accessible name is its label, else its translated labelKey, else its id.

declare function ToolbarGroup(props: ToolbarGroupProps): ReactNode;

```tsx
<PptxEditor.Toolbar>
  <PptxEditor.Toolbar.Group id="acme" label="Acme">
    <button type="button" onClick={askLegal}>Ask legal</button>
  </PptxEditor.Toolbar.Group>
  <PptxEditor.Toolbar.Group id="find" hidden />
</PptxEditor.Toolbar>
```

ToolbarSeparatorfunctionSource ↗

A vertical rule between controls, for a preset={false} toolbar.

declare function ToolbarSeparator(input: ToolbarSeparatorProps): ReactNode;

ToolbarSlotfunctionSource ↗

One registered control. Inside a Toolbar with the preset on, it declares an override; anywhere else (preset={false}, a group) it renders the control.

declare function ToolbarSlot(props: ToolbarSlotProps): ReactNode;

```tsx
<PptxEditor.Toolbar>
  <PptxEditor.Toolbar.Slot slotId="text.bold" icon={<BoldIcon />} className="acme-bold" />
  <PptxEditor.Toolbar.Slot slotId="history.undo" asChild>
    <AcmeButton>Undo</AcmeButton>
  </PptxEditor.Toolbar.Slot>
  <PptxEditor.Toolbar.Slot slotId="text.strike" hidden />
</PptxEditor.Toolbar>
```

translatorForfunctionSource ↗

Build a translator for a locale catalog.

declare function translatorFor(locale?: LocaleCatalog): Translate;

useBackgroundDialogfunctionSource ↗

Read the draft of the enclosing Background dialog, for a host's own field inside it. It does not open the dialog: useEditorDialog('background').open() does.

declare function useBackgroundDialog(): UseBackgroundDialogReturn;

useBulletFormatfunctionSource ↗

The bullet format of the selected paragraphs, and the command to change it. apply sends one setBulletFormat, so a dialog's worth of changes is one undo step.

declare function useBulletFormat(): UseBulletFormatReturn;

```tsx
function Bigger() {
  const { isEnabled, apply } = useBulletFormat();
  return <button disabled={!isEnabled} onClick={() => apply({ sizePercent: 150 })}>Bigger bullets</button>;
}
```

useBulletsAndNumberingDialogfunctionSource ↗

Read the draft of the enclosing Bullets and Numbering dialog, for a host's own field inside it. It does not open the dialog: useEditorDialog('bulletsAndNumbering').open() does.

declare function useBulletsAndNumberingDialog(): UseBulletsAndNumberingDialogReturn;

useChromeTranslatefunctionSource ↗

The chrome's translation function, as DOCX Editor's useChromeTranslate: the t of the nearest compound that takes one, else the root's locale. overrides wins for the keys it holds. Use it for the labels of your own parts, so they follow the same language.

declare function useChromeTranslate(overrides?: ReadonlyMap<string, string>): ChromeTranslate;

```tsx
const t = useChromeTranslate();
<PptxEditor.Toolbar.Action label={t('toolbar.save')} onSelect={save} />
```

useColumnsDialogfunctionSource ↗

Read the draft of the enclosing Columns dialog, for a host's own field inside it. It does not open the dialog: useEditorDialog('columns').open() does.

declare function useColumnsDialog(): UseColumnsDialogReturn;

useContextMenuRequestfunctionSource ↗

The open canvas context menu, for a host's own rows: what it opened on, where, and how to close it. Null outside an open menu.

declare function useContextMenuRequest(): ContextMenuRequest | null;

useContextMenuTargetfunctionSource ↗

The element the open context menu opened on (the slide canvas), or null while no menu is open. The same hook as DOCX Editor's.

declare function useContextMenuTarget(): HTMLElement | null;

useDocumentSearchfunctionSource ↗

The editor's find session with no UI, for your own find bar, as DOCX Editor's useDocumentSearch. Every hook on one editor shares the session. Outside a root, it has no matches and every action does nothing.

declare function useDocumentSearch(): UseDocumentSearchResult;

useEditorCaretfunctionSource ↗

The caret, as DOCX Editor's useEditorCaret: the text box, paragraph, and offset, or null when no text is being edited. Compared by value, so a consumer re-renders only when the caret moves.

declare function useEditorCaret(): EditorCaret | null;

useEditorColorModefunctionSource ↗

The theme the enclosing PptxEditor.Root resolved from its colorMode, so parts you build yourself (a portaled popover) can match the chrome. 'system' follows the operating system and re-renders when it changes. Outside a root, or without colorMode, it is 'light'. The same hook as DOCX Editor's.

declare function useEditorColorMode(): UseEditorColorModeReturn;

```tsx
function MyPanel() {
  const { colorMode } = useEditorColorMode();
  return <aside className={colorMode === 'dark' ? 'panel panel--dark' : 'panel'} />;
}
```

useEditorCommandfunctionSource ↗

State and execution for one ChromeSlotId. A slot the adapter runs (a dialog, the link popup, find, the slide show) runs through PptxEditor.Root, as a menu row does; outside a root it is disabled with the reason. useEditorCommand('text.link').execute(url) sets the link (null removes it) with or without the popup. While the speaker notes field has the cursor, text.bold, text.italic, text.underline, and text.strike format the notes text. execute takes any value, so a host can pass a registry option's value; useEditorValueCommand types it.

declare function useEditorCommand(slot: ChromeSlotId): UseEditorCommandReturn;

useEditorDialogfunctionSource ↗

Open, close, and read one of the editor's dialogs. The packaged openers use the same call, so a host renderer in popups receives every request. Outside PptxEditor.Root it reports the dialog as unavailable. It takes the dialog's key; the per-dialog hooks (usePageSetupDialog, useBackgroundDialog, useParagraphDialog, useFontDialog, useBulletsAndNumberingDialog, useColumnsDialog) read an open dialog's draft, as in DOCX Editor.

declare function useEditorDialog(key: PptxEditorDialogKey): UseEditorDialogReturn;

```tsx
function PageSetupButton() {
  const pageSetup = useEditorDialog('pageSetup');
  if (!pageSetup.isAvailable) return null;
  return <button onClick={() => pageSetup.open()}>Page setup</button>;
}
```

useEditorEventfunctionSource ↗

Subscribe to an editor event ('change', 'selectionChange', 'rejection', 'openFailure') for the lifetime of the component, as DOCX Editor's useEditorEvent. It does nothing until the nearest PptxEditor.Root creates the editor, and subscribes again when the instance changes. A new handler on each render does not subscribe again; the latest one is called.

declare function useEditorEvent<E extends keyof PptxEditorEvents>(event: E, handler: PptxEditorEvents[E]): void;

```tsx
useEditorEvent('rejection', (rejection) => toast(rejection.reason));
```

useEditorHostDocumentfunctionSource ↗

The document that the editor's slide is mounted in, as DOCX Editor's useEditorHostDocument: an iframe's when the host mounted the editor there, else the page's own. Null during server rendering. Your own chrome that adds document listeners, reads focus, or adds a <style> uses it in place of the global document. Its defaultView is the editor's window.

declare function useEditorHostDocument(): UseEditorHostDocumentReturn;

```tsx
const hostDocument = useEditorHostDocument();
useEffect(() => {
  if (!hostDocument) return;
  hostDocument.addEventListener('keydown', onShortcut);
  return () => hostDocument.removeEventListener('keydown', onShortcut);
}, [hostDocument]);
```

useEditorSnapshotfunctionSource ↗

Re-render the caller each time editor publishes a change, as DOCX Editor's useEditorSnapshot. Returns a counter that changes on each change, so it also serves as a dependency. Prefer useEditorState with a selector: it re-renders only when its slice changes.

declare function useEditorSnapshot(editor: PptxEditorInstance | null): number;

useEditorStatefunctionSource ↗

Subscribe to a slice of editor state. Re-renders only when isEqual says the slice changed (default Object.is).

declare function useEditorState<T>(selector: (snapshot: EditorSnapshot) => T, isEqual?: (a: T, b: T) => boolean): T;

useEditorValueCommandfunctionSource ↗

State and execution for one typed value slot: execute takes the slot's ToolbarValueMap type, so a typo in a value does not compile, and returns the engine's result.

declare function useEditorValueCommand<K extends keyof ToolbarValueMap>(slot: K): UseEditorValueCommandReturn<ToolbarValueMap[K], ToolbarShownValue<K>>;

useEquationDialogfunctionSource ↗

Read the draft of the enclosing Equation dialog, for a host's own field inside it. It does not open the dialog: useEditorDialog('equation').open() does.

declare function useEquationDialog(): UseEquationDialogReturn;

useFontDialogfunctionSource ↗

Read the draft of the enclosing Font dialog, for a host's own field inside it. It does not open the dialog: useEditorDialog('font').open() does.

declare function useFontDialog(): UseFontDialogReturn;

useFontFamilyfunctionSource ↗

The font family picker's behavior, with no UI, as DOCX Editor's useFontFamily.

declare function useFontFamily(): UseFontFamilyReturn;

```tsx
function FamilyList() {
  const { groups, setValue, isCurrent, isEnabled } = useFontFamily();
  return groups.flatMap((group) =>
    group.rows.map((row) => (
      <button key={row.value} disabled={!isEnabled || row.disabled} aria-pressed={isCurrent(row)}
        onClick={() => setValue(row.value)}>{row.family}</button>
    ))
  );
}
```

useFontFormatfunctionSource ↗

The font of the selected text (or of every run of the selected shapes), and the command to change it. apply sends one setFontFormat, so a dialog's worth of changes is one undo step.

declare function useFontFormat(): UseFontFormatReturn;

```tsx
function Loose() {
  const { isEnabled, apply } = useFontFormat();
  return <button disabled={!isEnabled} onClick={() => apply({ characterSpacingPt: 3 })}>Loose</button>;
}
```

useFontsfunctionSource ↗

Merge font origins into one stable value for PptxEditor.Root's fonts prop.

```tsx // The bundled substitutes: the families this document names, plus its default face. const fonts = useFonts(packagedFonts());

// The same, plus the Google catalog for everything they do not cover. const fonts = useFonts(packagedFonts(), googleFonts());

// Brand faces first, then whatever is left. const fonts = useFonts(brandFragment, packagedFonts());

return <PptxEditor.Root fonts={fonts}>{children}</PptxEditor.Root>; ```

EVERY argument takes the same union, so adding an origin is adding an argument and never a change of shape. Origins compose first-wins in argument order, exactly like composeFontConfiguration: the first argument beats later ones, and any of them beats a substitution for a family some origin supplies directly.

They resolve ONE AFTER ANOTHER, not concurrently, so that each can be told which faces the ones before it already cover and skip fetching them. That costs one extra origin's latency on the critical path and saves a duplicate download — and, for a network origin, a request that would have told a font host which families the document uses for nothing. Order origins cheapest-first.

The returned resolver never changes identity, so the editor is never rebuilt on account of this prop. Arguments are re-read when opening a document or requesting a new family. Changing them alone does not replace already loaded faces; reload the document for that.

It is marked (defineFontResolver), so it can itself be an origin of another list or the fonts option of createPptxEditor without being mistaken for a zero-argument loader.

declare function useFonts(source: FontsInput, ...fragments: readonly (FontConfigurationFragment | undefined)[]): UseFontsReturn;

useFontsfunctionSource ↗

The uniform form: every position takes the same [FontOrigin](FontOrigin), so composing two resolvers is one extra argument.

A resolver in any position but the first must carry the defineFontResolver mark. The first position keeps the older, looser type so that every call that compiled before this overload existed still compiles.

declare function useFonts(...origins: readonly FontOrigin[]): UseFontsReturn;

useHistoryGroupfunctionSource ↗

One undo step for one gesture on your own control, as DOCX Editor's useHistoryGroup. Bind the control with ref, and pass options() to each command that the gesture runs. A drag, a held key, or a color pick is then one step of editor.exec({ type: 'undo' }).

declare function useHistoryGroup(input: HistoryGroupBindingOptions): UseHistoryGroupReturn;

```tsx
const group = useHistoryGroup({ kind: 'range' });
const size = useEditorValueCommand('font.size');
<input type="range" ref={group.ref} onChange={(e) => size.execute(+e.target.value, group.options())} />
```

useHyperlinkPopupfunctionSource ↗

The link popup's behavior, for your own link UI, as DOCX Editor's useHyperlinkPopup.

Inside PptxEditor.Root it is the shared state that the packaged popup shows, so your panel, the toolbar's link control, Insert Link, and Ctrl/Cmd+K agree. With popups.hyperlink: false, the link controls open your panel while it is mounted. Outside a root it is a standalone instance, as useHyperlinkPopupInstance().

declare function useHyperlinkPopup(): UseHyperlinkPopupResult;

```tsx
function LinkPanel() {
  const { state, setUrl, commitEdit, close } = useHyperlinkPopup();
  if (state.mode === 'closed') return null;
  return (
    <form onSubmit={(e) => { e.preventDefault(); commitEdit(); }}>
      <input value={state.draft} onChange={(e) => setUrl(e.target.value)} />
      <button type="button" onClick={close}>Cancel</button>
    </form>
  );
}
```

useHyperlinkPopupInstancefunctionSource ↗

A link popup of its own, as DOCX Editor's useHyperlinkPopupInstance. While active, it opens for the link requests of the editor. Inside a root, prefer useHyperlinkPopup(): the root's own popup also answers the requests.

declare function useHyperlinkPopupInstance(active?: boolean): UseHyperlinkPopupResult;

useImageAltTextDialogfunctionSource ↗

Read the draft of the enclosing Alt Text dialog, for a host's own field inside it. It does not open the dialog: useEditorDialog('imageAltText').open() does.

declare function useImageAltTextDialog(): UseImageAltTextDialogReturn;

useImagePropertiesDialogfunctionSource ↗

Read the draft of the enclosing Format Picture dialog, for a host's own field inside it. It does not open the dialog: useEditorDialog('imageProperties').open() does.

declare function useImagePropertiesDialog(): UseImagePropertiesDialogReturn;

useNotesPanefunctionSource ↗

The open state of the speaker notes that PptxEditor.NotesPane shows, after DOCX Editor's useNavigationPane. Use it to build a notes toggle of your own. Outside PptxEditor.Root it warns and does nothing.

declare function useNotesPane(): UseNotesPaneReturn;

useOpenFailurefunctionSource ↗

Reads the file the editor refused to open, for a host that shows it in its own UI, such as a toast. Pair it with openFailure={false} on <PptxEditor>, so the packaged notice does not show as well. Call it inside a PptxEditor.Root.

declare function useOpenFailure(options?: UseOpenFailureOptions): UseOpenFailureReturn;

usePageSetupDialogfunctionSource ↗

Read the draft of the enclosing Page setup dialog, for a host's own field inside it. It does not open the dialog: useEditorDialog('pageSetup').open() does.

declare function usePageSetupDialog(): UsePageSetupDialogReturn;

useParagraphDialogfunctionSource ↗

Read the draft of the enclosing Paragraph dialog, for a host's own field inside it. It does not open the dialog: useEditorDialog('paragraph').open() does.

declare function useParagraphDialog(): UseParagraphDialogReturn;

useParagraphFormatfunctionSource ↗

The selection's paragraph formatting, and the command to change it. apply sends one setParagraphFormat, so a dialog's worth of changes is one undo step.

declare function useParagraphFormat(): UseParagraphFormatReturn;

```tsx
function SpaceAfterButton() {
  const { isEnabled, apply } = useParagraphFormat();
  return <button disabled={!isEnabled} onClick={() => apply({ spaceAfterPt: 12 })}>12 pt after</button>;
}
```

usePptxEditorfunctionSource ↗

The editor instance, or null before it mounts. Outside PptxEditor.Root it is always null, and a development warning says so, as for the other parts.

declare function usePptxEditor(): PptxEditorInstance | null;

usePptxSourcefunctionSource ↗

Load a presentation, and optionally its fonts, for PptxEditor, as DOCX Editor's useDocxSource.

tsx const { document, fonts, error } = usePptxSource(url, { fonts: packagedFonts() }); if (error) return <p>{error.message}</p>; return <PptxEditor document={document} fonts={fonts} />;

Eager fonts (a value, a promise, or a zero-argument loader) hold the deck back until they settle, so the slides lay out once. They hold it for at most 2 seconds: fonts that settle later apply, and the slides lay out again. An on-demand resolver (packagedFonts(), googleFonts()) needs the parsed deck, so the bytes go through at once and the slides lay out again when the faces arrive. A font failure never fails the deck.

A URL is fetched with the browser's fetch, as written. Check a URL from user input first. A URL that sends no bytes for 10 seconds fails with an error, and a slow download that keeps sending bytes finishes.

declare function usePptxSource(source: PptxSource | null | undefined, options?: UsePptxSourceOptions): UsePptxSourceResult;

useReviewAuthorsfunctionSource ↗

The review authors of the open deck, in slot order (getReviewAuthors): every comment author by first appearance, then the author of new comments, each with the color the comment markers, the text bands, and the comments pane draw them in. Renders again only when a slot changes. Use it for a legend or for your own comment UI.

tsx const authors = useReviewAuthors(); authors.map(({ author, color }) => ( <li key={author} style={{ borderColor: color }}>{author}</li> ));

declare function useReviewAuthors(): readonly ReviewAuthorInfo[];

useScopeClassNamefunctionSource ↗

The scope classes a part you build yourself adds to its own root element, so the editor's --doc-* tokens and chrome styles apply to it, as DOCX Editor's useScopeClassName. Inside PptxEditor.Viewport it is '': the viewport already carries the scope. Outside it, it is 'pptx-editor ', or 'pptx-editor dark ' when the root's colorMode resolved dark. A part that portals out of the viewport (to document.body) adds pptx-editor itself, with useEditorColorMode for the theme.

The value ends with a space, so it concatenates cleanly, and '' collapses away.

declare function useScopeClassName(): '' | 'pptx-editor ' | 'pptx-editor dark ';

```tsx
const scope = useScopeClassName();
<aside className={`${scope}my-panel`} />
```

useSlideLayoutsfunctionSource ↗

The deck's slide layouts (EditorSnapshot.layouts), in the order the galleries list them, reference-stable while they do not change. For a host's own layout picker.

declare function useSlideLayouts(): readonly SlideLayoutSummary[];

useSlideshowfunctionSource ↗

The slide show of the editor in PptxEditor.Root.

declare function useSlideshow(): UseSlideshowReturn;

useToolbarContextfunctionSource ↗

The nearest compound's published value, as DOCX Editor's useToolbarContext.

declare function useToolbarContext(): ToolbarContextValue;

useToolbarLabelfunctionSource ↗

The label for a key: the nearest compound's t, else the locale catalog.

declare function useToolbarLabel(): (key: string) => string;

useToolbarLabelForfunctionSource ↗

The label for a key, given a host resolver: the host's translation, else the locale catalog, as DOCX Editor's useToolbarLabelFor.

declare function useToolbarLabelFor(t: ChromeTranslate | undefined): (key: string) => string;

useTranslationfunctionSource ↗

The translator, with shortcut text for this platform.

declare function useTranslation(): {
    t: Translate;
};

useZoomfunctionSource ↗

Read and set the slide zoom, as DOCX Editor's useZoom. Outside PptxEditor.Root, and before the editor mounts, it reports 100 % and every action does nothing, so a control can render unconditionally.

declare function useZoom(): UseZoomResult;

```tsx
const { zoom, isFit, fit, zoomIn, canZoomIn } = useZoom();
<button onClick={fit} aria-pressed={isFit}>Fit</button>
<button onClick={zoomIn} disabled={!canZoomIn}>+</button>
<span>{Math.round(zoom * 100)}%</span>
```

ZoomPillfunctionSource ↗

The zoom pill (– 100% ▾ +).

declare function ZoomPill(input?: ZoomPillProps): react.JSX.Element;

BackgroundDialogFieldsinterfaceSource ↗

The draft of the Background dialog. background is the fill OK applies: a fill, null for the layout's background, or undefined to keep the slide's own fill.

interface BackgroundDialogFields

BackgroundDialogPropsinterfaceSource ↗

Props for PptxEditor.BackgroundDialog.

interface BackgroundDialogProps extends DialogCustomizationProps

BulletsAndNumberingDialogPropsinterfaceSource ↗

Props for PptxEditor.BulletsAndNumberingDialog.

interface BulletsAndNumberingDialogProps extends DialogCustomizationProps

ColumnsDialogPropsinterfaceSource ↗

Props for PptxEditor.ColumnsDialog.

interface ColumnsDialogProps extends DialogCustomizationProps

ContextMenuNamespaceinterfaceSource ↗

The canvas context menu with its parts attached as statics.

interface ContextMenuNamespace extends ContextMenuNamedRows

ContextMenuPointinterfaceSource ↗

A point in client (viewport) pixels.

interface ContextMenuPoint

ContextMenuPropsinterfaceSource ↗

Props of ContextMenu.

interface ContextMenuProps

ContextMenuRequestinterfaceSource ↗

What a canvas context menu opened on, and where.

interface ContextMenuRequest

DefinePopupOptionsinterfaceSource ↗

Options of definePopup.

interface DefinePopupOptions

DialogCustomizationPropsinterfaceSource ↗

Layout customization for a packaged dialog.

interface DialogCustomizationProps

DialogPartPropsinterfaceSource ↗

Presentation overrides for a dialog part.

Anything beyond these members reaches the rendered element, so a part takes an id, an aria-* label, or a data-* test hook. The part's own wiring wins every collision: a host cannot replace Apply's handler or its data-pptx-part marker by passing one. To own the element and its handler outright, pass asChild and supply your own.

interface DialogPartProps

EditNoticePropsinterfaceSource ↗

The props of EditNotice.

interface EditNoticeProps

EquationDialogFieldsinterfaceSource ↗

The draft of the Equation dialog.

interface EquationDialogFields

EquationDialogPropsinterfaceSource ↗

Props for PptxEditor.EquationDialog.

interface EquationDialogProps extends DialogCustomizationProps

FillControlPropsinterfaceSource ↗

The props of FillControl.

interface FillControlProps

FindBarPropsinterfaceSource ↗

The props of FindBar.

interface FindBarProps

FindPopupPropsinterfaceSource ↗

What a replacement find bar receives.

interface FindPopupProps

FontDialogPropsinterfaceSource ↗

Props for PptxEditor.FontDialog.

interface FontDialogProps extends DialogCustomizationProps

FontFamilyItemPropsinterfaceSource ↗

Props of Toolbar.FontFamily.Item.

interface FontFamilyItemProps extends FontFamilyPartProps

FontFamilyNamespaceinterfaceSource ↗

Toolbar.FontFamily: the font.family picker, as DOCX Editor's FontFamily compound. With no children it renders the default trigger and list; with children, compose the Trigger, Content, and Item parts around the shared state.

interface FontFamilyNamespace

FontFamilyPartPropsinterfaceSource ↗

Props of Toolbar.FontFamily.Trigger and Toolbar.FontFamily.Content.

interface FontFamilyPartProps

FontFamilyPropsinterfaceSource ↗

Props of Toolbar.FontFamily: a picker part's className and hidden, and children that compose its Trigger, Content, and Item parts.

interface FontFamilyProps extends ToolbarSlotPartProps

FontNoticePropsinterfaceSource ↗

The props of FontNotice.

interface FontNoticeProps

GradientDialogPropsinterfaceSource ↗

Props for PptxEditor.GradientDialog.

interface GradientDialogProps

HyperLinkActionPropsinterfaceSource ↗

Props of the action parts, which also take an icon.

interface HyperLinkActionProps extends HyperLinkPartProps

HyperLinkNamespaceinterfaceSource ↗

The link popup compound.

interface HyperLinkNamespace

HyperLinkPartPropsinterfaceSource ↗

Shared props of every part.

interface HyperLinkPartProps

HyperlinkPopupPropsinterfaceSource ↗

What a replacement link popup receives.

interface HyperlinkPopupProps

HyperLinkPropsinterfaceSource ↗

Props of PptxEditor.HyperLink.

interface HyperLinkProps extends HyperLinkPartProps

IconPropsinterfaceSource ↗

The props of Icon.

interface IconProps

ImageAltTextDialogFieldsinterfaceSource ↗

The draft of the Alt Text dialog.

interface ImageAltTextDialogFields

ImageAltTextDialogPropsinterfaceSource ↗

Props for PptxEditor.ImageAltTextDialog.

interface ImageAltTextDialogProps extends DialogCustomizationProps

ImagePropertiesDialogFieldsinterfaceSource ↗

The draft of the Format Picture dialog, in inches, degrees, and percent.

interface ImagePropertiesDialogFields

ImagePropertiesDialogPropsinterfaceSource ↗

Props for PptxEditor.ImagePropertiesDialog.

interface ImagePropertiesDialogProps extends DialogCustomizationProps

LayoutGalleryPropsinterfaceSource ↗

Props of [LayoutGallery](LayoutGallery), named as DOCX Editor's StylePicker names them.

interface LayoutGalleryProps

LineGlyphPropsinterfaceSource ↗

The props of LineGlyph.

interface LineGlyphProps

LineMenuControlPropsinterfaceSource ↗

The props of LineMenuControl.

interface LineMenuControlProps

LoadingComponentinterfaceSource ↗

The loading part, with the packaged spinner as a static.

interface LoadingComponent

LoadingPropsinterfaceSource ↗

Props for PptxEditor.Loading.

interface LoadingProps

LoadingSpinnerPropsinterfaceSource ↗

Props for PptxEditor.Loading.Spinner.

interface LoadingSpinnerProps

MenuEntryPropsinterfaceSource ↗

Props for Menu.Entry and the named menus (Menu.File, …).

interface MenuEntryProps

MenuGroupPropsinterfaceSource ↗

Props for Menu.Group.

interface MenuGroupProps

MenuNamespaceinterfaceSource ↗

The menu bar with its parts attached as statics.

interface MenuNamespace extends MenuNamedRows

MenuPartComponentinterfaceSource ↗

A named menu: a Menu.Entry with its id pinned.

interface MenuPartComponent

MenuPropsinterfaceSource ↗

Props for PptxEditor.Menu.

interface MenuProps

MenuRowPartComponentinterfaceSource ↗

A named menu row: a Menu.Item with its slot pinned.

interface MenuRowPartComponent

MenuRowPartPropsinterfaceSource ↗

Props for a named menu row (Menu.Cut, ContextMenu.Cut, …), as DOCX Editor's.

interface MenuRowPartProps

MenuRowPropsinterfaceSource ↗

Props of MenuRow.

interface MenuRowProps

MenuSlotItemPropsinterfaceSource ↗

Props for Menu.Item and ContextMenu.Slot: one registry row.

interface MenuSlotItemProps

MenuSubmenuPropsinterfaceSource ↗

Props of MenuSubmenu.

interface MenuSubmenuProps

MenuTableGridPropsinterfaceSource ↗

Props of MenuTableGrid (PptxEditor.Menu.TableGrid), DOCX Editor's Menu.TableGrid part (slot, className), with the props a host menu or toolbar popup needs.

interface MenuTableGridProps

NotesPanePropsinterfaceSource ↗

Props of NotesPane: the pane props, without a width (the notes take the slide's width), and the format buttons.

interface NotesPaneProps extends Omit<PaneProps, 'paneWidth'>

OpenFailureContextinterfaceSource ↗

What actions receives.

interface OpenFailureContext

PageSetupDialogFieldsinterfaceSource ↗

The draft of the Page setup dialog. theme keeps the name of the dialog's theme and onThemeChange props on main.

interface PageSetupDialogFields

PageSetupDialogPropsinterfaceSource ↗

Props for PptxEditor.PageSetupDialog.

interface PageSetupDialogProps extends DialogCustomizationProps

PanePropsinterfaceSource ↗

Props of the editor's panes, after DOCX Editor's Navigation (open, onOpenChange, paneWidth). A pane given open is controlled by the host.

interface PaneProps

ParagraphDialogPropsinterfaceSource ↗

Props for PptxEditor.ParagraphDialog.

interface ParagraphDialogProps extends DialogCustomizationProps

PatternDialogPropsinterfaceSource ↗

Props for PptxEditor.PatternDialog.

interface PatternDialogProps

PptxEditorContentPropsinterfaceSource ↗

The props of PptxEditorContent.

interface PptxEditorContentProps

PptxEditorContextMenuPropsinterfaceSource ↗

Props for PptxEditor.ContextMenu.

interface PptxEditorContextMenuProps

PptxEditorOpenFailurePropsinterfaceSource ↗

Props for PptxEditor.OpenFailure.

interface PptxEditorOpenFailureProps

PptxEditorPopupsinterfaceSource ↗

Render overrides for the dialogs the editor mounts. false disables one. A render callback receives the session props (open, onClose) and can forward them to the packaged dialog with its own options.

interface PptxEditorPopups

```tsx
const popups: PptxEditorPopups = {
  pageSetup: (props) => <PageSetupDialog {...props} theme={theme} onThemeChange={setTheme} />,
  background: false,
};
```

PptxEditorPropsinterfaceSource ↗

Props of the <PptxEditor> sugar component.

interface PptxEditorProps

PptxEditorRefinterfaceSource ↗

The imperative handle of PptxEditor and PptxEditor.Root, as DOCX Editor's DocxEditorRef, and the same members as the Vue adapter's. Every member forwards to the editor instance and is safe to call before the editor mounts: load and exec refuse with disabled.noEditor, save and getEditor return null, focus does nothing, and snapshot returns an empty snapshot. Everything else is on the instance that getEditor returns.

interface PptxEditorRef

PptxEditorRootPropsinterfaceSource ↗

Props for PptxEditor.Root. Only document identity reloads the document.

interface PptxEditorRootProps

PptxEditorToolbarNamespaceinterfaceSource ↗

PptxEditor.Toolbar with its statics, as DOCX Editor's DocxEditorToolbarNamespace.

interface PptxEditorToolbarNamespace extends ToolbarNamedParts

PptxEditorViewportPropsinterfaceSource ↗

The props of PptxEditorViewport.

interface PptxEditorViewportProps

RailContextMenuPropsinterfaceSource ↗

Props of the context menu of a slide in the rail or the sorter, and of a popups.railContextMenu renderer.

interface RailContextMenuProps

RailMenuStateinterfaceSource ↗

An open rail menu: where, on which slide, and how it opened.

interface RailMenuState

RibbonNamespaceinterfaceSource ↗

The ribbon with its parts attached as statics.

interface RibbonNamespace

RibbonPropsinterfaceSource ↗

Props for PptxEditor.Ribbon.

interface RibbonProps

RibbonTabPropsinterfaceSource ↗

Props for PptxEditor.Ribbon.Tab.

interface RibbonTabProps

SectionContextMenuPropsinterfaceSource ↗

Props of the section menu, and of a popups.sectionContextMenu renderer: the menu of a section header in the slide rail and in the slide sorter.

interface SectionContextMenuProps

SectionMenuStateinterfaceSource ↗

An open section menu: where it opens, how it opened, and the element it belongs to.

interface SectionMenuState

SelectionPanePropsinterfaceSource ↗

Props of SelectionPane.

interface SelectionPaneProps

ShapeGalleryControlPropsinterfaceSource ↗

The props of ShapeGalleryControl.

interface ShapeGalleryControlProps

ShapeGridPropsinterfaceSource ↗

The props of ShapeGrid.

interface ShapeGridProps

ShapeIconPropsinterfaceSource ↗

The props of ShapeIcon.

interface ShapeIconProps

ShapeStyleGalleryPropsinterfaceSource ↗

Props of ShapeStyleGallery.

interface ShapeStyleGalleryProps

SidePanelPropsinterfaceSource ↗

Props of SidePanel. The host shows or hides the panel by rendering it.

interface SidePanelProps

SlideRailNamespaceinterfaceSource ↗

The slide rail with its action parts attached as statics, as StatusBarNamespace.

interface SlideRailNamespace

SlideRailPartPropsinterfaceSource ↗

Props of every named part of the slide rail's action row.

interface SlideRailPartProps

SlideRailPropsinterfaceSource ↗

Props of SlideRail: the pane props, DOCX Editor's toggle, and orientation.

interface SlideRailProps extends PaneProps

SlideSorterPropsinterfaceSource ↗

Props of [SlideSorter](SlideSorter).

interface SlideSorterProps

StatusBarNamespaceinterfaceSource ↗

The status bar with its parts attached as statics.

interface StatusBarNamespace

StatusBarNotesPropsinterfaceSource ↗

Props of StatusBar.Notes: the part props, and the ladder's icon and asChild.

interface StatusBarNotesProps extends StatusBarPartProps

StatusBarPartPropsinterfaceSource ↗

Props of every status bar part.

interface StatusBarPartProps

StatusBarPropsinterfaceSource ↗

Props for PptxEditor.StatusBar.

interface StatusBarProps

ToolbarActionPropsinterfaceSource ↗

Props for PptxEditor.Toolbar.Action.

interface ToolbarActionProps

ToolbarColorSplitComponentinterfaceSource ↗

A named color split part: a component with its slot as a static.

interface ToolbarColorSplitComponent

ToolbarColorSplitPropsinterfaceSource ↗

Props for the named color split parts (Toolbar.FontColor, Toolbar.Highlight, Toolbar.ShapeFill, Toolbar.LineColor), as DOCX Editor's ToolbarColorSplitProps: the main half takes an icon (the glyph over the color bar).

interface ToolbarColorSplitProps extends ToolbarSlotPartProps

ToolbarContextValueinterfaceSource ↗

What a compound's t prop publishes to its parts, as DOCX Editor's toolbar context.

interface ToolbarContextValue

ToolbarControlPropsinterfaceSource ↗

The props of ToolbarControl.

interface ToolbarControlProps

ToolbarGroupPropsinterfaceSource ↗

Props for PptxEditor.Toolbar.Group.

interface ToolbarGroupProps

ToolbarNamedPartsinterfaceSource ↗

Every named toolbar part, attached to PptxEditor.Toolbar as statics: button parts take ToolbarPartProps, picker parts ToolbarSlotPartProps, as in DOCX Editor.

interface ToolbarNamedParts

ToolbarPartComponentinterfaceSource ↗

A named toolbar part: a Toolbar.Slot with its slot pinned.

interface ToolbarPartComponent

ToolbarPropsinterfaceSource ↗

Props for PptxEditor.Toolbar.

interface ToolbarProps

ToolbarSeparatorPropsinterfaceSource ↗

Props for PptxEditor.Toolbar.Separator.

interface ToolbarSeparatorProps

ToolbarSlotBasePropsinterfaceSource ↗

What every Toolbar.Slot takes.

interface ToolbarSlotBaseProps

ToolbarSlotPartComponentinterfaceSource ↗

A named picker part: a component with its slot as a static.

interface ToolbarSlotPartComponent

ToolbarSlotPartPropsinterfaceSource ↗

Props for the named picker parts (Toolbar.FontFamily, Toolbar.FontColor, …), as DOCX Editor's slot parts: a picker is not one button, so it takes no icon, asChild, or children.

interface ToolbarSlotPartProps

UseBackgroundDialogReturninterfaceSource ↗

The Background draft and its actions.

interface UseBackgroundDialogReturn extends UseDialogReturn<BackgroundDialogFields>

UseBulletFormatReturninterfaceSource ↗

What useBulletFormat returns.

interface UseBulletFormatReturn

UseDialogReturninterfaceSource ↗

A dialog's draft and actions, as its parts and a host's own fields read them.

interface UseDialogReturn<Fields extends object>

UseDocumentSearchResultinterfaceSource ↗

What [useDocumentSearch](useDocumentSearch) returns, as DOCX Editor's UseDocumentSearchResult.

interface UseDocumentSearchResult extends DocumentSearchState

UseEditorColorModeReturninterfaceSource ↗

What useEditorColorMode returns.

interface UseEditorColorModeReturn

UseEditorCommandReturninterfaceSource ↗

A chrome slot's state and its runner: one source of enabled state.

interface UseEditorCommandReturn

UseEditorDialogReturninterfaceSource ↗

What useEditorDialog returns.

interface UseEditorDialogReturn

UseEditorValueCommandReturninterfaceSource ↗

A typed value slot's state and runner, after DOCX Editor's useEditorValueCommand.

interface UseEditorValueCommandReturn<V, S = V>

UseFontFamilyReturninterfaceSource ↗

What useFontFamily returns, as DOCX Editor's UseFontFamilyResult.

interface UseFontFamilyReturn

UseFontFormatReturninterfaceSource ↗

What useFontFormat returns.

interface UseFontFormatReturn

UseHistoryGroupReturninterfaceSource ↗

What [useHistoryGroup](useHistoryGroup) returns.

interface UseHistoryGroupReturn

UseHyperlinkPopupResultinterfaceSource ↗

What useHyperlinkPopup returns, as DOCX Editor's hook of the same name.

interface UseHyperlinkPopupResult extends HyperlinkPopupActions

UseNotesPaneReturninterfaceSource ↗

What useNotesPane returns.

interface UseNotesPaneReturn

UseOpenFailureOptionsinterfaceSource ↗

Options for useOpenFailure, as DOCX Editor's UseOpenFailureOptions.

interface UseOpenFailureOptions

UseOpenFailureReturninterfaceSource ↗

The current refused open, with the packaged message and a way to dismiss it.

interface UseOpenFailureReturn

UseParagraphFormatReturninterfaceSource ↗

What useParagraphFormat returns.

interface UseParagraphFormatReturn

UsePptxSourceResultinterfaceSource ↗

What usePptxSource returns, as DOCX Editor's UseDocxSourceResult.

interface UsePptxSourceResult

UseSlideshowReturninterfaceSource ↗

The slide show of the editor in PptxEditor.Root.

interface UseSlideshowReturn

UseZoomResultinterfaceSource ↗

What [useZoom](useZoom) returns.

interface UseZoomResult

ZoomPillPropsinterfaceSource ↗

Props of ZoomPill.

interface ZoomPillProps

BackgroundDialogFieldNametypeSource ↗

The field names of the Background dialog, for BackgroundDialog.Field: one per fill kind (SlideBackground['kind']), and Apply to all slides.

type BackgroundDialogFieldName = 'solid' | 'gradient' | 'pattern' | 'picture' | 'allSlides';

BulletsAndNumberingDialogFieldNametypeSource ↗

The field names of the Bullets and Numbering dialog, for BulletsAndNumberingDialog.Field: the fields of a whole tab (bullet, number), or one field, named as its input: style, char, font, picture, sizePercent, and color on the Bulleted tab; numberStyle, numberSizePercent, numberColor, and startAt on the Numbered tab.

type BulletsAndNumberingDialogFieldName = 'bullet' | 'number' | 'style' | 'char' | 'font' | 'picture' | 'sizePercent' | 'color' | 'numberStyle' | 'numberSizePercent' | 'numberColor' | 'startAt';

ColumnsDialogFieldNametypeSource ↗

The field names of the Columns dialog, for ColumnsDialog.Field: both fields (columns), or one of them, named as its ColumnsDialogFields key.

type ColumnsDialogFieldName = 'columns' | 'count' | 'spacing';

ContextMenuNamedRowstypeSource ↗

The named rows of the canvas context menu (ContextMenu.Cut, ContextMenu.MergeCells, …), one per row of core's CONTEXT_MENU_NAMED_PARTS.

type ContextMenuNamedRows = {
    readonly [K in ContextMenuPartName]: MenuRowPartComponent;
};

EquationDialogFieldNametypeSource ↗

The field names of the Equation dialog, for EquationDialog.Field.

type EquationDialogFieldName = 'gallery' | 'linear';

FontDialogFieldNametypeSource ↗

The field names of the Font dialog, for FontDialog.Field: a section of the Font tab (allText, effects) or one field, named as its FontDialogFields key, on either tab.

type FontDialogFieldName = 'allText' | 'effects' | 'fontFamily' | 'style' | 'size' | 'color' | 'underline' | 'underlineColor' | 'strike' | 'doubleStrike' | 'superscript' | 'offset' | 'subscript' | 'smallCaps' | 'allCaps' | 'spacing' | 'by' | 'kerning' | 'kerningAt';

FontsInputtypeSource ↗

Anything that can describe fonts: a resolved configuration, a bare fragment, a promise for either (what a loader like defaultFonts() returns), or an on-demand [FontResolver](FontResolver) (what packagedFonts() and googleFonts() return).

The resolver arm is BARE FontResolver, unmarked. FontOrigin — what a list position takes — requires the defineFontResolver mark, because a list may also hold a zero-argument loader and only the mark separates the two. There is no such ambiguity in the first argument of [useFonts](useFonts), which has never accepted a loader, so it keeps taking any resolver.

type FontsInput = FontConfiguration | FontConfigurationFragment | FontResolver | Promise<FontConfiguration | FontConfigurationFragment | undefined> | undefined;

ImageAltTextDialogFieldNametypeSource ↗

The field names of the Alt Text dialog, for ImageAltTextDialog.Field.

type ImageAltTextDialogFieldName = 'description' | 'title' | 'decorative';

ImagePropertiesDialogFieldNametypeSource ↗

The field names of the Format Picture dialog, for ImagePropertiesDialog.Field.

type ImagePropertiesDialogFieldName = 'size' | 'rotation' | 'crop';

MenuNamedRowstypeSource ↗

The named rows of the menu bar (Menu.Cut, Menu.PageSetup, …), one per row of core's MENU_NAMED_PARTS. Put one in the menu that holds its row.

type MenuNamedRows = {
    readonly [K in MenuRowPartName]: MenuRowPartComponent;
};

PageSetupDialogFieldNametypeSource ↗

The field names of the Page setup dialog, for PageSetupDialog.Field.

type PageSetupDialogFieldName = 'slideSize' | 'theme' | 'fonts' | 'substitutes';

ParagraphDialogFieldNametypeSource ↗

The field names of the Paragraph dialog, for ParagraphDialog.Field: a section (general, indentation, spacing) or one field in it, named as its ParagraphDialogFields key. A spacing field holds its unit list.

type ParagraphDialogFieldName = 'general' | 'indentation' | 'spacing' | 'alignment' | 'indentLeft' | 'special' | 'specialBy' | 'spaceBefore' | 'spaceAfter' | 'lineRule' | 'lineAt';

PptxEditorDialogKeytypeSource ↗

The modal dialogs the registry mounts and useEditorDialog opens.

type PptxEditorDialogKey = 'pageSetup' | 'background' | 'paragraph' | 'font' | 'bulletsAndNumbering' | 'columns' | 'imageAltText' | 'imageProperties' | 'equation';

PptxEditorPopuptypeSource ↗

A render callback for an automatic popup. false disables automatic rendering. Same shape as DOCX Editor's DocxEditorPopup.

type PptxEditorPopup<Props extends object> = false | ((props: Props) => ReactNode);

ToolbarPartPropstypeSource ↗

Props for the named button parts (Toolbar.Bold, Toolbar.Undo, …), as DOCX Editor's: the slot is pinned, and children are icon content (icon, else children, else the registry icon), not a replacement. <Toolbar.Bold hidden /> is <Toolbar.Slot slotId="text.bold" hidden />.

type ToolbarPartProps = Omit<ToolbarSlotBaseProps, 'slotId'> & ({
    readonly asChild: true;
    readonly children: ReactElement;
} | {
    readonly asChild?: false;
    readonly children?: ReactNode;
});

ToolbarSlotPropstypeSource ↗

Props for PptxEditor.Toolbar.Slot. With asChild, the single child element renders the control and receives its label, state, and click handler. Without it, children replace the control in its place.

type ToolbarSlotProps = ToolbarSlotBaseProps & ({
    readonly asChild: true;
    readonly children: ReactElement;
} | {
    readonly asChild?: false;
    readonly children?: ReactNode;
});

UseBulletsAndNumberingDialogReturntypeSource ↗

The Bullets and Numbering draft and its actions, for a host's own field.

type UseBulletsAndNumberingDialogReturn = UseDialogReturn<BulletsDialogFields>;

UseColumnsDialogReturntypeSource ↗

The Columns draft and its actions, for a host's own field inside the dialog.

type UseColumnsDialogReturn = UseDialogReturn<ColumnsDialogFields>;

UseEditorHostDocumentReturntypeSource ↗

What useEditorHostDocument returns: the host document, or null with no DOM.

type UseEditorHostDocumentReturn = Document | null;

UseEquationDialogReturntypeSource ↗

The Equation draft and its actions.

type UseEquationDialogReturn = UseDialogReturn<EquationDialogFields>;

UseFontDialogReturntypeSource ↗

The Font draft and its actions, for a host's own field inside the dialog.

type UseFontDialogReturn = UseDialogReturn<FontDialogFields>;

UseFontsReturntypeSource ↗

What useFonts returns: one marked resolver for the component's life. Named for the adapters' composable parity check (PPTX Editor addition).

type UseFontsReturn = MarkedFontResolver;

UseImageAltTextDialogReturntypeSource ↗

The Alt Text draft and its actions.

type UseImageAltTextDialogReturn = UseDialogReturn<ImageAltTextDialogFields>;

UseImagePropertiesDialogReturntypeSource ↗

The Format Picture draft and its actions.

type UseImagePropertiesDialogReturn = UseDialogReturn<ImagePropertiesDialogFields>;

UsePageSetupDialogReturntypeSource ↗

The Page setup draft and its actions.

type UsePageSetupDialogReturn = UseDialogReturn<PageSetupDialogFields>;

UseParagraphDialogReturntypeSource ↗

The Paragraph draft and its actions, for a host's own field inside the dialog.

type UseParagraphDialogReturn = UseDialogReturn<ParagraphDialogFields>;

BackgroundDialogconstSource ↗

Change the slide background, with replaceable parts (Header, Title, Body, Footer, Field, Error, Reset, Apply, Cancel).

BackgroundDialog: typeof BackgroundDialogRoot & {
    Header: (props: DialogPartProps) => ReactNode;
    Title: (props: DialogPartProps) => ReactNode;
    Body: (props: DialogPartProps) => ReactNode;
    Footer: (props: DialogPartProps) => ReactNode;
    Field: (props: DialogPartProps & {
        readonly name: BackgroundDialogFieldName;
    }) => ReactNode;
    Error: (props: DialogPartProps) => ReactNode;
    Reset: (props: DialogPartProps) => ReactNode;
    Apply: (props: DialogPartProps) => ReactNode;
    Cancel: (props: DialogPartProps) => ReactNode;
}

```tsx
<PptxEditor.BackgroundDialog {...props}>
  <PptxEditor.BackgroundDialog.Field name="picture" hidden />
</PptxEditor.BackgroundDialog>
```

BulletsAndNumberingDialogconstSource ↗

Format Bullets and Numbering: the bullet or numbering style, size, color, and start number of the selected paragraphs, applied as one undo step, with replaceable parts (Header, Title, Body, Footer, Field, Error, Apply, Cancel).

BulletsAndNumberingDialog: typeof BulletsAndNumberingDialogRoot & {
    Header: (props: DialogPartProps) => ReactNode;
    Title: (props: DialogPartProps) => ReactNode;
    Body: (props: DialogPartProps) => ReactNode;
    Footer: (props: DialogPartProps) => ReactNode;
    Field: (props: DialogPartProps & {
        readonly name: BulletsAndNumberingDialogFieldName;
    }) => ReactNode;
    Error: (props: DialogPartProps) => ReactNode;
    Apply: (props: DialogPartProps) => ReactNode;
    Cancel: (props: DialogPartProps) => ReactNode;
}

ColumnsDialogconstSource ↗

Home Columns More Columns: the number of text columns of the selected shapes and the spacing between them, applied as one undo step, with replaceable parts (Header, Title, Body, Footer, Field, Error, Apply, Cancel).

ColumnsDialog: typeof ColumnsDialogRoot & {
    Header: (props: DialogPartProps) => ReactNode;
    Title: (props: DialogPartProps) => ReactNode;
    Body: (props: DialogPartProps) => ReactNode;
    Footer: (props: DialogPartProps) => ReactNode;
    Field: (props: DialogPartProps & {
        readonly name: ColumnsDialogFieldName;
    }) => ReactNode;
    Error: (props: DialogPartProps) => ReactNode;
    Apply: (props: DialogPartProps) => ReactNode;
    Cancel: (props: DialogPartProps) => ReactNode;
}

EquationDialogconstSource ↗

Insert Equation and Edit Equation: a gallery of common equations and the linear form, with replaceable parts (Header, Title, Body, Footer, Field, Error, Apply, Cancel).

EquationDialog: typeof EquationDialogRoot & {
    Header: (props: DialogPartProps) => ReactNode;
    Title: (props: DialogPartProps) => ReactNode;
    Body: (props: DialogPartProps) => ReactNode;
    Footer: (props: DialogPartProps) => ReactNode;
    Field: (props: DialogPartProps & {
        readonly name: EquationDialogFieldName;
    }) => ReactNode;
    Error: (props: DialogPartProps) => ReactNode;
    Apply: (props: DialogPartProps) => ReactNode;
    Cancel: (props: DialogPartProps) => ReactNode;
}

```tsx
<PptxEditor.EquationDialog {...props}>
  <PptxEditor.EquationDialog.Field name="gallery" hidden />
</PptxEditor.EquationDialog>
```

FontDialogconstSource ↗

Format Font: the font, style, size, underline, effects, character spacing, and kerning of the selected text, applied as one undo step, with replaceable parts (Header, Title, Body, Footer, Field, Error, Apply, Cancel).

FontDialog: typeof FontDialogRoot & {
    Header: (props: DialogPartProps) => ReactNode;
    Title: (props: DialogPartProps) => ReactNode;
    Body: (props: DialogPartProps) => ReactNode;
    Footer: (props: DialogPartProps) => ReactNode;
    Field: (props: DialogPartProps & {
        readonly name: FontDialogFieldName;
    }) => ReactNode;
    Error: (props: DialogPartProps) => ReactNode;
    Apply: (props: DialogPartProps) => ReactNode;
    Cancel: (props: DialogPartProps) => ReactNode;
}

HyperLinkconstSource ↗

PptxEditor.HyperLink: the link popup with named parts.

HyperLink: HyperLinkNamespace

ImageAltTextDialogconstSource ↗

Alt text of the selected element: description, title, and "Mark as decorative", with replaceable parts (Header, Title, Body, Footer, Field, Error, Apply, Cancel).

ImageAltTextDialog: typeof ImageAltTextDialogRoot & {
    Header: (props: DialogPartProps) => ReactNode;
    Title: (props: DialogPartProps) => ReactNode;
    Body: (props: DialogPartProps) => ReactNode;
    Footer: (props: DialogPartProps) => ReactNode;
    Field: (props: DialogPartProps & {
        readonly name: ImageAltTextDialogFieldName;
    }) => ReactNode;
    Error: (props: DialogPartProps) => ReactNode;
    Apply: (props: DialogPartProps) => ReactNode;
    Cancel: (props: DialogPartProps) => ReactNode;
}

```tsx
<PptxEditor.ImageAltTextDialog {...props}>
  <PptxEditor.ImageAltTextDialog.Field name="title" hidden />
</PptxEditor.ImageAltTextDialog>
```

ImagePropertiesDialogconstSource ↗

Format Picture: size, rotation, and crop position of the selected picture, with replaceable parts (Header, Title, Body, Footer, Field, Error, Apply, Cancel).

ImagePropertiesDialog: typeof ImagePropertiesDialogRoot & {
    Header: (props: DialogPartProps) => ReactNode;
    Title: (props: DialogPartProps) => ReactNode;
    Body: (props: DialogPartProps) => ReactNode;
    Footer: (props: DialogPartProps) => ReactNode;
    Field: (props: DialogPartProps & {
        readonly name: ImagePropertiesDialogFieldName;
    }) => ReactNode;
    Error: (props: DialogPartProps) => ReactNode;
    Apply: (props: DialogPartProps) => ReactNode;
    Cancel: (props: DialogPartProps) => ReactNode;
}

```tsx
<PptxEditor.ImagePropertiesDialog {...props}>
  <PptxEditor.ImagePropertiesDialog.Field name="rotation" hidden />
</PptxEditor.ImagePropertiesDialog>
```

LoadingconstSource ↗